@transferwise/components 0.0.0-experimental-bf3b43b → 0.0.0-experimental-cbc00a7

package/src/Snackbar/SnackbarProvider.test.tsx

@@ -0,0 +1,289 @@
+import { renderHook } from '@testing-library/react';
+
+import { act, mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import { resetLiveRegionAnnouncementQueue } from '../common/LiveRegion/LiveRegion';
+
+import { SNACKBAR_ENTER_DURATION, SNACKBAR_EXIT_DURATION } from './constants';
+import type { SnackbarCreationProps } from './Snackbar.types';
+import SnackbarProvider from './SnackbarProvider';
+import useSnackbar from './useSnackbar';
+import useSnackbarManager from './useSnackbarManager';
+
+const TIMEOUT = 4500;
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
+mockMatchMedia();
+
+const advanceTimers = (duration: number) => {
+  act(() => jest.advanceTimersByTime(duration));
+};
+
+type SnackbarTrigger = { label: string; snackbar: SnackbarCreationProps };
+
+const SnackbarTriggers = ({ triggers }: { triggers: SnackbarTrigger[] }) => {
+  const showSnackbar = useSnackbar();
+
+  return (
+    <>
+      {triggers.map(({ label, snackbar }) => (
+        <button key={label} type="button" onClick={() => showSnackbar(snackbar)}>
+          {label}
+        </button>
+      ))}
+    </>
+  );
+};
+
+const BatchedSnackbarTrigger = () => {
+  const showSnackbar = useSnackbar();
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        showSnackbar({ text: 'First message' });
+        showSnackbar({ text: 'Latest message' });
+      }}
+    >
+      Show latest
+    </button>
+  );
+};
+
+const renderProvider = (triggers: SnackbarTrigger[], timeout?: number) =>
+  render(
+    <SnackbarProvider timeout={timeout}>
+      <SnackbarTriggers triggers={triggers} />
+    </SnackbarProvider>,
+  );
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  resetLiveRegionAnnouncementQueue();
+});
+
+afterEach(() => {
+  jest.clearAllTimers();
+  jest.useRealTimers();
+});
+
+/* eslint-disable testing-library/no-node-access -- Portal placement, teardown and transition classes require structural DOM assertions. */
+describe('SnackbarProvider orchestration', () => {
+  it('does not mount a portal or live region while idle', () => {
+    const { baseElement } = renderProvider([]);
+
+    expect(baseElement.querySelector('.wds-Snackbar')).toBeNull();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+  });
+
+  it('creates a Snackbar programmatically in document.body', async () => {
+    const { container } = renderProvider([
+      { label: 'Show', snackbar: { text: 'Changes saved', sentiment: 'success' } },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    expect(screen.getByRole('status')).toHaveTextContent('Changes saved');
+    expect(container).not.toContainElement(screen.getByRole('status'));
+    expect(screen.getByText('Changes saved').closest('.wds-Snackbar')?.parentElement).toBe(
+      document.body,
+    );
+  });
+
+  it('keeps the default timeout until semantic durations are introduced', async () => {
+    renderProvider([{ label: 'Show', snackbar: { text: 'Changes saved' } }]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    advanceTimers(TIMEOUT - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('retains an explicitly configured Provider timeout', async () => {
+    renderProvider([{ label: 'Show', snackbar: { text: 'Changes saved' } }], TIMEOUT * 2);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    advanceTimers(TIMEOUT * 2 - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('exits the active Snackbar before showing the latest replacement', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message' } },
+      { label: 'Show second', snackbar: { text: 'Second message' } },
+      { label: 'Show latest', snackbar: { text: 'Latest message' } },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Show second' }));
+    await user.click(screen.getByRole('button', { name: 'Show latest' }));
+
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(screen.getByText('First message')).toBeInTheDocument();
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+    expect(screen.queryByText('Latest message')).not.toBeInTheDocument();
+
+    advanceTimers(1);
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+    expect(screen.getByText('Latest message')).toBeInTheDocument();
+    expect(screen.getAllByRole('status')).toHaveLength(1);
+    expect(screen.getByText('Latest message').closest('.wds-Snackbar-container')).toHaveClass(
+      'wds-Snackbar-container-appear-active',
+    );
+  });
+
+  it('shows the latest Snackbar when creations are batched before the first render', async () => {
+    render(
+      <SnackbarProvider>
+        <BatchedSnackbarTrigger />
+      </SnackbarProvider>,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Show latest' }));
+
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.getByText('Latest message')).toBeInTheDocument();
+  });
+
+  it('replaces Snackbars even when their timestamps and the clock are unchanged', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message', timestamp: 1 } },
+      { label: 'Show second', snackbar: { text: 'Second message', timestamp: 1 } },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    await user.click(screen.getByRole('button', { name: 'Show second' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+  });
+
+  it('gives a replacing Snackbar a fresh timeout after the active one exits', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message' } },
+      { label: 'Replace', snackbar: { text: 'Replacement' } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    advanceTimers(TIMEOUT - SNACKBAR_EXIT_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Replace' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    advanceTimers(TIMEOUT - 1);
+    expect(screen.getByText('Replacement')).toBeInTheDocument();
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Replacement')).not.toBeInTheDocument();
+  });
+
+  it('does not freeze the active Snackbar when a replacement has empty text', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message' } },
+      { label: 'Clear', snackbar: { text: '' } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Clear' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    advanceTimers(TIMEOUT);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('cleans up the active Snackbar timer when the Provider unmounts', async () => {
+    const view = renderProvider([{ label: 'Show', snackbar: { text: 'Changes saved' } }]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    expect(jest.getTimerCount()).toBe(1);
+
+    view.unmount();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+
+  it('removes the portal after the close button finishes dismissing it', async () => {
+    renderProvider([{ label: 'Show', snackbar: { text: 'Changes saved' } }]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    advanceTimers(1);
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('does not restart the timer when its parent rerenders', async () => {
+    const triggers = [{ label: 'Show', snackbar: { text: 'Changes saved' } }];
+    const view = renderProvider(triggers);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+
+    view.rerender(
+      <SnackbarProvider>
+        <SnackbarTriggers triggers={triggers} />
+      </SnackbarProvider>,
+    );
+    advanceTimers(TIMEOUT - SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('forwards navigation actions unchanged', async () => {
+    renderProvider([
+      {
+        label: 'Show',
+        snackbar: {
+          text: 'Transfer completed',
+          action: { label: <span>View transfer</span>, href: '/transfers/123', target: '_blank' },
+        },
+      },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    const link = screen.getByRole('link', { name: 'View transfer' });
+    expect(link).toHaveAttribute('href', '/transfers/123');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+});
+
+/* eslint-enable testing-library/no-node-access */
+
+describe('Snackbar manager instance guards', () => {
+  it('ignores an exit callback from an already replaced instance', () => {
+    const { result } = renderHook(() => useSnackbarManager());
+    act(() => result.current.showSnackbar({ text: 'First message' }));
+    const firstExited = result.current.handleExited;
+    act(() => result.current.showSnackbar({ text: 'Replacement' }));
+    act(() => firstExited());
+    const replacementKey = result.current.announcementKey;
+
+    act(() => firstExited());
+
+    expect(result.current.active?.props.text).toBe('Replacement');
+    expect(result.current.announcementKey).toBe(replacementKey);
+    expect(result.current.visible).toBe(true);
+  });
+
+  it('can dismiss a batched instance before it has rendered', () => {
+    const { result } = renderHook(() => useSnackbarManager());
+    act(() => {
+      result.current.showSnackbar({ text: 'Changes saved' });
+      result.current.dismissSnackbar();
+    });
+
+    expect(result.current.active).toBeNull();
+    expect(result.current.visible).toBe(false);
+  });
+});

package/src/Snackbar/SnackbarProvider.tsx

@@ -1,7 +1,8 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
-import SnackbarPortal, { SnackbarProps } from './Snackbar';
+import SnackbarPortal from './SnackbarPortal';
 import { SnackbarContext } from './SnackbarContext';
+import useSnackbarManager from './useSnackbarManager';
 
 export interface SnackbarProviderProps {
   timeout?: number;
@@ -9,24 +10,24 @@ export interface SnackbarProviderProps {
 }
 
 export default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {
-  const [state, setState] = useState<Omit<SnackbarProps, 'timeout'>>({
-    text: '',
-    timestamp: 0,
-  });
-  const { action, text, timestamp } = state;
+  const { active, announcementKey, dismissSnackbar, handleExited, showSnackbar, visible } =
+    useSnackbarManager();
+  const contextValue = useMemo(() => ({ createSnackbar: showSnackbar }), [showSnackbar]);
 
   return (
-    <SnackbarContext.Provider
-      value={useMemo(
-        () => ({
-          createSnackbar: ({ action, text }) => {
-            setState({ action, text, timestamp: Date.now() });
-          },
-        }),
-        [],
-      )}
-    >
-      <SnackbarPortal action={action} text={text} timestamp={timestamp} timeout={timeout} />
+    <SnackbarContext.Provider value={contextValue}>
+      {active ? (
+        <SnackbarPortal
+          // Each instance gets a fresh appear transition and live-region announcement.
+          key={active.id}
+          {...active.props}
+          announcementKey={announcementKey}
+          timeout={timeout}
+          visible={visible}
+          onDismissRequest={dismissSnackbar}
+          onExited={handleExited}
+        />
+      ) : null}
       {children}
     </SnackbarContext.Provider>
   );

package/src/Snackbar/_stories/Snackbar.rtl.test.story.tsx

@@ -1,8 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Snackbar } from '../Snackbar';
+import type { SnackbarCreationProps } from '../Snackbar.types';
+import SnackbarProvider from '../SnackbarProvider';
+import useSnackbar from '../useSnackbar';
 
 export default {
   component: Snackbar,
@@ -14,16 +17,23 @@ type Story = StoryObj<typeof Snackbar>;
 
 const TIMEOUT = 10_000_000;
 
-function SnackbarStory({ text, action }: { text: string; action?: { label: string } }) {
-  const [timestamp, setTimestamp] = useState(0);
+function ShowOnMount(props: SnackbarCreationProps) {
+  const createSnackbar = useSnackbar();
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setTimestamp(1);
+    createSnackbar(props);
+    // This visual fixture creates once per mount, not on every render of its props.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  return null;
+}
+
+function SnackbarStory({ text, action }: { text: string; action?: { label: string } }) {
   return (
-    <Snackbar text={<span>{text}</span>} timestamp={timestamp} timeout={TIMEOUT} action={action} />
+    <SnackbarProvider timeout={TIMEOUT}>
+      <ShowOnMount text={<span>{text}</span>} action={action} />
+    </SnackbarProvider>
   );
 }
 

package/src/Snackbar/_stories/Snackbar.story.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn, userEvent, within } from 'storybook/test';
+import { Card } from '@transferwise/icons';
 
 import { wait } from '../../test-utils/wait';
 import {
@@ -7,7 +8,7 @@ import {
   globalScope,
 } from '../../../.storybook/components/sandbox/SandboxEditor';
 import Button from '../../Button';
-import { Snackbar } from '../Snackbar';
+import { Snackbar, type SnackbarProps } from '../Snackbar';
 import { SnackbarConsumer } from '../SnackbarContext';
 import SnackbarProvider from '../SnackbarProvider';
 
@@ -17,6 +18,27 @@ const meta: Meta = {
 };
 export default meta;
 
+type SnackbarExample = {
+  label: string;
+  props: Omit<SnackbarProps, 'timeout' | 'timestamp'>;
+};
+
+const SnackbarExamples = ({ examples }: { examples: SnackbarExample[] }) => (
+  <SnackbarProvider>
+    <SnackbarConsumer>
+      {({ createSnackbar }) => (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--size-8)' }}>
+          {examples.map(({ label, props }) => (
+            <Button key={label} v2 size="md" onClick={() => createSnackbar(props)}>
+              {label}
+            </Button>
+          ))}
+        </div>
+      )}
+    </SnackbarConsumer>
+  </SnackbarProvider>
+);
+
 export const Sandbox = createSandboxStory({
   code: `<SnackbarProvider>
   <SnackbarConsumer>
@@ -87,3 +109,42 @@ export const Basic: StoryObj = {
     await userEvent.click(canvas.getByRole('button'));
   },
 };
+
+/**
+ * Use `sentiment` to match the meaning of the feedback. Sentiment controls appearance and default
+ * media; it does not change the polite screen-reader announcement.
+ */
+export const Sentiments: StoryObj = {
+  render: () => (
+    <SnackbarExamples
+      examples={[
+        { label: 'Neutral', props: { text: 'Details updated', sentiment: 'neutral' } },
+        { label: 'Negative', props: { text: 'Transfer failed', sentiment: 'negative' } },
+        { label: 'Warning', props: { text: 'Check the recipient details', sentiment: 'warning' } },
+        { label: 'Success', props: { text: 'Transfer completed', sentiment: 'success' } },
+        {
+          label: 'Proposition',
+          props: { text: 'You can earn a referral reward', sentiment: 'proposition' },
+        },
+      ]}
+    />
+  ),
+};
+
+/**
+ * `media` overrides the sentiment-derived media. Custom media is displayed in the 24×24px media
+ * slot and should provide its own accessibility attributes when meaningful.
+ */
+export const Media: StoryObj = {
+  render: () => (
+    <SnackbarExamples
+      examples={[
+        { label: 'Default media', props: { text: 'Transfer completed', sentiment: 'success' } },
+        {
+          label: 'Custom media',
+          props: { text: 'Card added', media: <Card size={24} title="Card" /> },
+        },
+      ]}
+    />
+  ),
+};

package/src/Snackbar/_stories/Snackbar.test.story.tsx

@@ -1,4 +1,4 @@
-import { userEvent, within, expect } from 'storybook/test';
+import { userEvent, within, expect, waitFor } from 'storybook/test';
 import { action } from 'storybook/actions';
 import { withVariantConfig } from '../../../.storybook/helpers';
 import { lorem20 } from '../../test-utils';
@@ -46,7 +46,7 @@ const Default = {
                 block
                 onClick={() => {
                   createSnackbar({
-                    action: {
+                    action: args.action ?? {
                       label: 'View',
                       onClick: () => action('View button clicked.'),
                     },
@@ -72,6 +72,27 @@ export const Basic = {
   },
 };
 
+export const NavigationAction = {
+  ...Default,
+  args: {
+    ...Default.args,
+    action: {
+      label: 'View transfer',
+      href: '/transfers/123',
+      target: '_blank',
+    },
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    await launchSnackbar(canvasElement);
+
+    const link = await waitFor(() =>
+      within(document.body).getByRole('link', { name: 'View transfer' }),
+    );
+    await expect(link).toHaveAttribute('href', '/transfers/123');
+    await expect(link).toHaveAttribute('target', '_blank');
+  },
+};
+
 export const Mobile = {
   ...Default,
   args: {
@@ -88,9 +109,9 @@ const switchToDarkMode = async (context: { canvasElement: HTMLElement }) => {
   if (body) {
     body.setAttribute('class', 'np-theme-personal--dark');
   }
-  const snackbar = document.querySelector('div.snackbar');
+  const snackbar = document.querySelector('div.wds-Snackbar');
   if (snackbar) {
-    snackbar.setAttribute('class', 'snackbar np-theme-personal--dark');
+    snackbar.setAttribute('class', 'wds-Snackbar np-theme-personal--dark');
   }
 };
 
@@ -134,6 +155,6 @@ export const MultipleClicks = {
       await userEvent.click(canvas.getByRole('button'));
     }
 
-    await expect(within(document.body).getAllByRole('alert')).toHaveLength(1);
+    await expect(within(document.body).getAllByRole('status')).toHaveLength(1);
   },
 };

package/src/Snackbar/constants.ts

@@ -0,0 +1,2 @@
+export const SNACKBAR_ENTER_DURATION = 300;
+export const SNACKBAR_EXIT_DURATION = 150;

package/src/Snackbar/useSnackbarManager.ts

@@ -0,0 +1,122 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+import type { SnackbarCreationProps } from './Snackbar.types';
+
+type SnackbarInstance = {
+  id: number;
+  props: SnackbarCreationProps;
+};
+
+type SnackbarManagerState = {
+  active: SnackbarInstance | null;
+  activeHasRendered: boolean;
+  announcementKey: number;
+  pending: SnackbarInstance | null;
+  visible: boolean;
+};
+
+type SnackbarManagerAction =
+  | { type: 'show'; instance: SnackbarInstance }
+  | { type: 'rendered'; instanceId: number }
+  | { type: 'dismiss' }
+  | { type: 'exited'; instanceId: number };
+
+const emptyState: SnackbarManagerState = {
+  active: null,
+  activeHasRendered: false,
+  announcementKey: 0,
+  pending: null,
+  visible: false,
+};
+
+const snackbarManagerReducer = (
+  state: SnackbarManagerState,
+  action: SnackbarManagerAction,
+): SnackbarManagerState => {
+  switch (action.type) {
+    case 'show':
+      if (!state.active || !state.activeHasRendered) {
+        // Batched creates collapse to the latest instance before anything has entered.
+        return {
+          active: action.instance,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true,
+        };
+      }
+
+      // Keep the active content until it exits; newer creates replace only the pending instance.
+      return { ...state, pending: action.instance, visible: false };
+    case 'rendered':
+      if (state.active?.id !== action.instanceId || state.activeHasRendered) {
+        return state;
+      }
+
+      return { ...state, activeHasRendered: true };
+    case 'dismiss':
+      if (!state.active) {
+        return state;
+      }
+
+      return state.activeHasRendered
+        ? { ...state, visible: false }
+        : { ...emptyState, announcementKey: state.announcementKey };
+    case 'exited':
+      // Ignore callbacks from an instance that has already been replaced.
+      if (state.active?.id !== action.instanceId) {
+        return state;
+      }
+
+      if (state.pending) {
+        return {
+          active: state.pending,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true,
+        };
+      }
+
+      return { ...emptyState, announcementKey: state.announcementKey };
+    default:
+      return state;
+  }
+};
+
+/** Owns one active Snackbar and its latest replacement, waiting for exit before the next enters. */
+const useSnackbarManager = () => {
+  const [state, dispatch] = useReducer(snackbarManagerReducer, emptyState);
+  const nextInstanceId = useRef(0);
+
+  const showSnackbar = useCallback((props: SnackbarCreationProps) => {
+    nextInstanceId.current += 1;
+    dispatch({ type: 'show', instance: { id: nextInstanceId.current, props } });
+  }, []);
+
+  const dismissSnackbar = useCallback(() => dispatch({ type: 'dismiss' }), []);
+
+  const handleExited = useCallback(() => {
+    if (state.active) {
+      dispatch({ type: 'exited', instanceId: state.active.id });
+    }
+  }, [state.active]);
+
+  useEffect(() => {
+    if (state.active && state.visible && !state.activeHasRendered) {
+      // Later creates can now wait for this instance's exit instead of coalescing before render.
+      dispatch({ type: 'rendered', instanceId: state.active.id });
+    }
+  }, [state.active, state.activeHasRendered, state.visible]);
+
+  return {
+    active: state.active,
+    announcementKey: state.announcementKey,
+    dismissSnackbar,
+    handleExited,
+    showSnackbar,
+    visible: state.visible,
+  };
+};
+
+export default useSnackbarManager;

package/src/i18n/th.json

@@ -35,7 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
   "neptune.PhoneNumberInput.countryCodeLabel": "รหัสประเทศ",
   "neptune.PhoneNumberInput.phoneNumberLabel": "หมายเลขโทรศัพท์",
-  "neptune.PhoneNumberInput.phoneNumberPrefix": "รหัสประเทศ",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "คำนำหน้า",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
   "neptune.StatusIcon.iconLabel.error": "ข้อผิดพลาด:",

package/src/i18n/zh-CN.json

@@ -35,7 +35,6 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "选择其中一项...",
   "neptune.PhoneNumberInput.countryCodeLabel": "国家/地区代码",
   "neptune.PhoneNumberInput.phoneNumberLabel": "电话号码",
-  "neptune.PhoneNumberInput.phoneNumberPrefix": "前缀",
   "neptune.Select.searchPlaceholder": "搜索",
   "neptune.SelectInput.noResultsFound": "找不到结果",
   "neptune.StatusIcon.iconLabel.error": "错误:",