@pushwoosh/dumb-components 1.1.68 → 1.1.70

package/Select/styles.js

@@ -2,15 +2,15 @@ import ReactSelect from 'react-select';
 import ReactSelectAsync from 'react-select/async';
 import ReactSelectCreatable from 'react-select/creatable';
 import styled, { css } from 'styled-components';
-import { Color, Spacing, FontSize, LineHeight, UnitSize } from '@pushwoosh/kit-constants';
+import { Color, FontSize, LineHeight, UnitSize } from '@pushwoosh/kit-constants';
 import { CLASS_NAME_PREFIX } from './constants';
-const selectStyles = css([".", "__control{width:", ";min-width:", ";height:auto;min-height:", ";font-size:", ";line-height:", ";color:", ";background-color:", ";border:", ";box-sizing:border-box;}.", "__indicator{display:flex;align-items:center;justify-content:center;padding:", " ", ";}.", "__menu{width:", ";min-width:", ";font-size:", ";line-height:", ";}.", "__indicator-separator{display:none;}.", "__control--is-focused{border:1px solid ", ";box-shadow:none;}.", "__control--is-disabled{background-color:", ";}.", "__control:hover{border:", ";}.", "__control--is-focused:hover{border:1px solid ", ";box-shadow:none;}.", "__placeholder{display:flex;width:100%;color:", ";white-space:nowrap;text-overflow:clip;}.", "__multi-value{background:", ";}.", "__multi-value__label{color:", ";}.", "__multi-value__remove{color:", ";}.", "__multi-value__remove:hover{color:", ";background:", ";}"], CLASS_NAME_PREFIX, ({
+const selectStyles = css([".", "__control{width:", ";min-width:", ";height:auto;min-height:", ";font-size:", ";line-height:", ";color:", ";background-color:", ";border:", ";box-sizing:border-box;}.", "__indicator{display:flex;align-items:center;justify-content:center;padding:6px 8px;}.", "__menu{width:", ";min-width:", ";font-size:", ";line-height:", ";}.", "__indicator-separator{display:none;}.", "__control--is-focused{border:1px solid ", ";box-shadow:none;}.", "__control--is-disabled{background-color:", ";}.", "__control:hover{border:", ";}.", "__control--is-focused:hover{border:1px solid ", ";box-shadow:none;}.", "__placeholder{display:flex;width:100%;color:", ";white-space:nowrap;text-overflow:clip;}.", "__multi-value{background:", ";}.", "__multi-value__label{color:", ";}.", "__multi-value__remove{color:", ";}.", "__multi-value__remove:hover{color:", ";background:", ";}"], CLASS_NAME_PREFIX, ({
   width
 }) => width || '100%', ({
   width
 }) => width || '150px', UnitSize.FIELD_HEIGHT, FontSize.REGULAR, LineHeight.REGULAR, Color.MAIN, Color.CLEAR, ({
   $isErrored
-}) => $isErrored ? `1px solid ${Color.DANGER}` : `1px solid ${Color.FORM}`, CLASS_NAME_PREFIX, Spacing.S2, Spacing.S3, CLASS_NAME_PREFIX, ({
+}) => $isErrored ? `1px solid ${Color.DANGER}` : `1px solid ${Color.FORM}`, CLASS_NAME_PREFIX, CLASS_NAME_PREFIX, ({
   width
 }) => width || '100%', ({
   width

package/Toast/Toast.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import { InfoRoundIcon, CheckRoundIcon, WarningRoundIcon, DangerTriangleIcon, CloseIcon } from '@pushwoosh/kit-icons';
 import { H4, Paragraph } from '@pushwoosh/kit-typography';
+import { Button } from '../Button';
 import { TypeColorMap } from './constants';
-import { RootBox, IconBox, ContentBox, CloseBox } from './styles';
+import { RootBox, IconBox, ContentBox, ButtonBox, CloseBox } from './styles';
 function getIconByType(type) {
   switch (type) {
     case 'info':
@@ -49,12 +50,19 @@ export function Toast(props) {
     title,
     description,
     type,
-    additionalContent
+    buttonText,
+    onButtonClick
   } = toast;
   return createPortal(React.createElement(RootBox, {
     open: open,
-    type: type
-  }, React.createElement(IconBox, null, getIconByType(type)), React.createElement(ContentBox, null, React.createElement(H4, null, title), description && React.createElement(Paragraph, null, description), additionalContent && React.createElement("div", null, additionalContent)), React.createElement(CloseBox, {
+    type: type,
+    "$hasButton": !!(buttonText && onButtonClick)
+  }, React.createElement(IconBox, null, getIconByType(type)), React.createElement(ContentBox, null, React.createElement(H4, null, title), description && React.createElement(Paragraph, null, description)), buttonText && onButtonClick && React.createElement(ButtonBox, null, React.createElement(Button, {
+    view: "ghost",
+    size: "compact",
+    color: "primary",
+    onClick: onButtonClick
+  }, buttonText)), React.createElement(CloseBox, {
     onClick: onClose
   }, React.createElement(CloseIcon, {
     size: "medium"

package/Toast/ToastProvider.js

@@ -19,7 +19,8 @@ export const ToastProvider = ({
     description = '',
     duration = DEFAULT_DURATION,
     type = 'info',
-    additionalContent = null
+    buttonText = '',
+    onButtonClick
   }) => {
     setOpen(true);
     setToast({
@@ -27,9 +28,12 @@ export const ToastProvider = ({
       description,
       duration,
       type,
-      additionalContent
+      buttonText,
+      onButtonClick
     });
-    setTimeout(closeToast, duration);
+    if (typeof duration === 'number') {
+      setTimeout(closeToast, duration);
+    }
   }, [closeToast]);
   const contextValue = useMemo(() => ({
     openToast,

package/Toast/ai-documentation.md

@@ -21,9 +21,8 @@ export type ToastType = 'info' | 'success' | 'warning' | 'error';
 export type ToastParams = {
   title: string;
   description?: string;
-  duration: number;
+  duration: number | false;
   type: ToastType;
-  additionalContent?: ReactNode;
 };
 
 export type OpenToastParams = {
@@ -31,7 +30,6 @@ export type OpenToastParams = {
   description?: string;
   duration?: number;
   type?: ToastType;
-  additionalContent?: ReactNode;
 };
 
 export interface ToastContextProps {
@@ -115,12 +113,6 @@ function ComponentWithCustomToast() {
       title: 'Custom Toast',
       description: 'This toast has additional content.',
       type: 'info',
-      additionalContent: (
-        <div style={{ marginTop: 8 }}>
-          <button>Action 1</button>
-          <button>Action 2</button>
-        </div>
-      ),
     });
   };
 
@@ -151,7 +143,6 @@ function ComponentWithCustomToast() {
 | description | string | No | - | Optional description text |
 | duration | number | No | 3000 | Toast display duration in milliseconds |
 | type | ToastType | No | 'info' | Toast type affecting icon and color |
-| additionalContent | ReactNode | No | - | Custom content to display below description |
 
 ### Toast Types
 
@@ -209,7 +200,6 @@ When working with the Toast component:
 3. **Error Handling**: The hook throws an error if used outside of provider context
 4. **Duration Management**: Consider appropriate duration based on toast importance and content length
 5. **Type Selection**: Choose appropriate toast type based on user action outcome
-6. **Custom Content**: Use additionalContent for action buttons or extra information
 7. **Accessibility**: Toast messages should be descriptive for screen readers
 8. **Portal Rendering**: Remember that toasts render to document.body, not inline
 9. **Single Instance**: Only one toast displays at a time; new toasts replace current ones
@@ -227,4 +217,4 @@ When working with the Toast component:
 - Use descriptions for additional context
 - Choose appropriate durations (3s for success, 5s+ for errors)
 - Provide manual close for critical messages
-- Test toast behavior in different viewport sizes
+- Test toast behavior in different viewport sizes

package/Toast/styles.d.ts

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

package/Toast/styles.js

@@ -1,23 +1,29 @@
 import styled from 'styled-components';
-import { Color, Spacing, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
 import { TypeColorMap } from './constants';
 export const RootBox = styled.div.withConfig({
   displayName: "RootBox",
   componentId: "sc-8jll5u-0"
-})(["position:fixed;display:flex;align-items:flex-start;width:380px;top:", ";left:50%;transform:translateX(-50%);color:", ";padding:", " 0 ", ";border-radius:", ";border:1px solid ", ";background:", ";box-shadow:", ";transition:top 250ms;z-index:999999999;"], ({
+})(["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, Spacing.S5, Spacing.S5, ShapeRadius.DIALOG, ({
+}) => 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"
-})(["display:flex;align-items:center;justify-content:center;width:56px;height:100%;padding:0 ", ";box-sizing:border-box;"], Spacing.S5);
+})(["display:flex;align-items:center;justify-content:center;width:56px;height:100%;padding:0 16px;box-sizing:border-box;"]);
 export const ContentBox = styled.div.withConfig({
   displayName: "ContentBox",
   componentId: "sc-8jll5u-2"
-})(["display:flex;flex-direction:column;justify-content:center;width:100%;min-height:24px;flex-grow:1;gap:", ";"], Spacing.S0);
+})(["display:flex;flex-direction:column;justify-content:center;width:100%;min-height:24px;flex:1 1 auto;gap:2px;"]);
+export const ButtonBox = styled.div.withConfig({
+  displayName: "ButtonBox",
+  componentId: "sc-8jll5u-3"
+})(["display:flex;align-items:center;max-width:120px;box-sizing:border-box;"]);
 export const CloseBox = styled.div.withConfig({
   displayName: "CloseBox",
-  componentId: "sc-8jll5u-3"
-})(["display:flex;padding:0 14px;cursor:pointer;"]);
+  componentId: "sc-8jll5u-4"
+})(["display:flex;padding:0 14px 0 6px;cursor:pointer;"]);

package/Toast/types.d.ts

@@ -3,16 +3,18 @@ export type ToastType = 'info' | 'success' | 'warning' | 'error';
 export type ToastParams = {
     title: string;
     description?: string;
-    duration: number;
+    duration: number | false;
     type: ToastType;
-    additionalContent?: ReactNode;
+    buttonText?: string;
+    onButtonClick?: () => void;
 };
 export type OpenToastParams = {
     title: string;
     description?: string;
-    duration?: number;
+    duration?: number | false;
     type?: ToastType;
-    additionalContent?: ReactNode;
+    buttonText?: string;
+    onButtonClick?: () => void;
 };
 export interface ToastContextProps {
     openToast: (params: OpenToastParams) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.68",
+  "version": "1.1.70",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",