@iress-oss/ids-mcp-server 5.15.0 → 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
 
-[](#controlling-toasts)Controlling toasts
------------------------------------------
 
-### [](#using-the-iresstoasterprovider)Using the `IressToasterProvider`
+
+ | \- | Set object |
+
+Controlling toasts
+------------------
+
+### 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,23 +110,45 @@ 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
+
+
 
-### [](#closing-toasts-via-the-provider)Closing toasts via the provider
+ | \- | \- |
+| 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.
 
-Show toast using provider
+[](./iframe.html?id=components-toaster--close)
 
-Hide code
+Show toast using provider
 
-\[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,
   IressToasterProvider,
-  IressToasterProviderProps,
+  type IressToasterProviderProps,
   useToaster,
 } from '@iress-oss/ids-components';
 import { useState } from 'react';
@@ -137,26 +182,48 @@ export const CloseToastViaProvider \= () \=> (
   </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.
 
-[](#examples)Examples
----------------------
+FloatingUIContainer
+
+
+
+ | \- | \- |
+| position | 
+
+The position on the screen where the toast will appear.
+
+union
+
+
+
+ | \- | Set object |
+
+Examples
+--------
 
-### [](#status)Status
+### 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,
@@ -183,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 | 
+
+The position on the screen where the toast will appear.
+
+union
 
-### [](#timeout)Timeout
+
+
+ | \- | 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 \= () \=> {
@@ -223,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,
@@ -247,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';
@@ -300,46 +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.
+
+FloatingUIContainer
 
-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.
 
-\[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;
-}
+
+ | \- | \- |
+| position | 
+
+The position on the screen where the toast will appear.
+
+union
+
+
+
+ | \- | \- |
+
+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\>;
 
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Controlling toasts](#controlling-toasts)
-    *   [Using the IressToasterProvider](#using-the-iresstoasterprovider)
-    *   [Closing toasts via the provider](#closing-toasts-via-the-provider)
-*   [Examples](#examples)
-    *   [Status](#status)
-    *   [Timeout](#timeout)
-    *   [Position](#position)
-*   [Migrating to version 5](#migrating-to-version-5)
-    *   [Adding the provider](#adding-the-provider)
+```