@muraldevkit/ui-toolkit 2.74.0 → 2.76.0

package/dist/components/notification/MrlBlockNotification/MrlBlockNotification.d.ts

@@ -3,6 +3,7 @@ import { AttrsObject } from '../../../utils';
 import { NotificationKind, NotificationIconConfig, NotificationScope, NotificationState, NotificationLevel } from '../constants';
 import { DSIconType } from '../..';
 import './MrlBlockNotification.global.scss';
+import { useAutoClose } from '../../../hooks/useAutoClose';
 export interface MrlBlockNotificationProps {
     /**
      * Block Notification Wrapper Class
@@ -14,6 +15,10 @@ export interface MrlBlockNotificationProps {
     closeQa?: string;
     /**
      * Children
+     *
+     * IMPORTANT! — Make sure to set shouldAutoClose: false if children of this component
+     * contain interactive elements. Autoclosing interactive elements is an accessibility
+     * anti-pattern and should be avoided.
      */
     children?: ReactNode;
     /**
@@ -73,6 +78,18 @@ export interface MrlBlockNotificationProps {
      * Example usage: html attributes, custom data attributes (data-qa), aria
      */
     attrs?: AttrsObject;
+    /**
+     * When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern) (see useAutoClose)
+     */
+    shouldAutoClose?: Parameters<useAutoClose>[0];
+    /**
+     * Delay in milliseconds before the component closes (see useAutoClose)
+     */
+    autoCloseAfterMs?: Parameters<useAutoClose>[1];
+    /**
+     * Callback to be called when component closes (see useAutoClose)
+     */
+    onAutoClose?: Parameters<useAutoClose>[2];
 }
 /**
  * Block Notification Component

package/dist/components/notification/constants.d.ts

@@ -2,7 +2,7 @@ import { DSIconType } from '../..';
 export declare const allowedValues: {
     kinds: readonly ["info", "success", "warning", "error", "private", "general"];
     levels: readonly ["2", "3", "4", "5", "6"];
-    scopes: readonly ["page", "component"];
+    scopes: readonly ["page", "component", "inline"];
     states: readonly ["open", "close"];
 };
 export type NotificationKind = (typeof allowedValues.kinds)[number];

package/dist/components/svg/config.d.ts

@@ -115,7 +115,7 @@ export declare const colorPictoStoryData: {
 export declare const animateStoryData: {
     args: {
         delay: number;
-        state: "play" | "stop";
+        state: "stop" | "play";
     };
     argTypes: {
         delay: {