feat(useSnackbarManager): imperative snackbar API

EldarMuhamethanov · EldarMuhamethanov · commit d4cad2697f97 · 2026-02-26T13:25:18.000+03:00
diff --git a/packages/vkui/docs/icons-overview/IconsOverview.tsx b/packages/vkui/docs/icons-overview/IconsOverview.tsx
@@ -13,8 +13,8 @@ import {
   ConfigProvider,
   Flex,
   Mark,
+  snackbarManager,
   Tooltip,
-  useSnackbarManager,
 } from '../../src';
 import { Keys, pressedKey } from '../../src/lib/accessibility';
 import { OverviewLayout } from '../common/components/OverviewLayout';
@@ -28,6 +28,8 @@ const SIZES_OPTIONS: ChipOption[] = ICON_SIZES.map((size) => ({
   label: size,
 }));
 
+snackbarManager.setLimit(1);
+
 const filterConfig = (config: ConfigData[], query: string, sizes: string[]) => {
   if (!query && sizes.length === SIZES_OPTIONS.length) {
     return config;
@@ -52,9 +54,6 @@ const filterConfig = (config: ConfigData[], query: string, sizes: string[]) => {
 };
 
 const IconsOverview = () => {
-  const [snackbarApi, contextHolder] = useSnackbarManager({
-    limit: 1,
-  });
   const [selectedSizes, setSelectedSizes] = useState<ChipOption[]>(SIZES_OPTIONS);
   const rootRef = useRef<HTMLDivElement | null>(null);
 
@@ -68,32 +67,29 @@ const IconsOverview = () => {
     [selectedSizes],
   );
 
-  const onIconClick = useCallback(
-    (iconName: string) => {
-      const iconCode = `<${iconName} />`;
+  const onIconClick = useCallback((iconName: string) => {
+    const iconCode = `<${iconName} />`;
 
-      navigator.clipboard
-        .writeText(iconCode)
-        .then(() => {
-          snackbarApi.open({
-            before: (
-              <Avatar size={24} style={{ background: 'var(--vkui--color_background_accent)' }}>
-                <Icon16Done fill="#fff" width={14} height={14} />
-              </Avatar>
-            ),
-            children: (
-              <>
-                <Mark>{iconCode}</Mark> скопировано!
-              </>
-            ),
-            style: { maxInlineSize: 'unset', inlineSize: 'fit-content' },
-            placement: 'top-end',
-          });
-        })
-        .catch(noop);
-    },
-    [snackbarApi],
-  );
+    navigator.clipboard
+      .writeText(iconCode)
+      .then(() => {
+        snackbarManager.open({
+          before: (
+            <Avatar size={24} style={{ background: 'var(--vkui--color_background_accent)' }}>
+              <Icon16Done fill="#fff" width={14} height={14} />
+            </Avatar>
+          ),
+          children: (
+            <>
+              <Mark>{iconCode}</Mark> скопировано!
+            </>
+          ),
+          style: { maxInlineSize: 'unset', inlineSize: 'fit-content' },
+          placement: 'top-end',
+        });
+      })
+      .catch(noop);
+  }, []);
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent<HTMLElement>, iconName: string) => {
@@ -157,7 +153,6 @@ const IconsOverview = () => {
           </Flex>
         }
       />
-      {contextHolder}
       <ColorPickerControl containerRef={rootRef} />
     </div>
   );
diff --git a/packages/vkui/src/hooks/useSnackbarManager/components/SnackbarManagerHolder.tsx b/packages/vkui/src/hooks/useSnackbarManager/components/SnackbarManagerHolder.tsx
@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
-import { useIsDesktop } from '../helpers/useIsDesktop';
 import {
   getSnackbarManagerInternals,
   snackbarManager,
@@ -28,12 +27,6 @@ export const SnackbarManagerHolder: React.FC<SnackbarManagerNS.HolderProps> = ({
     };
   }, [internals]);
 
-  const isDesktop = useIsDesktop();
-
-  useIsomorphicLayoutEffect(() => {
-    internals.setIsDesktop(isDesktop);
-  }, [internals, isDesktop]);
-
   useIsomorphicLayoutEffect(() => {
     if (limit !== undefined) {
       manager.setLimit(limit);
@@ -64,7 +57,7 @@ export const SnackbarManagerHolder: React.FC<SnackbarManagerNS.HolderProps> = ({
     }
   }, [manager, zIndex]);
 
-  const config = React.useSyncExternalStore<SnackbarManagerConfig>(
+  const configStore = React.useSyncExternalStore<SnackbarManagerConfig>(
     internals.subscribeConfig,
     internals.getConfig,
     internals.getConfig,
@@ -73,10 +66,10 @@ export const SnackbarManagerHolder: React.FC<SnackbarManagerNS.HolderProps> = ({
   return (
     <SnackbarHolder
       store={internals.store}
-      limit={config.limit}
-      offsetYStart={config.offsetYStart}
-      offsetYEnd={config.offsetYEnd}
-      zIndex={config.zIndex}
+      limit={configStore.limit}
+      offsetYStart={configStore.offsetYStart}
+      offsetYEnd={configStore.offsetYEnd}
+      zIndex={configStore.zIndex}
     />
   );
 };
diff --git a/packages/vkui/src/hooks/useSnackbarManager/helpers/useIsDesktop.ts b/packages/vkui/src/hooks/useSnackbarManager/helpers/useIsDesktop.ts
@@ -1,8 +1,27 @@
 import * as React from 'react';
+import { MEDIA_QUERIES } from '../../../lib/adaptivity';
 import { useDOM } from '../../../lib/dom';
 import { matchMediaListAddListener, matchMediaListRemoveListener } from '../../../lib/matchMedia';
 import { useMediaQueries } from '../../useMediaQueries';
 
+/**
+ * Определяет desktop-режим по окну без хуков.
+ * Desktop: (smallTabletPlus and pointer: fine) or (smallTabletPlus and mediumHeight)
+ * Совпадает с логикой useIsDesktop().
+ */
+export function getIsDesktop(window: Window | null | undefined): boolean {
+  if (!window) {
+    return false;
+  }
+  // eslint-disable-next-line no-restricted-properties
+  const smallTabletPlus = window.matchMedia(MEDIA_QUERIES.SMALL_TABLET_PLUS).matches;
+  // eslint-disable-next-line no-restricted-properties
+  const mediumHeight = window.matchMedia(MEDIA_QUERIES.MEDIUM_HEIGHT).matches;
+  // eslint-disable-next-line no-restricted-properties
+  const pointerFine = window.matchMedia('(pointer: fine)').matches;
+  return smallTabletPlus && (pointerFine || mediumHeight);
+}
+
 /**
  * Хук для определения desktop режима.
  * Desktop: (smallTabletPlus and pointer: fine) or (smallTabletPlus and mediumHeight)
diff --git a/packages/vkui/src/hooks/useSnackbarManager/snackbarManager.ts b/packages/vkui/src/hooks/useSnackbarManager/snackbarManager.ts
@@ -4,6 +4,7 @@ import { getDOM } from '../../lib/dom';
 import { DEFAULT_LIMIT, DEFAULT_QUEUE_STRATEGY } from './constants';
 import { createSnackbarActions } from './helpers/createSnackbarActions';
 import { createSnackbarStore, type SnackbarStore } from './helpers/createSnackbarStore';
+import { getIsDesktop } from './helpers/useIsDesktop';
 import type { SnackbarApi, SnackbarManagerNS } from './types';
 
 export type SnackbarManagerConfig = {
@@ -18,7 +19,6 @@ type SnackbarManagerInternals = {
   store: SnackbarStore;
   getConfig: () => SnackbarManagerConfig;
   subscribeConfig: (listener: () => void) => () => void;
-  setIsDesktop: (isDesktop: boolean) => void;
   registerHolder: () => void;
   unregisterHolder: () => void;
   setMountCallback: (callback: (() => void) | null) => void;
@@ -44,7 +44,7 @@ export function createSnackbarManager(
 ): SnackbarManagerNS.Instance {
   const store = createSnackbarStore();
 
-  const { document } = getDOM();
+  const { document, window } = getDOM();
 
   let config: SnackbarManagerConfig = {
     limit: options.limit ?? DEFAULT_LIMIT,
@@ -54,8 +54,6 @@ export function createSnackbarManager(
     zIndex: options.zIndex,
   };
 
-  let isDesktop = false;
-
   const configListeners = new Set<() => void>();
 
   const notifyConfig = () => {
@@ -65,7 +63,7 @@ export function createSnackbarManager(
   const actions = createSnackbarActions(store, {
     getLimit: () => config.limit,
     getQueueStrategy: () => config.queueStrategy,
-    getIsDesktop: () => isDesktop,
+    getIsDesktop: () => getIsDesktop(window),
   });
 
   let holderCount = 0;
@@ -85,6 +83,11 @@ export function createSnackbarManager(
     }
   };
 
+  const updateConfig = (newConfig: SnackbarManagerConfig) => {
+    config = newConfig;
+    notifyConfig();
+  };
+
   const instance: SnackbarManagerNS.Instance = {
     open: (config) => {
       ensureHolderMounted();
@@ -97,26 +100,11 @@ export function createSnackbarManager(
     update: actions.update,
     close: actions.close,
     closeAll: actions.closeAll,
-    setLimit: (count) => {
-      config = { ...config, limit: count };
-      notifyConfig();
-    },
-    setQueueStrategy: (strategy) => {
-      config = { ...config, queueStrategy: strategy };
-      notifyConfig();
-    },
-    setOffsetYStart: (offset) => {
-      config = { ...config, offsetYStart: offset };
-      notifyConfig();
-    },
-    setOffsetYEnd: (offset) => {
-      config = { ...config, offsetYEnd: offset };
-      notifyConfig();
-    },
-    setZIndex: (z) => {
-      config = { ...config, zIndex: z };
-      notifyConfig();
-    },
+    setLimit: (count) => updateConfig({ ...config, limit: count }),
+    setQueueStrategy: (strategy) => updateConfig({ ...config, queueStrategy: strategy }),
+    setOffsetYStart: (offset) => updateConfig({ ...config, offsetYStart: offset }),
+    setOffsetYEnd: (offset) => updateConfig({ ...config, offsetYEnd: offset }),
+    setZIndex: (z) => updateConfig({ ...config, zIndex: z }),
   };
 
   internalsMap.set(instance, {
@@ -126,9 +114,6 @@ export function createSnackbarManager(
       configListeners.add(listener);
       return () => configListeners.delete(listener);
     },
-    setIsDesktop: (value) => {
-      isDesktop = value;
-    },
     registerHolder: () => {
       holderCount += 1;
     },
diff --git a/website/components/mdx/Playground/PlaygroundToolbar/PlatformPicker/PlatformPicker.tsx b/website/components/mdx/Playground/PlaygroundToolbar/PlatformPicker/PlatformPicker.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Icon28ErrorCircleOutline } from '@vkontakte/icons';
-import { type PlatformType, SegmentedControl, Snackbar } from '@vkontakte/vkui';
+import { type PlatformType, SegmentedControl, snackbarManager } from '@vkontakte/vkui';
 import { PlaygroundStoreContext, usePlaygroundStore } from '@/providers/playgroundStoreProvider';
 import { DEFAULT_THEME_FOR_PLATFORM, DEFAULT_THEME_NAMES } from '../../vkuiThemes/constants';
 import { getDefaultByThemesPresets, loadTheme } from '../../vkuiThemes/helpers';
@@ -10,7 +10,6 @@ export function PlatformPicker({ className }: { className?: string }) {
   const playgroundLoading = usePlaygroundStore((store) => store.playgroundLoading);
   const platform = usePlaygroundStore((store) => store.platform);
   const store = React.useContext(PlaygroundStoreContext);
-  const [snackbar, setSnackbar] = React.useState<React.ReactElement | null>(null);
 
   const handlePlatformChange = async (newPlatform: PlatformType) => {
     if (store) {
@@ -32,14 +31,10 @@ export function PlatformPicker({ className }: { className?: string }) {
         } catch (error) {
           // eslint-disable-next-line no-console
           console.warn(error);
-          setSnackbar(
-            <Snackbar
-              onClosed={() => setSnackbar(null)}
-              before={<Icon28ErrorCircleOutline fill="var(--vkui--color_icon_negative)" />}
-            >
-              {`Не удалось загрузить токены для темы ${newThemeName}`}
-            </Snackbar>,
-          );
+          snackbarManager.open({
+            before: <Icon28ErrorCircleOutline fill="var(--vkui--color_icon_negative)" />,
+            children: `Не удалось загрузить токены для темы ${newThemeName}`,
+          });
         } finally {
           updatePlaygroundLoading(false);
         }
@@ -51,7 +46,6 @@ export function PlatformPicker({ className }: { className?: string }) {
 
   return (
     <>
-      {snackbar}
       <SegmentedControl
         size="m"
         value={platform}
diff --git a/website/components/mdx/Playground/PlaygroundToolbar/ThemePicker/ThemesModal.tsx b/website/components/mdx/Playground/PlaygroundToolbar/ThemePicker/ThemesModal.tsx
@@ -9,7 +9,7 @@ import {
   ModalPageHeader,
   PanelSpinner,
   SimpleCell,
-  Snackbar,
+  snackbarManager,
   VisuallyHidden,
 } from '@vkontakte/vkui';
 import { Callout, Code } from '@vkontakte/vkui-docs-theme';
@@ -40,7 +40,6 @@ export function ThemesModal({ open, setOpen }: ThemesModalProps) {
 function ThemesModalInner({ setOpen }: Pick<ThemesModalProps, 'setOpen'>) {
   const store = React.useContext(PlaygroundStoreContext);
   const { themeNames, isLoading, error } = useLoadThemeNames();
-  const [snackbar, setSnackbar] = React.useState<React.ReactElement | null>(null);
 
   const handleThemeSelect = async (
     themeName: ThemeDefinitionProps['themeName'],
@@ -71,14 +70,10 @@ function ThemesModalInner({ setOpen }: Pick<ThemesModalProps, 'setOpen'>) {
       } catch (error) {
         // eslint-disable-next-line no-console
         console.warn(error);
-        setSnackbar(
-          <Snackbar
-            onClosed={() => setSnackbar(null)}
-            before={<Icon28ErrorCircleOutline fill="var(--vkui--color_icon_negative)" />}
-          >
-            {`Не удалось загрузить токены для темы ${themeName}`}
-          </Snackbar>,
-        );
+        snackbarManager.open({
+          before: <Icon28ErrorCircleOutline fill="var(--vkui--color_icon_negative)" />,
+          children: `Не удалось загрузить токены для темы ${themeName}`,
+        });
       } finally {
         updatePlaygroundLoading(false);
       }
@@ -87,7 +82,6 @@ function ThemesModalInner({ setOpen }: Pick<ThemesModalProps, 'setOpen'>) {
 
   return (
     <>
-      {snackbar}
       <Div>
         Ниже представлены все темы из{' '}
         <Link href="https://github.com/VKCOM/vkui-tokens" target="_blank" rel="noreferrer">
