feat: Export Spectrum Toast from Components Package (#2294)

Closes #2293
This is needed to implement the deephaven.ui toast component.

Author: dgodinez-dh

package-lock.json

@@ -1,12 +1,13 @@
 import React, { type ReactElement } from 'react';
-import { ContextMenuRoot } from '@deephaven/components';
+import { ContextMenuRoot, ToastContainer } from '@deephaven/components';
 import AppMainContainer from './AppMainContainer';
 
 function App(): ReactElement {
   return (
     <div className="app">
       <AppMainContainer />
       <ContextMenuRoot />
+      <ToastContainer />
     </div>
   );
 }

packages/code-studio/src/main/App.tsx

@@ -7,6 +7,7 @@ import {
   ThemePicker,
   useTheme,
   Flex,
+  ToastContainer,
 } from '@deephaven/components';
 
 import Buttons from './Buttons';
@@ -24,6 +25,7 @@ import Modals from './Modals';
 import Progress from './Progress';
 import TimeSliderInputs from './TimeSliderInputs';
 import Tooltips from './Tooltips';
+import Toast from './Toast';
 import Typograpy from './Typography';
 import './StyleGuide.scss';
 import DraggableLists from './DraggableLists';
@@ -125,6 +127,7 @@ function StyleGuide(): React.ReactElement {
         <ContextMenus />
         <DropdownMenus />
         <Navigations />
+        <Toast />
         <Tooltips />
         <Icons />
         <Editors />
@@ -140,6 +143,7 @@ function StyleGuide(): React.ReactElement {
 
         <SampleMenuCategory data-menu-category="Spectrum Comparison" />
         <SpectrumComparison />
+        <ToastContainer />
       </div>
     </div>
   );

packages/code-studio/src/styleguide/StyleGuide.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button, ButtonGroup, ToastQueue } from '@deephaven/components';
+import SampleSection from './SampleSection';
+
+function Toast(): React.ReactElement {
+  return (
+    <SampleSection name="toast">
+      <h2 className="ui-title">Toast</h2>
+      <div>
+        <ButtonGroup>
+          <Button
+            kind="tertiary"
+            onClick={() =>
+              ToastQueue.neutral('Neutral toast', { timeout: 5000 })
+            }
+          >
+            Show neutral toast
+          </Button>
+          <Button
+            kind="success"
+            onClick={() =>
+              ToastQueue.positive('Positive toast', { timeout: 5000 })
+            }
+          >
+            Show positive toast
+          </Button>
+          <Button
+            kind="danger"
+            onClick={() =>
+              ToastQueue.negative('Negative toast', { timeout: 5000 })
+            }
+          >
+            Show negative toast
+          </Button>
+          <Button
+            kind="primary"
+            onClick={() => ToastQueue.info('Info toast', { timeout: 5000 })}
+          >
+            Show info toast
+          </Button>
+        </ButtonGroup>
+      </div>
+    </SampleSection>
+  );
+}
+
+export default Toast;

packages/code-studio/src/styleguide/Toast.tsx

@@ -33,6 +33,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@internationalized/date": "^3.5.5",
     "@react-spectrum/theme-default": "^3.5.1",
+    "@react-spectrum/toast": "^3.0.0-beta.16",
     "@react-spectrum/utils": "^3.11.5",
     "@react-types/radio": "^3.8.1",
     "@react-types/shared": "^3.22.1",

packages/components/package.json

@@ -14,3 +14,10 @@ export {
   StatusLight,
   type SpectrumStatusLightProps as StatusLightProps,
 } from '@adobe/react-spectrum';
+
+export {
+  ToastContainer,
+  type SpectrumToastContainerProps as ToastContainerProps,
+  ToastQueue,
+  type SpectrumToastOptions as ToastOptions,
+} from '@react-spectrum/toast';

packages/components/src/spectrum/status.ts

@@ -17,6 +17,7 @@ import {
   LoadingOverlay,
   Shortcut,
   ShortcutRegistry,
+  ToastContainer,
 } from '@deephaven/components'; // Use the loading spinner from the Deephaven components package
 import type { dh } from '@deephaven/jsapi-types';
 import { fetchVariableDefinition } from '@deephaven/jsapi-utils';
@@ -241,6 +242,7 @@ function App(): JSX.Element {
         />
       )}
       <ContextMenuRoot />
+      <ToastContainer />
     </div>
   );
 }

packages/embed-widget/src/App.tsx

@@ -27,6 +27,7 @@ const sampleSectionIds: string[] = [
   'sample-section-navigations',
   'sample-section-list-views',
   'sample-section-pickers',
+  'sample-section-toast',
   'sample-section-tooltips',
   'sample-section-icons',
   'sample-section-editors',