@iress-oss/ids-mcp-server 5.14.2 → 5.20.1

package/generated/docs/{components-toaster-docs.md → components_components-toaster-docs.md}

@@ -1,23 +1,23 @@
-[](#toaster)Toaster
-===================
+Toaster
+=======
 
 Overview
 --------
 
 Toaster provide users with important, time-sensitive information.
 
+[](./iframe.html?id=components-toaster--provider)
+
 `IressToasterProvider` does not change the position on each render, it can only be done on the initial render.
 
 Show toast using provider
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 import {
   IressButton,
   IressToasterProvider,
-  IressToasterProviderProps,
+  type IressToasterProviderProps,
   useToaster,
 } from '@iress-oss/ids-components';
 const ToastWithTrigger \= () \=> {
@@ -41,29 +41,52 @@ export const SimpleToasterExample \= () \=> (
   </IressToasterProvider\>
 );
 
-Copy
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| container | 
+The container element to render the toaster into. By default, the toaster will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | \- |
+| position | 
+
+The position on the screen where the toast will appear.
+
+union
+
+
+
+ | \- | Set object |
 
-[](#controlling-toasts)Controlling toasts
------------------------------------------
+Controlling toasts
+------------------
 
-### [](#using-the-iresstoasterprovider)Using the `IressToasterProvider`
+### Using the `IressToasterProvider`
 
 The recommended way to create toasts is by using the `<IressToasterProvider />` alongside the `useToaster` hook. By using the `success`, `info` and `error` methods from the hook, you can trigger toasts in your application.
 
 To use, wrap your `<App/>` or the component that you want to use the `useToaster` hook with `<IressToasterProvider />`.
 
+[](./iframe.html?id=components-toaster--provider)
+
 `IressToasterProvider` does not change the position on each render, it can only be done on the initial render.
 
 Show toast using provider
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 import {
   IressButton,
   IressToasterProvider,
-  IressToasterProviderProps,
+  type IressToasterProviderProps,
   useToaster,
 } from '@iress-oss/ids-components';
 const ToastWithTrigger \= () \=> {
@@ -87,26 +110,120 @@ export const SimpleToasterExample \= () \=> (
   </IressToasterProvider\>
 );
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| container | 
+The container element to render the toaster into. By default, the toaster will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | \- |
+| position | 
+
+The position on the screen where the toast will appear.
+
+union
+
+
+
+ | \- | Set object |
+
+### Closing toasts via the provider
+
+If you want to dismiss a toast programmatically, you can use the `close` method from the `useToaster` hook. This method takes a toast ID as an argument, which is returned when you create a toast using the `useToaster` hook.
+
+[](./iframe.html?id=components-toaster--close)
+
+Show toast using provider
+
+```
+
+import {
+  IressButton,
+  IressInline,
+  IressToasterProvider,
+  type IressToasterProviderProps,
+  useToaster,
+} from '@iress-oss/ids-components';
+import { useState } from 'react';
+const ToastWithTrigger \= () \=> {
+  const toaster \= useToaster();
+  const \[lastToastId, setLastToastId\] \= useState<string | null\>(null);
+  return (
+    <IressInline gutter\="sm"\>
+      <IressButton        onClick={() \=> {
+          const toastId \= toaster.error({
+            heading: 'Error',
+            children:
+              'Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.',
+            onClose: () \=> {
+              setLastToastId(null);
+            },
+          });
+          setLastToastId(toastId);
+        }}
+      >        Show toast using provider      </IressButton\>
+      {lastToastId && (
+        <IressButton onClick\={() \=> toaster.close(lastToastId)}\>
+          Close the last toast opened        </IressButton\>
+      )}
+    </IressInline\>
+  );
+};
+export const CloseToastViaProvider \= () \=> (
+  <IressToasterProvider \>
+    <ToastWithTrigger />
+  </IressToasterProvider\>
+);
+
+```
 
-[](#examples)Examples
----------------------
+#### Props
 
-### [](#status)Status
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| container | 
+The container element to render the toaster into. By default, the toaster will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | \- |
+| position | 
+
+The position on the screen where the toast will appear.
+
+union
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### Status
 
 The toast offers three status that set a distinctive colour and icon. They can be set using the `status` prop. Their different use cases are described here.
 
-successerrorinfo
+[](./iframe.html?id=components-toaster--statuses)
 
-Hide code
+successerrorinfo
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 import {
   IressButton,
   IressInline,
-  IressToastProps,
-  IressToasterProps,
+  type IressToastProps,
+  type IressToasterProps,
   IressToasterProvider,
   TOAST\_STATUS,
   useToaster,
@@ -133,24 +250,46 @@ export const ToastStatuses \= (args: IressToasterProps) \=> (
   </IressToasterProvider\>
 );
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| container | 
+The container element to render the toaster into. By default, the toaster will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | \- |
+| position | 
 
-### [](#timeout)Timeout
+The position on the screen where the toast will appear.
+
+union
+
+
+
+ | \- | Set object |
+
+### Timeout
 
 By default, toasts will time out after six seconds, after which they will animate out of view. This can be customised using the `timeout` prop when created using the `useToaster` hook.
 
 Timeouts must be set in milliseconds; as an example, if you want a timeout of five seconds, set the timeout to 5000.
 
-1000ms timeout
+[](./iframe.html?id=components-toaster--timeout)
 
-Hide code
+1000ms timeout
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 import {
   IressButton,
   IressToasterProvider,
-  IressToasterProviderProps,
+  type IressToasterProviderProps,
   useToaster,
 } from '@iress-oss/ids-components';
 const ToastWithTrigger \= () \=> {
@@ -173,23 +312,45 @@ export const ToasterTimeout \= () \=> (
   </IressToasterProvider\>
 );
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| container | 
+The container element to render the toaster into. By default, the toaster will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | \- |
+| position | 
 
-### [](#position)Position
+The position on the screen where the toast will appear.
+
+union
+
+
+
+ | \- | Set object |
+
+### Position
 
 By default, the `IressToaster`'s `position` is set to `bottom-end`, but there may be occasions when you need toasts to appear in a different part of the screen. This can be controlled with the `position` prop on the `IressToasterProvider` component, or as the first argument to `useToaster`. There are 6 positions to choose from.
 
 **Note:** The toast position should be consistent across your app. For this reason, the position is set on the `IressToastProvider` or the `useToaster` hook, and not on the individual toasts.
 
+[](./iframe.html?id=components-toaster--position)
+
 top-starttop-centertop-end
 
 Toaster positions
 
 bottom-startbottom-centerbottom-end
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 import {
   IressButton,
@@ -197,10 +358,10 @@ import {
   IressPanel,
   IressStack,
   IressText,
-  IressToasterProps,
+  type IressToasterProps,
   IressToasterProvider,
-  IressToasterProviderProps,
-  IressToastProps,
+  type IressToasterProviderProps,
+  type IressToastProps,
   useToaster,
 } from '@iress-oss/ids-components';
 import { useState } from 'react';
@@ -250,45 +411,37 @@ export const ToasterPositionExamples \= () \=> (
   </IressToasterProvider\>
 );
 
-Copy
+```
 
-[](#migrating-to-version-5)Migrating to version 5
--------------------------------------------------
+#### Props
 
-### [](#adding-the-provider)Adding the provider
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| container | 
+The container element to render the toaster into. By default, the toaster will render at the end of the document body.
 
-For your components to work as previously, you will need to set up the `IressToasterProvider` at the root of your application. This will allow you to use the `useToaster` hook to trigger toasts from anywhere in your application using the status and props of the toast.
+FloatingUIContainer
 
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
 
-const App \= () \=> <IressToasterProvider\>Rest of app here</IressToasterProvider\>;
 
-Copy
+ | \- | \- |
+| position | 
+
+The position on the screen where the toast will appear.
+
+union
+
+
 
-On this page
+ | \- | \- |
+
+Migrating to version 5
+----------------------
+
+### Adding the provider
+
+For your components to work as previously, you will need to set up the `IressToasterProvider` at the root of your application. This will allow you to use the `useToaster` hook to trigger toasts from anywhere in your application using the status and props of the toast.
+
+const App \= () \=> <IressToasterProvider\>Rest of app here</IressToasterProvider\>;
 
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Controlling toasts](#controlling-toasts)
-    *   [Using the IressToasterProvider](#using-the-iresstoasterprovider)
-*   [Examples](#examples)
-    *   [Status](#status)
-    *   [Timeout](#timeout)
-    *   [Position](#position)
-*   [Migrating to version 5](#migrating-to-version-5)
-    *   [Adding the provider](#adding-the-provider)
+```