@pushwoosh/dumb-components 2.9.1 → 2.9.3

package/Toast/Toast.js

@@ -59,8 +59,8 @@ export function Toast(props) {
     onButtonClick
   } = toast;
   return createPortal(_jsxs(RootBox, {
-    open: open,
-    type: type,
+    "$open": open,
+    "$type": type,
     "$hasButton": !!(buttonText && onButtonClick),
     children: [_jsx(IconBox, {
       children: getIconByType(type)

package/Toast/__tests__/Toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/Toast/__tests__/Toast.test.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { Toast } from '../Toast';
+describe('Toast', () => {
+  it('slides in when open and keeps `open`/`type` off the DOM', () => {
+    render(_jsx(Toast, {
+      open: true,
+      toast: {
+        title: 'Saved',
+        type: 'success',
+        duration: false
+      },
+      onClose: jest.fn()
+    }));
+    const root = screen.getByText('Saved').closest('div[class]')?.parentElement;
+    expect(root).not.toHaveAttribute('open');
+    expect(root).not.toHaveAttribute('type');
+    expect(getComputedStyle(root).top).toBe('50px');
+  });
+});

package/Toast/styles.d.ts

@@ -1,7 +1,7 @@
 import type { ToastType } from './types';
 export declare const RootBox: import("styled-components").StyledComponent<"div", any, {
-    open: boolean;
-    type: ToastType;
+    $open: boolean;
+    $type: ToastType;
     $hasButton?: boolean;
 }, never>;
 export declare const IconBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Toast/styles.js

@@ -7,10 +7,10 @@ export const RootBox = styled.div.withConfig({
 })(["position:fixed;display:grid;grid-template-columns:", ";align-items:center;width:380px;top:", ";left:50%;transform:translateX(-50%);color:", ";padding:16px 0 16px;border-radius:", ";border:1px solid ", ";background:", ";box-shadow:", ";transition:top 250ms;z-index:999999999;"], ({
   $hasButton
 }) => $hasButton ? '56px 1fr auto auto' : '56px 1fr auto', ({
-  open
-}) => open ? '50px' : '-250px', Color.MAIN, ShapeRadius.DIALOG, ({
-  type
-}) => TypeColorMap[type], Color.CLEAR, Shadow.LARGE);
+  $open
+}) => $open ? '50px' : '-250px', Color.MAIN, ShapeRadius.DIALOG, ({
+  $type
+}) => TypeColorMap[$type], Color.CLEAR, Shadow.LARGE);
 export const IconBox = styled.div.withConfig({
   displayName: "IconBox",
   componentId: "sc-8jll5u-1"

package/hooks/useOnClickOutside.d.ts

@@ -1,5 +1,5 @@
 import { type RefObject } from 'react';
-type Ref = RefObject<HTMLElement> | RefObject<HTMLElement>[];
+type Ref = RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[];
 /**
  * Calls `handler` on a mousedown/touchstart outside the referenced element(s).
  * Pass a single ref or an array of refs to treat several elements as "inside".

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.9.1",
+  "version": "2.9.3",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -43,7 +43,7 @@
     "@pushwoosh/kit-constants": "^2.1.0",
     "@pushwoosh/kit-helpers": "^4.12.7",
     "@pushwoosh/kit-icons": "^2.3.3",
-    "@pushwoosh/kit-typography": "^1.8.5",
+    "@pushwoosh/kit-typography": "^1.8.6",
     "@tippyjs/react": "^4.2.6",
     "@uiw/codemirror-themes": "^4.23.8",
     "@uiw/react-codemirror": "^4.23.8",