@dt-dds/react-toast 1.0.0-beta.72 → 1.0.0-beta.74

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @dt-ui/react-toast
 
+## 1.0.0-beta.74
+
+### Patch Changes
+
+- @dt-dds/react-button@1.0.0-beta.57
+
+## 1.0.0-beta.73
+
+### Minor Changes
+
+- feat: pass children instead of actions
+
+### Patch Changes
+
+- @dt-dds/react-button@1.0.0-beta.56
+
 ## 1.0.0-beta.72
 
 ### Minor Changes

package/README.md

@@ -12,6 +12,12 @@ const notify = () =>
     title: 'success',
     message: 'myMEssage' + count,
     type: ToastType.Success,
+    children: (
+      <Tooltip>
+        <Button onClick={() => console.log('clicked')}>Action 2</Button>
+        <Tooltip.Content>Some tooltip</Tooltip.Content>
+      </Tooltip>
+    ),
   });
 
 const App = () => {
@@ -116,14 +122,14 @@ const MyComponent = () => {
 
 ### Toaster
 
-| Property             | Type                  | Default   | Description                                                                                                             |
-| -------------------- | :-------------------- | :-------- | :---------------------------------------------------------------------------------------------------------------------- |
-| `toastOptions`       | `DefaultToastOptions` | -         | These will act as default options for all toasts. See the documentation [here](https://react-hot-toast.com/docs/toast). |
-| `reverseOrder`       | `boolean`             | -         | Toasts spawn at top by default. Set to true if you want new toasts at the end.                                          |
-| `gutter`             | `number`              | 8         | Changes the gap between each toast.                                                                                     |
-| `containerStyle`     | `React.CSSProperties` | -         | Customize the style of toaster div. This can be used to change the offset of all toasts                                 |
-| `containerClassName` | `string`              | undefined | Add a custom CSS class name to toaster div.                                                                             |
-| `actions`            | `Action`              | -         | An array of 2 actions                                                                                                   |
+| Property             | Type                            | Default   | Description                                                                                                                                                                                                                                                                                                                        |
+| -------------------- | :------------------------------ | :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `toastOptions`       | `DefaultToastOptions`           | -         | These will act as default options for all toasts. See the documentation [here](https://react-hot-toast.com/docs/toast).                                                                                                                                                                                                            |
+| `reverseOrder`       | `boolean`                       | -         | Toasts spawn at top by default. Set to true if you want new toasts at the end.                                                                                                                                                                                                                                                     |
+| `gutter`             | `number`                        | 8         | Changes the gap between each toast.                                                                                                                                                                                                                                                                                                |
+| `containerStyle`     | `React.CSSProperties`           | -         | Customize the style of toaster div. This can be used to change the offset of all toasts                                                                                                                                                                                                                                            |
+| `containerClassName` | `string`                        | undefined | Add a custom CSS class name to toaster div.                                                                                                                                                                                                                                                                                        |
+| `children`           | `(toast: Toast) => JSX.Element` | -         | You can customize how each toast is displayed by passing your own render function to the Toaster as its children. This function will be called for every toast, allowing you to render any component based on the toast’s state. Note: If the rendered component is a button, its styles will be overridden by the default styles. |
 
 ### emitToast
 
@@ -133,7 +139,7 @@ const MyComponent = () => {
 | `title`       | `string`          | -       | The title to be displayed                                                 |
 | `message`     | `string`          | -       | The message to be displayed                                               |
 | `dismissable` | `boolean`         | true    | Sets the visibility of a close button that will fire the onClose callback |
-| `actions`     | `Action`          | -       | List of 2 actions that will be rendered on the bottom                     |
+| `children`    | `ReactNode`       | -       | A child that will be rendered at the end of the content section           |
 
 The emitToast extends from ToastOptions. They will overwrite all options received from `<Toaster />`. For example:
 

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import { CustomTheme } from '@dt-dds/themes';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BaseProps } from '@dt-dds/react-core';
-import { TooltipBackground } from '@dt-dds/react-tooltip';
+import { ReactNode } from 'react';
 import { ToasterProps, ToastOptions } from 'react-hot-toast';
 
 declare enum ToastPosition {
@@ -19,15 +19,6 @@ declare enum ToastType {
     Warning = "warning"
 }
 
-interface Action extends Pick<BaseProps, 'dataTestId'> {
-    onClick: () => void;
-    label: string;
-    tooltip?: {
-        message: string;
-        background?: TooltipBackground;
-    };
-}
-
 interface ToastProps extends Pick<BaseProps, 'dataTestId'> {
     id: string;
     type: ToastType;
@@ -36,19 +27,19 @@ interface ToastProps extends Pick<BaseProps, 'dataTestId'> {
     onClose: () => void;
     isVisible?: boolean;
     dismissible?: boolean;
-    actions?: [Action] | [Action, Action];
+    children?: ReactNode;
 }
-declare const Toast: ({ id, dataTestId, title, message, onClose, type, isVisible, dismissible, actions, }: ToastProps) => react_jsx_runtime.JSX.Element;
+declare const Toast: ({ id, dataTestId, title, message, onClose, type, isVisible, dismissible, children, }: ToastProps) => react_jsx_runtime.JSX.Element;
 
 interface EmitToastProps extends ToastOptions {
     type: ToastType;
     title: string;
     message: string;
-    actions?: [Action] | [Action, Action];
+    children?: ReactNode;
     dismissible?: boolean;
 }
 declare const dismissToast: (id: string) => void;
-declare const emitToast: ({ type, title, message, actions, dismissible, ...props }: EmitToastProps) => void;
+declare const emitToast: ({ type, title, message, children, dismissible, ...props }: EmitToastProps) => void;
 declare const Toaster: ({ gutter, ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
 
 declare module '@emotion/react' {

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { CustomTheme } from '@dt-dds/themes';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BaseProps } from '@dt-dds/react-core';
-import { TooltipBackground } from '@dt-dds/react-tooltip';
+import { ReactNode } from 'react';
 import { ToasterProps, ToastOptions } from 'react-hot-toast';
 
 declare enum ToastPosition {
@@ -19,15 +19,6 @@ declare enum ToastType {
     Warning = "warning"
 }
 
-interface Action extends Pick<BaseProps, 'dataTestId'> {
-    onClick: () => void;
-    label: string;
-    tooltip?: {
-        message: string;
-        background?: TooltipBackground;
-    };
-}
-
 interface ToastProps extends Pick<BaseProps, 'dataTestId'> {
     id: string;
     type: ToastType;
@@ -36,19 +27,19 @@ interface ToastProps extends Pick<BaseProps, 'dataTestId'> {
     onClose: () => void;
     isVisible?: boolean;
     dismissible?: boolean;
-    actions?: [Action] | [Action, Action];
+    children?: ReactNode;
 }
-declare const Toast: ({ id, dataTestId, title, message, onClose, type, isVisible, dismissible, actions, }: ToastProps) => react_jsx_runtime.JSX.Element;
+declare const Toast: ({ id, dataTestId, title, message, onClose, type, isVisible, dismissible, children, }: ToastProps) => react_jsx_runtime.JSX.Element;
 
 interface EmitToastProps extends ToastOptions {
     type: ToastType;
     title: string;
     message: string;
-    actions?: [Action] | [Action, Action];
+    children?: ReactNode;
     dismissible?: boolean;
 }
 declare const dismissToast: (id: string) => void;
-declare const emitToast: ({ type, title, message, actions, dismissible, ...props }: EmitToastProps) => void;
+declare const emitToast: ({ type, title, message, children, dismissible, ...props }: EmitToastProps) => void;
 declare const Toaster: ({ gutter, ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
 
 declare module '@emotion/react' {

package/dist/index.js

@@ -128,10 +128,8 @@ module.exports = __toCommonJS(index_exports);
 // src/Toast.tsx
 var import_react_box = __toESM(require_dist());
 var import_react_icon = require("@dt-dds/react-icon");
-var import_react_tooltip = require("@dt-dds/react-tooltip");
 var import_react_typography = require("@dt-dds/react-typography");
 var import_react2 = require("@emotion/react");
-var import_react3 = __toESM(require("react"));
 
 // src/constants/enums.ts
 var ToastPosition = /* @__PURE__ */ ((ToastPosition2) => {
@@ -152,7 +150,6 @@ var ToastType = /* @__PURE__ */ ((ToastType2) => {
 })(ToastType || {});
 
 // src/Toast.styled.ts
-var import_react_button = require("@dt-dds/react-button");
 var import_react = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"));
 var fadeIn = import_react.keyframes`
@@ -206,13 +203,21 @@ var ToastButtonCloseStyled = import_styled.default.button`
     
   `}
 `;
-var ActionButtonStyled = (0, import_styled.default)(import_react_button.Button)`
+var ActionsContainer = import_styled.default.div`
   ${({ theme, toastType }) => `
-    color: ${theme.palette[toastType].dark};
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: ${theme.spacing.spacing_20};
+    margin-top: ${theme.spacing.spacing_30};
 
-    &:hover {
-      background-color: ${theme.palette[toastType].medium};
+    button {
       color: ${theme.palette[toastType].dark};
+      
+      &:hover {
+        background-color: ${theme.palette[toastType].medium};
+        color: ${theme.palette[toastType].dark};
+      }
     }
 `}
 `;
@@ -234,7 +239,7 @@ var Toast = ({
   type,
   isVisible = true,
   dismissible = true,
-  actions
+  children
 }) => {
   const dataTest = dataTestId != null ? dataTestId : `toast-${id}`;
   const theme = (0, import_react2.useTheme)();
@@ -262,9 +267,6 @@ var Toast = ({
                   color: `${type}.dark`,
                   element: "span",
                   fontStyles: "bodyLgBold",
-                  style: {
-                    textTransform: "capitalize"
-                  },
                   children: title
                 }
               ),
@@ -281,36 +283,7 @@ var Toast = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastMessageStyled, { toastType: type, children: message }),
-        actions && (actions == null ? void 0 : actions.length) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react_box.Box,
-          {
-            style: {
-              flexDirection: "row",
-              justifyContent: "flex-end",
-              gap: theme.spacing.spacing_20,
-              marginTop: theme.spacing.spacing_30
-            },
-            children: actions.map(({ label, onClick, dataTestId: dataTestId2, tooltip }, index) => {
-              var _a;
-              if (index > 1) return null;
-              const actionButtonElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                ActionButtonStyled,
-                {
-                  "data-testid": dataTestId2,
-                  onClick,
-                  size: "small",
-                  toastType: type,
-                  variant: "text",
-                  children: label
-                }
-              );
-              return (tooltip == null ? void 0 : tooltip.message) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_tooltip.Tooltip, { children: [
-                actionButtonElement,
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_tooltip.Tooltip.Content, { background: (_a = tooltip == null ? void 0 : tooltip.background) != null ? _a : "full", children: tooltip == null ? void 0 : tooltip.message })
-              ] }, label) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.default.Fragment, { children: actionButtonElement }, label);
-            })
-          }
-        ) : null
+        Boolean(children) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContainer, { toastType: type, children }) : null
       ]
     },
     id
@@ -319,8 +292,10 @@ var Toast = ({
 var Toast_default = Toast;
 
 // src/Toaster.tsx
+var import_react_button = require("@dt-dds/react-button");
 var import_react_core = require("@dt-dds/react-core");
-var import_react4 = require("@emotion/react");
+var import_react3 = require("@emotion/react");
+var import_react4 = __toESM(require("react"));
 var import_react_hot_toast = require("react-hot-toast");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TOAST_DEFAULT_DURATION = 4e3;
@@ -330,18 +305,39 @@ var defaultPosition = "bottom-right" /* BottomRight */;
 var dismissToast = (id) => {
   import_react_hot_toast.toast.dismiss(id);
 };
+var processChildren = (children) => {
+  return import_react4.default.Children.map(children, (child) => {
+    if (!import_react4.default.isValidElement(child)) {
+      return child;
+    }
+    if (child.type === import_react_button.Button) {
+      return import_react4.default.cloneElement(child, __spreadProps(__spreadValues({}, child.props), {
+        size: "small",
+        variant: "text"
+      }));
+    }
+    if (child.props.children) {
+      return import_react4.default.cloneElement(
+        child,
+        __spreadValues({}, child.props),
+        processChildren(child.props.children)
+      );
+    }
+    return child;
+  });
+};
 var emitToast = (_a) => {
   var _b = _a, {
     type,
     title,
     message,
-    actions,
+    children,
     dismissible
   } = _b, props = __objRest(_b, [
     "type",
     "title",
     "message",
-    "actions",
+    "children",
     "dismissible"
   ]);
   const duration = type === "error" /* Error */ ? TOAST_ERROR_DURATION : TOAST_DEFAULT_DURATION;
@@ -350,14 +346,14 @@ var emitToast = (_a) => {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         Toast_default,
         {
-          actions,
           dismissible,
           id: t.id,
           isVisible: t.visible,
           message,
           onClose: () => import_react_hot_toast.toast.dismiss(t.id),
           title,
-          type
+          type,
+          children: processChildren(children)
         }
       );
     },
@@ -368,7 +364,7 @@ var emitToast = (_a) => {
 };
 var Toaster = (_a) => {
   var _b = _a, { gutter = 8 } = _b, props = __objRest(_b, ["gutter"]);
-  const theme = (0, import_react4.useTheme)();
+  const theme = (0, import_react3.useTheme)();
   const small = (0, import_react_core.useMedia)(`(max-width: ${theme.breakpoints.mq2}px)`);
   const position = small ? smallPosition : defaultPosition;
   const margin = small ? 8 : 16;

package/dist/index.mjs

@@ -116,10 +116,8 @@ var require_dist = __commonJS({
 // src/Toast.tsx
 var import_react_box = __toESM(require_dist());
 import { Icon } from "@dt-dds/react-icon";
-import { Tooltip } from "@dt-dds/react-tooltip";
 import { Typography } from "@dt-dds/react-typography";
 import { useTheme } from "@emotion/react";
-import React from "react";
 
 // src/constants/enums.ts
 var ToastPosition = /* @__PURE__ */ ((ToastPosition2) => {
@@ -140,7 +138,6 @@ var ToastType = /* @__PURE__ */ ((ToastType2) => {
 })(ToastType || {});
 
 // src/Toast.styled.ts
-import { Button } from "@dt-dds/react-button";
 import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 var fadeIn = keyframes`
@@ -194,13 +191,21 @@ var ToastButtonCloseStyled = styled.button`
     
   `}
 `;
-var ActionButtonStyled = styled(Button)`
+var ActionsContainer = styled.div`
   ${({ theme, toastType }) => `
-    color: ${theme.palette[toastType].dark};
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: ${theme.spacing.spacing_20};
+    margin-top: ${theme.spacing.spacing_30};
 
-    &:hover {
-      background-color: ${theme.palette[toastType].medium};
+    button {
       color: ${theme.palette[toastType].dark};
+      
+      &:hover {
+        background-color: ${theme.palette[toastType].medium};
+        color: ${theme.palette[toastType].dark};
+      }
     }
 `}
 `;
@@ -222,7 +227,7 @@ var Toast = ({
   type,
   isVisible = true,
   dismissible = true,
-  actions
+  children
 }) => {
   const dataTest = dataTestId != null ? dataTestId : `toast-${id}`;
   const theme = useTheme();
@@ -250,9 +255,6 @@ var Toast = ({
                   color: `${type}.dark`,
                   element: "span",
                   fontStyles: "bodyLgBold",
-                  style: {
-                    textTransform: "capitalize"
-                  },
                   children: title
                 }
               ),
@@ -269,36 +271,7 @@ var Toast = ({
           }
         ),
         /* @__PURE__ */ jsx(ToastMessageStyled, { toastType: type, children: message }),
-        actions && (actions == null ? void 0 : actions.length) > 0 ? /* @__PURE__ */ jsx(
-          import_react_box.Box,
-          {
-            style: {
-              flexDirection: "row",
-              justifyContent: "flex-end",
-              gap: theme.spacing.spacing_20,
-              marginTop: theme.spacing.spacing_30
-            },
-            children: actions.map(({ label, onClick, dataTestId: dataTestId2, tooltip }, index) => {
-              var _a;
-              if (index > 1) return null;
-              const actionButtonElement = /* @__PURE__ */ jsx(
-                ActionButtonStyled,
-                {
-                  "data-testid": dataTestId2,
-                  onClick,
-                  size: "small",
-                  toastType: type,
-                  variant: "text",
-                  children: label
-                }
-              );
-              return (tooltip == null ? void 0 : tooltip.message) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
-                actionButtonElement,
-                /* @__PURE__ */ jsx(Tooltip.Content, { background: (_a = tooltip == null ? void 0 : tooltip.background) != null ? _a : "full", children: tooltip == null ? void 0 : tooltip.message })
-              ] }, label) : /* @__PURE__ */ jsx(React.Fragment, { children: actionButtonElement }, label);
-            })
-          }
-        ) : null
+        Boolean(children) ? /* @__PURE__ */ jsx(ActionsContainer, { toastType: type, children }) : null
       ]
     },
     id
@@ -307,8 +280,10 @@ var Toast = ({
 var Toast_default = Toast;
 
 // src/Toaster.tsx
+import { Button } from "@dt-dds/react-button";
 import { TOAST_Z_INDEX, useMedia } from "@dt-dds/react-core";
 import { useTheme as useTheme2 } from "@emotion/react";
+import React from "react";
 import {
   toast,
   Toaster as ToastProvider
@@ -321,18 +296,39 @@ var defaultPosition = "bottom-right" /* BottomRight */;
 var dismissToast = (id) => {
   toast.dismiss(id);
 };
+var processChildren = (children) => {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child;
+    }
+    if (child.type === Button) {
+      return React.cloneElement(child, __spreadProps(__spreadValues({}, child.props), {
+        size: "small",
+        variant: "text"
+      }));
+    }
+    if (child.props.children) {
+      return React.cloneElement(
+        child,
+        __spreadValues({}, child.props),
+        processChildren(child.props.children)
+      );
+    }
+    return child;
+  });
+};
 var emitToast = (_a) => {
   var _b = _a, {
     type,
     title,
     message,
-    actions,
+    children,
     dismissible
   } = _b, props = __objRest(_b, [
     "type",
     "title",
     "message",
-    "actions",
+    "children",
     "dismissible"
   ]);
   const duration = type === "error" /* Error */ ? TOAST_ERROR_DURATION : TOAST_DEFAULT_DURATION;
@@ -341,14 +337,14 @@ var emitToast = (_a) => {
       return /* @__PURE__ */ jsx2(
         Toast_default,
         {
-          actions,
           dismissible,
           id: t.id,
           isVisible: t.visible,
           message,
           onClose: () => toast.dismiss(t.id),
           title,
-          type
+          type,
+          children: processChildren(children)
         }
       );
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-toast",
-  "version": "1.0.0-beta.72",
+  "version": "1.0.0-beta.74",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,10 +20,9 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-button": "1.0.0-beta.55",
+    "@dt-dds/react-button": "1.0.0-beta.57",
     "@dt-dds/react-core": "1.0.0-beta.49",
     "@dt-dds/react-icon": "1.0.0-beta.50",
-    "@dt-dds/react-tooltip": "1.0.0-beta.57",
     "@dt-dds/react-typography": "1.0.0-beta.40",
     "@dt-dds/themes": "1.0.0-beta.8",
     "react-hot-toast": "^2.3.0"