@koslibs/components 1.14.1 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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
+
+- [#17](https://github.com/koslibs/components/pull/17) [`b2d48a4`](https://github.com/koslibs/components/commit/b2d48a4827770b38f6320f3e760eb568b3cc6b1d) Thanks [@holypower777](https://github.com/holypower777)! - Исправлен Sidepanel Footer: primary и secondary принимают готовые JSX-элементы кнопок вместо типов компонентов. Пропсы, обработчики и ref кнопок задаются снаружи и сохраняются. primary остаётся обязательным, secondary — необязательным; gap, layout и sticky работают как прежде. Обновлены типы, Storybook и тесты.
+
 ## 1.14.1
 
 ### Patch Changes

package/dist/components/Sidepanel/components/footer/index.d.ts

@@ -1,16 +1,16 @@
-import { type ComponentType, type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactElement } from 'react';
 import type { ButtonProps } from '../../../Button/index.js';
 export type FooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> & {
     /**
-     * Компонент основной кнопки. Обязателен; располагается после secondary (справа в строке).
-     * Внешний вид и обработчики задаются внутри переданного компонента.
+     * JSX-элемент основной кнопки. Обязателен; располагается после secondary (справа в строке).
+     * Внешний вид, обработчики и ref задаются непосредственно на кнопке.
      */
-    primary: ComponentType<ButtonProps>;
+    primary: ReactElement<ButtonProps>;
     /**
-     * Компонент вторичной кнопки. Располагается перед primary (слева в строке).
+     * JSX-элемент вторичной кнопки. Располагается перед primary (слева в строке).
      * Не выводится, если проп не передан.
      */
-    secondary?: ComponentType<ButtonProps>;
+    secondary?: ReactElement<ButtonProps>;
     /**
      * Минимальное расстояние между кнопками в пикселях из общей шкалы отступов.
      * @default 12
@@ -34,15 +34,15 @@ export type FooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dan
 };
 export declare const Footer: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML"> & {
     /**
-     * Компонент основной кнопки. Обязателен; располагается после secondary (справа в строке).
-     * Внешний вид и обработчики задаются внутри переданного компонента.
+     * JSX-элемент основной кнопки. Обязателен; располагается после secondary (справа в строке).
+     * Внешний вид, обработчики и ref задаются непосредственно на кнопке.
      */
-    primary: ComponentType<ButtonProps>;
+    primary: ReactElement<ButtonProps>;
     /**
-     * Компонент вторичной кнопки. Располагается перед primary (слева в строке).
+     * JSX-элемент вторичной кнопки. Располагается перед primary (слева в строке).
      * Не выводится, если проп не передан.
      */
-    secondary?: ComponentType<ButtonProps>;
+    secondary?: ReactElement<ButtonProps>;
     /**
      * Минимальное расстояние между кнопками в пикселях из общей шкалы отступов.
      * @default 12

package/dist/components/Sidepanel/components/footer/index.js

@@ -1,11 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
 import { forwardRef, useContext } from "react";
 import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
 import { SidepanelContext } from "../../context.js";
 import index_module from "../../index.module.js";
 import index_module_0 from "./index.module.js";
-const Footer = /*#__PURE__*/ forwardRef(({ primary: Primary, secondary: Secondary, gap = 12, sticky = true, layout = 'space-between', className, dataTestId, ...restProps }, ref)=>{
+const Footer = /*#__PURE__*/ forwardRef(({ primary, secondary, gap = 12, sticky = true, layout = 'space-between', className, dataTestId, ...restProps }, ref)=>{
     const { dataTestId: panelDataTestId } = useContext(SidepanelContext);
     const getDataTestId = useDataTestId(dataTestId ?? panelDataTestId);
     return /*#__PURE__*/ jsxs("div", {
@@ -16,8 +16,8 @@ const Footer = /*#__PURE__*/ forwardRef(({ primary: Primary, secondary: Secondar
         }, className),
         "data-test-id": getDataTestId('footer'),
         children: [
-            Secondary && /*#__PURE__*/ jsx(Secondary, {}),
-            /*#__PURE__*/ jsx(Primary, {})
+            secondary,
+            primary
         ]
     });
 });

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.1",
+    "version": "1.15.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",