@koslibs/components 1.14.2 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @koslibs/components
 
+## 1.15.0
+
+### Minor Changes
+
+- [#18](https://github.com/koslibs/components/pull/18) [`d845497`](https://github.com/koslibs/components/commit/d845497056e4d88881bb25814102fe9fb4bb9e07) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен Sidepanel.onExited?: VoidFunction для уведомления после анимации ухода и фактического закрытия dialog. При reduced motion callback вызывается сразу после закрытия. Повторное открытие отменяет прежнее завершение; первоначальное open=false, ререндер и принудительное размонтирование не вызывают callback. onClose остаётся запросом закрытия.
+
+    Добавлены тесты закрытия, отмены, reduced motion и StrictMode, а также документация и пример удаления экземпляра панели менеджером приложения через onExited.
+
 ## 1.14.2
 
 ### Patch Changes

package/dist/components/Sidepanel/hooks/use-dialog-transition.js

@@ -18,6 +18,7 @@ function useDialogTransition(dialogRef, open, onExited) {
         open,
         onExited
     });
+    const phase = useRef('closed');
     useLayoutEffect(()=>{
         latest.current = {
             open,
@@ -29,7 +30,8 @@ function useDialogTransition(dialogRef, open, onExited) {
     ]);
     const finishClosing = useCallback(()=>{
         const dialog = dialogRef.current;
-        if (!dialog || latest.current.open) return;
+        if (!dialog || latest.current.open || 'closing' !== phase.current) return;
+        phase.current = 'closed';
         if (dialog.open) dialog.close();
         setActive(false);
         latest.current.onExited();
@@ -42,7 +44,9 @@ function useDialogTransition(dialogRef, open, onExited) {
         if (!dialog || !view) return;
         let frame;
         let timeout;
+        let cancelled = false;
         if (open) {
+            phase.current = 'open';
             if (!dialog.open) {
                 dialog.dataset.state = 'closed';
                 dialog.showModal();
@@ -52,13 +56,19 @@ function useDialogTransition(dialogRef, open, onExited) {
             frame = view.requestAnimationFrame(()=>{
                 dialog.dataset.state = 'open';
             });
-        } else if (dialog.open && 'open' === dialog.dataset.state) {
-            dialog.dataset.state = 'closed';
-            const duration = transitionTime(dialog);
-            if (0 === duration) finishClosing();
-            else timeout = view.setTimeout(finishClosing, duration + 50);
-        } else finishClosing();
+        } else if ('closed' !== phase.current) {
+            phase.current = 'closing';
+            if (dialog.open && 'open' === dialog.dataset.state) {
+                dialog.dataset.state = 'closed';
+                const duration = transitionTime(dialog);
+                if (0 === duration) finishClosing();
+                else timeout = view.setTimeout(()=>{
+                    if (!cancelled) finishClosing();
+                }, duration + 50);
+            } else finishClosing();
+        }
         return ()=>{
+            cancelled = true;
             if (void 0 !== frame) view.cancelAnimationFrame(frame);
             if (void 0 !== timeout) view.clearTimeout(timeout);
         };
@@ -70,6 +80,7 @@ function useDialogTransition(dialogRef, open, onExited) {
     useLayoutEffect(()=>{
         const dialog = dialogRef.current;
         return ()=>{
+            phase.current = 'closed';
             if (dialog?.open) dialog.close();
         };
     }, [

package/dist/components/Sidepanel/sidepanel.d.ts

@@ -1,6 +1,7 @@
 export declare const Sidepanel: import("react").ForwardRefExoticComponent<Omit<import("react").DialogHTMLAttributes<HTMLDialogElement>, "open" | "onClose" | "onCancel"> & {
     open: boolean;
     onClose?: VoidFunction;
+    onExited?: VoidFunction;
     escapeKeyDown?: boolean;
     backdropClick?: boolean;
     lockScroll?: boolean;

package/dist/components/Sidepanel/sidepanel.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useLayoutEffect, useState } from "react";
 import { Portal } from "../Portal/index.js";
 import { SidepanelSurface } from "./components/sidepanel-surface/index.js";
-const Sidepanel = /*#__PURE__*/ forwardRef(({ open, getPortalContainer, ...restProps }, ref)=>{
+const Sidepanel = /*#__PURE__*/ forwardRef(({ open, onExited, getPortalContainer, ...restProps }, ref)=>{
     const [mounted, setMounted] = useState(open);
     useLayoutEffect(()=>{
         if (open) setMounted(true);
@@ -10,9 +10,10 @@ const Sidepanel = /*#__PURE__*/ forwardRef(({ open, getPortalContainer, ...restP
         open
     ]);
     const handleExited = useCallback(()=>{
-        if (!open) setMounted(false);
+        setMounted(false);
+        onExited?.();
     }, [
-        open
+        onExited
     ]);
     return mounted ? /*#__PURE__*/ jsx(Portal, {
         getPortalContainer: getPortalContainer,

package/dist/components/Sidepanel/types.d.ts

@@ -10,6 +10,10 @@ export type SidepanelProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open
      * Запрос закрытия по крестику, Escape или бекдропу.
      */
     onClose?: VoidFunction;
+    /**
+     * Вызывается после завершения закрытия панели.
+     */
+    onExited?: VoidFunction;
     /**
      * Разрешает запрос закрытия по Escape.
      * @default true

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koslibs/components",
-    "version": "1.14.2",
+    "version": "1.15.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",