@vkontakte/vkui 8.0.2 → 8.1.0

package/src/lib/getNavId.ts

@@ -2,8 +2,8 @@ import type { WarnOnceHandler } from './warnOnce';
 
 export interface NavIdProps {
   /** Уникальный идентификатор навигационного элемента (вместо id) */
-  nav?: string;
-  id?: string;
+  nav?: string | undefined;
+  id?: string | undefined;
 }
 
 export function getNavId(props: NavIdProps, warn?: WarnOnceHandler): string | undefined {

package/src/lib/layouts/layoutProps.ts

@@ -41,6 +41,9 @@ const OVERFLOW_VALUES: OverflowValue[] = [
   'auto',
   ...CSS_GLOBAL_KEYWORDS,
 ];
+const SELF_POSITION = ['start', 'center', 'end'];
+const ALIGN_SELF_VALUES = [...SELF_POSITION, 'baseline', 'stretch'];
+const JUSTIFY_SELF_VALUES = [...SELF_POSITION, 'baseline', 'stretch'];
 
 export const SYSTEM_PADDING_VERTICAL = 'var(--vkui--size_base_padding_vertical--regular)';
 export const SYSTEM_PADDING_HORIZONTAL = 'var(--vkui--size_base_padding_horizontal--regular)';
@@ -70,6 +73,8 @@ export const LAYOUT_PROPS = {
   flexGrow: FLEX_VALUES,
   flexShrink: FLEX_VALUES,
   flexBasis: FLEX_BASIS_VALUES,
+  alignSelf: ALIGN_SELF_VALUES,
+  justifySelf: JUSTIFY_SELF_VALUES,
   overflow: OVERFLOW_VALUES,
   overflowBlock: OVERFLOW_VALUES,
   overflowInline: OVERFLOW_VALUES,

package/src/lib/layouts/resolveLayoutProps.ts

@@ -5,8 +5,8 @@ import { LAYOUT_PROPS, type LayoutPropKeys } from './layoutProps';
 import type { LayoutProps } from './types';
 
 export type ComponentProps = Partial<LayoutProps> & {
-  className?: string;
-  style?: React.CSSProperties;
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
 } & {
   [key: string]: unknown;
 };
@@ -17,7 +17,7 @@ export type ComponentProps = Partial<LayoutProps> & {
  * @returns измененные свойства
  */
 export function resolveLayoutProps<T extends ComponentProps>(
-  props: T & { className?: string; style?: React.CSSProperties },
+  props: T & { className?: string | undefined; style?: React.CSSProperties | undefined },
 ) {
   const outProps = { ...props };
   let resolvedClassName: string | undefined;

package/src/lib/layouts/types.ts

@@ -33,113 +33,126 @@ export type FlexBasisProp = LiteralUnion<
   number | string
 >;
 
+type SelfPositionProp = 'start' | 'center' | 'end';
+
+type AlignSelfProp = SelfPositionProp | 'baseline' | 'stretch';
+type JustifySelfProp = SelfPositionProp | 'baseline' | 'stretch';
+
 export interface LayoutProps {
   /**
    * Внутренние отступы со всех сторон.
    */
-  padding?: PaddingProp;
+  padding?: PaddingProp | undefined;
   /**
    * Внутренние отступы по строчной оси.
    */
-  paddingInline?: PaddingProp;
+  paddingInline?: PaddingProp | undefined;
   /**
    * Внутренние отступы по блочной оси.
    */
-  paddingBlock?: PaddingProp;
+  paddingBlock?: PaddingProp | undefined;
   /**
    * Внутренний начальный отступ по строчной оси.
    */
-  paddingInlineStart?: PaddingProp;
+  paddingInlineStart?: PaddingProp | undefined;
   /**
    * Внутренний конечный отступ по строчной оси.
    */
-  paddingInlineEnd?: PaddingProp;
+  paddingInlineEnd?: PaddingProp | undefined;
   /**
    * Внутренний начальный отступ по блочной оси.
    */
-  paddingBlockStart?: PaddingProp;
+  paddingBlockStart?: PaddingProp | undefined;
   /**
    * Внутренний конечный отступ по блочной оси.
    */
-  paddingBlockEnd?: PaddingProp;
+  paddingBlockEnd?: PaddingProp | undefined;
   /**
    * Размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента).
    */
-  inlineSize?: SizeProp;
+  inlineSize?: SizeProp | undefined;
   /**
    * Минимальный размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента).
    */
-  minInlineSize?: Exclude<SizeProp, 'auto'>;
+  minInlineSize?: Exclude<SizeProp, 'auto'> | undefined;
   /**
    * Максимальный размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента).
    */
-  maxInlineSize?: Exclude<SizeProp, 'auto'>;
+  maxInlineSize?: Exclude<SizeProp, 'auto'> | undefined;
   /**
    * Размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента).
    */
-  blockSize?: SizeProp;
+  blockSize?: SizeProp | undefined;
   /**
    * Минимальный размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента).
    */
-  minBlockSize?: SizeProp;
+  minBlockSize?: SizeProp | undefined;
   /**
    * Максимальный размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента).
    */
-  maxBlockSize?: SizeProp;
+  maxBlockSize?: SizeProp | undefined;
   /**
    * Смещение элемента по `top`, `right`, `bottom` и `left` одновременно.
    */
-  inset?: InsetProp;
+  inset?: InsetProp | undefined;
   /**
    * Боковое смещение по строчной оси (при горизонтальном направлении письма - свойства `left`/`right`).
    */
-  insetInline?: InsetProp;
+  insetInline?: InsetProp | undefined;
   /**
    * Боковое смещение по блочной оси (при горизонтальном направлении письма - свойства `top`/`bottom`).
    */
-  insetBlock?: InsetProp;
+  insetBlock?: InsetProp | undefined;
   /**
    * Смещение начального отступа по строчной оси (при горизонтальном направлении письма - свойство `left`).
    */
-  insetInlineStart?: InsetProp;
+  insetInlineStart?: InsetProp | undefined;
   /**
    * Смещение конечного отступа по строчной оси (при горизонтальном направлении письма - свойство `right`).
    */
-  insetInlineEnd?: InsetProp;
+  insetInlineEnd?: InsetProp | undefined;
   /**
    * Смещение начального отступа по блочной оси (при горизонтальном направлении письма - свойство `top`).
    */
-  insetBlockStart?: InsetProp;
+  insetBlockStart?: InsetProp | undefined;
   /**
    * Смещение конечного отступа по блочной оси (при горизонтальном направлении письма - свойство `bottom`).
    */
-  insetBlockEnd?: InsetProp;
+  insetBlockEnd?: InsetProp | undefined;
   /**
    * Позиционирование элемента.
    */
-  position?: PositionValue;
+  position?: PositionValue | undefined;
   /**
    * Управление переполнением содержимого.
    */
-  overflow?: OverflowValue;
+  overflow?: OverflowValue | undefined;
   /**
    * Управление переполнением содержимого по блочной оси (при горизонтальном направлении письма - свойство `overflow-y`).
    */
-  overflowBlock?: OverflowValue;
+  overflowBlock?: OverflowValue | undefined;
   /**
    * Управление переполнением содержимого по строчной оси (при горизонтальном направлении письма - свойство `overflow-x`).
    */
-  overflowInline?: OverflowValue;
+  overflowInline?: OverflowValue | undefined;
   /**
    * Определяет, насколько элемент будет расти относительно остальных flex-элементов.
    */
-  flexGrow?: FlexGrowProp;
+  flexGrow?: FlexGrowProp | undefined;
   /**
    * Определяет, насколько элемент будет сжиматься относительно остальных flex-элементов.
    */
-  flexShrink?: FlexShrinkProp;
+  flexShrink?: FlexShrinkProp | undefined;
   /**
    * Определяет начальный размер flex-элемента.
    */
-  flexBasis?: FlexBasisProp;
+  flexBasis?: FlexBasisProp | undefined;
+  /**
+   * Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`.
+   */
+  alignSelf?: AlignSelfProp | undefined;
+  /**
+   * Для задания выравнивания, отличного от установленного на родителе, эквивалентно `justify-self`.
+   */
+  justifySelf?: JustifySelfProp | undefined;
 }

package/src/lib/select.ts

@@ -3,8 +3,8 @@ import type { SelectType } from '../components/Select/Select';
 import { getTextFromChildren } from './children';
 
 export type Option = {
-  value?: unknown;
-  label?: React.ReactNode;
+  value?: unknown | undefined;
+  label?: React.ReactNode | undefined;
   [index: string]: any;
 };
 

package/src/lib/sheet/useBottomSheet.ts

@@ -23,9 +23,9 @@ export type UseBottomSheetOptions = {
   sheetCSSProperty: string;
   backdropCSSProperty: string;
   snapPoint: SnapPoint;
-  blocked?: boolean;
-  onSnapPointChange?: SnapPointChange;
-  onDismiss?: VoidFunction;
+  blocked?: boolean | undefined;
+  onSnapPointChange?: SnapPointChange | undefined;
+  onDismiss?: VoidFunction | undefined;
 };
 
 export type UseBottomSheetHandlers = {
@@ -41,7 +41,7 @@ export type UseBottomSheetHandlers = {
 
 export type UseBottomSheetResult = [
   {
-    initialStyle?: CSSProperties;
+    initialStyle?: CSSProperties | undefined;
     setSheetEl: Dispatch<SetStateAction<HTMLElement | null>>;
     setSheetScrollEl: Dispatch<SetStateAction<HTMLElement | null>>;
     setBackdropEl: Dispatch<SetStateAction<HTMLElement | null>>;

package/src/lib/tokens/TokensClassProvider.tsx

@@ -4,7 +4,7 @@ import { useTokensClassName } from './useTokenClassName';
 import styles from './TokensClassProvider.module.css';
 
 type ProvidedChildProps = {
-  className?: string;
+  className?: string | undefined;
 };
 
 type InjectTokenClassNameToChildProps = {

package/src/lib/tokens/types.ts

@@ -12,8 +12,8 @@ import type { PlatformType } from '../platform';
  * ```
  */
 export type TokensClassNamesByAppearances = {
-  light?: string;
-  dark?: string;
+  light?: string | undefined;
+  dark?: string | undefined;
 };
 
 /**

package/src/lib/utils.ts

@@ -114,11 +114,16 @@ export function isForwardRefElement<
  */
 export function getFetchPriorityProp(value: React.ImgHTMLAttributes<HTMLElement>['fetchPriority']):
   | {
-      fetchPriority: 'high' | 'low' | 'auto' | undefined;
+      fetchPriority: 'high' | 'low' | 'auto';
     }
   | {
-      fetchpriority: 'high' | 'low' | 'auto' | undefined;
-    } {
+      fetchpriority: 'high' | 'low' | 'auto';
+    }
+  | object {
+  if (value === undefined) {
+    return {};
+  }
+
   if (React.version.startsWith('19')) {
     return { fetchPriority: value };
   }

package/src/types.ts

@@ -6,7 +6,7 @@ export type AnyFunction = (...args: any[]) => any;
 export type AlignType = 'left' | 'center' | 'right';
 
 export interface HasChildren {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
 }
 
 export type HasDataAttribute = Record<
@@ -15,32 +15,32 @@ export type HasDataAttribute = Record<
 >;
 
 export interface HasRootRef<T> {
-  getRootRef?: React.Ref<T>;
+  getRootRef?: React.Ref<T> | undefined;
 }
 
 export interface HasRef<T> {
-  getRef?: React.Ref<T>;
+  getRef?: React.Ref<T> | undefined;
 }
 
 export interface HasComponent {
-  Component?: React.ElementType;
+  Component?: React.ElementType | undefined;
 }
 
 export interface HasAlign {
-  align?: AlignType;
+  align?: AlignType | undefined;
 }
 
 export interface HasPlatform {
   /**
    * @ignore
    */
-  platform?: PlatformType;
+  platform?: PlatformType | undefined;
 }
 
 export interface Version {
   major: number;
-  minor?: number;
-  patch?: number;
+  minor?: number | undefined;
+  patch?: number | undefined;
 }
 
 /**
@@ -106,11 +106,11 @@ export type PickOnlyFunctionProps<T> = Pick<T, GetPropsWithFunctionKeys<T>>;
  * type SelectProps {
  *   mode: string,
  *   multiline: boolean;
- *   selectType?: SelectType;
+ *   selectType?: SelectType | undefined;
  * }
  *
  * type NativeSelectProps {
- *   selectType?: SelectType;
+ *   selectType?: SelectType | undefined;
  * }
  *
  * const selectProps: SelectProps = {
@@ -140,3 +140,11 @@ export type RequiredFields<TYPE, FIELDS extends keyof TYPE> = Omit<TYPE, FIELDS>
   Required<Pick<TYPE, FIELDS>>;
 
 export type Elevation = '1' | '2' | '3' | '4';
+
+/**
+ * Аналог Partial, но с явным | undefined для поддержки exactOptionalPropertyTypes.
+ * Используйте вместо Partial когда нужно поддержать exactOptionalPropertyTypes.
+ */
+export type PartialWithUndefined<T> = {
+  [P in keyof T]?: T[P] | undefined;
+};

package/dist/components/DropZone/components/DropZoneGrid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropZoneGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/DropZone/components/DropZoneGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAShE,MAAM,WAAW,iBAAkB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAClF;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,GAAI,yBAAoC,iBAAiB,4CAEjF,CAAC"}

package/dist/components/DropZone/components/DropZoneGrid.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/DropZone/components/DropZoneGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './DropZoneGrid.module.css';\n\nconst directionStyle = {\n  row: styles.row,\n  column: styles.column,\n};\n\nexport interface DropZoneGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Направление дочерних компонентов.\n   */\n  direction?: 'row' | 'column';\n}\n\nexport const DropZoneGrid = ({ direction = 'column', ...props }: DropZoneGridProps) => (\n  <RootComponent baseClassName={classNames(styles.host, directionStyle[direction])} {...props} />\n);\n"],"names":["classNames","RootComponent","directionStyle","row","column","DropZoneGrid","direction","props","baseClassName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,uCAAoC;AAGlE,MAAMC,iBAAiB;IACrBC,GAAG;IACHC,MAAM;AACR;AASA,OAAO,MAAMC,eAAe,CAAC,EAAEC,YAAY,QAAQ,EAAE,GAAGC,OAA0B,iBAChF,KAACN;QAAcO,eAAeR,mCAAwBE,cAAc,CAACI,UAAU;QAAI,GAAGC,KAAK;OAC3F"}

package/dist/cssm/components/DropZone/components/DropZoneGrid.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../../src/components/DropZone/components/DropZoneGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './DropZoneGrid.module.css';\n\nconst directionStyle = {\n  row: styles.row,\n  column: styles.column,\n};\n\nexport interface DropZoneGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Направление дочерних компонентов.\n   */\n  direction?: 'row' | 'column';\n}\n\nexport const DropZoneGrid = ({ direction = 'column', ...props }: DropZoneGridProps) => (\n  <RootComponent baseClassName={classNames(styles.host, directionStyle[direction])} {...props} />\n);\n"],"names":["classNames","RootComponent","styles","directionStyle","row","column","DropZoneGrid","direction","props","baseClassName","host"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,uCAAoC;AAClE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,iBAAiB;IACrBC,KAAKF,OAAOE,GAAG;IACfC,QAAQH,OAAOG,MAAM;AACvB;AASA,OAAO,MAAMC,eAAe,CAAC,EAAEC,YAAY,QAAQ,EAAE,GAAGC,OAA0B,iBAChF,KAACP;QAAcQ,eAAeT,WAAWE,OAAOQ,IAAI,EAAEP,cAAc,CAACI,UAAU;QAAI,GAAGC,KAAK;OAC3F"}

package/dist/cssm/hooks/useSnackbarManager/components/SnackbarAnimatedWrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../../src/hooks/useSnackbarManager/components/SnackbarAnimatedWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCSSKeyframesAnimationController } from '../../../lib/animation';\nimport { usePlatform } from '../../usePlatform';\nimport type { SnackbarItem } from '../types';\nimport styles from './SnackbarAnimatedWrapper.module.css';\n\nconst animationStateClassNames = {\n  enter: styles.stateEnter,\n  entering: styles.stateEnter,\n  entered: styles.stateEnter,\n  exit: styles.stateExit,\n  exiting: styles.stateExit,\n  exited: undefined,\n};\n\nconst placementClassNames = {\n  top: styles.placementTop,\n  bottom: styles.placementBottom,\n};\n\nexport const SnackbarAnimatedWrapper: React.FC<{\n  snackbarItem: SnackbarItem;\n  close: boolean;\n  onClosed: (id: string) => void;\n  placement: 'top' | 'bottom';\n}> = ({ snackbarItem, close = false, onClosed, placement }) => {\n  const ref = useRef<HTMLDivElement | null>(null);\n  const platform = usePlatform();\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    close ? 'exit' : 'enter',\n    {\n      onExited: () => onClosed(snackbarItem.id),\n    },\n  );\n\n  useEffect(() => {\n    if (ref.current && animationState === 'entered') {\n      ref.current.style.setProperty(\n        '--vkui_internal--SnackbarAnimatedWrapper_height',\n        `${ref.current.offsetHeight}px`,\n      );\n    }\n  }, [animationState]);\n\n  if (animationState === 'exited') {\n    return null;\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={classNames(\n        styles.host,\n        animationStateClassNames[animationState],\n        platform === 'ios' && styles.ios,\n        placementClassNames[placement],\n      )}\n      {...animationHandlers}\n    >\n      <snackbarItem.component\n        {...snackbarItem.additionalProps}\n        id={snackbarItem.id}\n        snackbarProps={snackbarItem.snackbarProps}\n        close={snackbarItem.close}\n        update={snackbarItem.update}\n      />\n    </div>\n  );\n};\n"],"names":["useEffect","useRef","classNames","useCSSKeyframesAnimationController","usePlatform","styles","animationStateClassNames","enter","stateEnter","entering","entered","exit","stateExit","exiting","exited","undefined","placementClassNames","top","placementTop","bottom","placementBottom","SnackbarAnimatedWrapper","snackbarItem","close","onClosed","placement","ref","platform","animationState","animationHandlers","onExited","id","current","style","setProperty","offsetHeight","div","className","host","ios","component","additionalProps","snackbarProps","update"],"mappings":"AAAA;;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAE1C,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kCAAkC,QAAQ,kCAAyB;AAC5E,SAASC,WAAW,QAAQ,uBAAoB;AAEhD,OAAOC,YAAY,uCAAuC;AAE1D,MAAMC,2BAA2B;IAC/BC,OAAOF,OAAOG,UAAU;IACxBC,UAAUJ,OAAOG,UAAU;IAC3BE,SAASL,OAAOG,UAAU;IAC1BG,MAAMN,OAAOO,SAAS;IACtBC,SAASR,OAAOO,SAAS;IACzBE,QAAQC;AACV;AAEA,MAAMC,sBAAsB;IAC1BC,KAAKZ,OAAOa,YAAY;IACxBC,QAAQd,OAAOe,eAAe;AAChC;AAEA,OAAO,MAAMC,0BAKR,CAAC,EAAEC,YAAY,EAAEC,QAAQ,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAE;IACxD,MAAMC,MAAMzB,OAA8B;IAC1C,MAAM0B,WAAWvB;IACjB,MAAM,CAACwB,gBAAgBC,kBAAkB,GAAG1B,mCAC1CoB,QAAQ,SAAS,SACjB;QACEO,UAAU,IAAMN,SAASF,aAAaS,EAAE;IAC1C;IAGF/B,UAAU;QACR,IAAI0B,IAAIM,OAAO,IAAIJ,mBAAmB,WAAW;YAC/CF,IAAIM,OAAO,CAACC,KAAK,CAACC,WAAW,CAC3B,mDACA,GAAGR,IAAIM,OAAO,CAACG,YAAY,CAAC,EAAE,CAAC;QAEnC;IACF,GAAG;QAACP;KAAe;IAEnB,IAAIA,mBAAmB,UAAU;QAC/B,OAAO;IACT;IAEA,qBACE,KAACQ;QACCV,KAAKA;QACLW,WAAWnC,WACTG,OAAOiC,IAAI,EACXhC,wBAAwB,CAACsB,eAAe,EACxCD,aAAa,SAAStB,OAAOkC,GAAG,EAChCvB,mBAAmB,CAACS,UAAU;QAE/B,GAAGI,iBAAiB;kBAErB,cAAA,KAACP,aAAakB,SAAS;YACpB,GAAGlB,aAAamB,eAAe;YAChCV,IAAIT,aAAaS,EAAE;YACnBW,eAAepB,aAAaoB,aAAa;YACzCnB,OAAOD,aAAaC,KAAK;YACzBoB,QAAQrB,aAAaqB,MAAM;;;AAInC,EAAE"}

package/dist/cssm/hooks/useSnackbarManager/components/SnackbarsContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../../src/hooks/useSnackbarManager/components/SnackbarsContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Flex } from '../../../components/Flex/Flex';\nimport type { SnackbarPlacement } from '../../../components/Snackbar/types';\nimport type { CSSCustomProperties } from '../../../types';\nimport type { SnackbarApi, SnackbarItem, UseSnackbar } from '../types';\nimport { SnackbarAnimatedWrapper } from './SnackbarAnimatedWrapper';\nimport {\n  SnackbarsContainerContext,\n  type SnackbarsContainerContextData,\n} from './SnackbarsContainerContext';\nimport styles from './SnackbarsContainer.module.css';\n/* eslint-disable jsdoc/require-jsdoc */\n\ninterface SnackbarsContainerProps\n  extends Pick<UseSnackbar.Props, 'offsetYStart' | 'offsetYEnd' | 'zIndex'> {\n  snackbars: SnackbarItem[];\n  placement: SnackbarPlacement;\n  onSnackbarOpen: (id: string) => void;\n  onSnackbarContainerClosed: (id: string) => void;\n}\n\nconst placementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top-end': styles.placementTopEnd,\n  'top': styles.placementTop,\n  'bottom-start': styles.placementBottomStart,\n  'bottom-end': styles.placementBottomEnd,\n  'bottom': styles.placementBottom,\n};\n\nconst resolveOffset = (offset: SnackbarApi.OffsetY | undefined): string => {\n  if (typeof offset === 'undefined') {\n    return '';\n  }\n  return typeof offset === 'number' ? `${offset}px` : offset;\n};\n\nexport const SnackbarsContainer: React.FC<SnackbarsContainerProps> = ({\n  snackbars,\n  placement,\n  onSnackbarOpen,\n  onSnackbarContainerClosed: onSnackbarContainerClosedProp,\n  offsetYStart,\n  offsetYEnd,\n  zIndex,\n}) => {\n  const [snackbarsWrappersToClose, setSnackbarsWrappersToClose] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const onClosed = React.useCallback((id: string) => {\n    setSnackbarsWrappersToClose((oldState) => new Set([...oldState, id]));\n  }, []);\n\n  const onSnackbarContainerClosed = React.useCallback(\n    (id: string) => {\n      setSnackbarsWrappersToClose((oldState) => {\n        oldState.delete(id);\n        return new Set(oldState);\n      });\n      onSnackbarContainerClosedProp(id);\n    },\n    [onSnackbarContainerClosedProp],\n  );\n\n  const contextValue: SnackbarsContainerContextData = React.useMemo(\n    () => ({\n      isInsideContainer: true,\n      onClosed,\n      onOpen: onSnackbarOpen,\n    }),\n    [onClosed, onSnackbarOpen],\n  );\n\n  const containerStyles: CSSCustomProperties = {\n    '--vkui_internal--snackbars_container_offset_y_start': resolveOffset(offsetYStart),\n    '--vkui_internal--snackbars_container_offset_y_end': resolveOffset(offsetYEnd),\n    ...(zIndex !== undefined && { zIndex }),\n  };\n\n  return (\n    <SnackbarsContainerContext.Provider value={contextValue}>\n      <Flex\n        className={classNames(styles.host, placementClassNames[placement])}\n        style={containerStyles}\n      >\n        {snackbars.map((snackbar) => (\n          <SnackbarAnimatedWrapper\n            key={snackbar.id}\n            snackbarItem={snackbar}\n            onClosed={onSnackbarContainerClosed}\n            close={snackbarsWrappersToClose.has(snackbar.id)}\n            placement={placement.startsWith('top') ? 'top' : 'bottom'}\n          />\n        ))}\n      </Flex>\n    </SnackbarsContainerContext.Provider>\n  );\n};\n"],"names":["React","classNames","Flex","SnackbarAnimatedWrapper","SnackbarsContainerContext","styles","placementClassNames","placementTopStart","placementTopEnd","placementTop","placementBottomStart","placementBottomEnd","placementBottom","resolveOffset","offset","SnackbarsContainer","snackbars","placement","onSnackbarOpen","onSnackbarContainerClosed","onSnackbarContainerClosedProp","offsetYStart","offsetYEnd","zIndex","snackbarsWrappersToClose","setSnackbarsWrappersToClose","useState","Set","onClosed","useCallback","id","oldState","delete","contextValue","useMemo","isInsideContainer","onOpen","containerStyles","undefined","Provider","value","className","host","style","map","snackbar","snackbarItem","close","has","startsWith"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,QAAQ,mCAAgC;AAIrD,SAASC,uBAAuB,QAAQ,+BAA4B;AACpE,SACEC,yBAAyB,QAEpB,iCAA8B;AACrC,OAAOC,YAAY,kCAAkC;AAWrD,MAAMC,sBAAsB;IAC1B,aAAaD,OAAOE,iBAAiB;IACrC,WAAWF,OAAOG,eAAe;IACjC,OAAOH,OAAOI,YAAY;IAC1B,gBAAgBJ,OAAOK,oBAAoB;IAC3C,cAAcL,OAAOM,kBAAkB;IACvC,UAAUN,OAAOO,eAAe;AAClC;AAEA,MAAMC,gBAAgB,CAACC;IACrB,IAAI,OAAOA,WAAW,aAAa;QACjC,OAAO;IACT;IACA,OAAO,OAAOA,WAAW,WAAW,GAAGA,OAAO,EAAE,CAAC,GAAGA;AACtD;AAEA,OAAO,MAAMC,qBAAwD,CAAC,EACpEC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,2BAA2BC,6BAA6B,EACxDC,YAAY,EACZC,UAAU,EACVC,MAAM,EACP;IACC,MAAM,CAACC,0BAA0BC,4BAA4B,GAAGzB,MAAM0B,QAAQ,CAC5E,IAAIC;IAEN,MAAMC,WAAW5B,MAAM6B,WAAW,CAAC,CAACC;QAClCL,4BAA4B,CAACM,WAAa,IAAIJ,IAAI;mBAAII;gBAAUD;aAAG;IACrE,GAAG,EAAE;IAEL,MAAMX,4BAA4BnB,MAAM6B,WAAW,CACjD,CAACC;QACCL,4BAA4B,CAACM;YAC3BA,SAASC,MAAM,CAACF;YAChB,OAAO,IAAIH,IAAII;QACjB;QACAX,8BAA8BU;IAChC,GACA;QAACV;KAA8B;IAGjC,MAAMa,eAA8CjC,MAAMkC,OAAO,CAC/D,IAAO,CAAA;YACLC,mBAAmB;YACnBP;YACAQ,QAAQlB;QACV,CAAA,GACA;QAACU;QAAUV;KAAe;IAG5B,MAAMmB,kBAAuC;QAC3C,uDAAuDxB,cAAcQ;QACrE,qDAAqDR,cAAcS;QACnE,GAAIC,WAAWe,aAAa;YAAEf;QAAO,CAAC;IACxC;IAEA,qBACE,KAACnB,0BAA0BmC,QAAQ;QAACC,OAAOP;kBACzC,cAAA,KAAC/B;YACCuC,WAAWxC,WAAWI,OAAOqC,IAAI,EAAEpC,mBAAmB,CAACW,UAAU;YACjE0B,OAAON;sBAENrB,UAAU4B,GAAG,CAAC,CAACC,yBACd,KAAC1C;oBAEC2C,cAAcD;oBACdjB,UAAUT;oBACV4B,OAAOvB,yBAAyBwB,GAAG,CAACH,SAASf,EAAE;oBAC/Cb,WAAWA,UAAUgC,UAAU,CAAC,SAAS,QAAQ;mBAJ5CJ,SAASf,EAAE;;;AAU5B,EAAE"}

package/dist/hooks/useSnackbarManager/components/SnackbarAnimatedWrapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SnackbarAnimatedWrapper.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSnackbarManager/components/SnackbarAnimatedWrapper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAiB7C,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7C,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC7B,CA2CA,CAAC"}

package/dist/hooks/useSnackbarManager/components/SnackbarAnimatedWrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/hooks/useSnackbarManager/components/SnackbarAnimatedWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCSSKeyframesAnimationController } from '../../../lib/animation';\nimport { usePlatform } from '../../usePlatform';\nimport type { SnackbarItem } from '../types';\nimport styles from './SnackbarAnimatedWrapper.module.css';\n\nconst animationStateClassNames = {\n  enter: styles.stateEnter,\n  entering: styles.stateEnter,\n  entered: styles.stateEnter,\n  exit: styles.stateExit,\n  exiting: styles.stateExit,\n  exited: undefined,\n};\n\nconst placementClassNames = {\n  top: styles.placementTop,\n  bottom: styles.placementBottom,\n};\n\nexport const SnackbarAnimatedWrapper: React.FC<{\n  snackbarItem: SnackbarItem;\n  close: boolean;\n  onClosed: (id: string) => void;\n  placement: 'top' | 'bottom';\n}> = ({ snackbarItem, close = false, onClosed, placement }) => {\n  const ref = useRef<HTMLDivElement | null>(null);\n  const platform = usePlatform();\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    close ? 'exit' : 'enter',\n    {\n      onExited: () => onClosed(snackbarItem.id),\n    },\n  );\n\n  useEffect(() => {\n    if (ref.current && animationState === 'entered') {\n      ref.current.style.setProperty(\n        '--vkui_internal--SnackbarAnimatedWrapper_height',\n        `${ref.current.offsetHeight}px`,\n      );\n    }\n  }, [animationState]);\n\n  if (animationState === 'exited') {\n    return null;\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={classNames(\n        styles.host,\n        animationStateClassNames[animationState],\n        platform === 'ios' && styles.ios,\n        placementClassNames[placement],\n      )}\n      {...animationHandlers}\n    >\n      <snackbarItem.component\n        {...snackbarItem.additionalProps}\n        id={snackbarItem.id}\n        snackbarProps={snackbarItem.snackbarProps}\n        close={snackbarItem.close}\n        update={snackbarItem.update}\n      />\n    </div>\n  );\n};\n"],"names":["useEffect","useRef","classNames","useCSSKeyframesAnimationController","usePlatform","animationStateClassNames","enter","entering","entered","exit","exiting","exited","undefined","placementClassNames","top","bottom","SnackbarAnimatedWrapper","snackbarItem","close","onClosed","placement","ref","platform","animationState","animationHandlers","onExited","id","current","style","setProperty","offsetHeight","div","className","component","additionalProps","snackbarProps","update"],"mappings":"AAAA;;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAE1C,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kCAAkC,QAAQ,kCAAyB;AAC5E,SAASC,WAAW,QAAQ,uBAAoB;AAIhD,MAAMC,2BAA2B;IAC/BC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,OAAO;IACPC,QAAQC;AACV;AAEA,MAAMC,sBAAsB;IAC1BC,GAAG;IACHC,MAAM;AACR;AAEA,OAAO,MAAMC,0BAKR,CAAC,EAAEC,YAAY,EAAEC,QAAQ,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAE;IACxD,MAAMC,MAAMpB,OAA8B;IAC1C,MAAMqB,WAAWlB;IACjB,MAAM,CAACmB,gBAAgBC,kBAAkB,GAAGrB,mCAC1Ce,QAAQ,SAAS,SACjB;QACEO,UAAU,IAAMN,SAASF,aAAaS,EAAE;IAC1C;IAGF1B,UAAU;QACR,IAAIqB,IAAIM,OAAO,IAAIJ,mBAAmB,WAAW;YAC/CF,IAAIM,OAAO,CAACC,KAAK,CAACC,WAAW,CAC3B,mDACA,GAAGR,IAAIM,OAAO,CAACG,YAAY,CAAC,EAAE,CAAC;QAEnC;IACF,GAAG;QAACP;KAAe;IAEnB,IAAIA,mBAAmB,UAAU;QAC/B,OAAO;IACT;IAEA,qBACE,KAACQ;QACCV,KAAKA;QACLW,WAAW9B,mCAETG,wBAAwB,CAACkB,eAAe,EACxCD,aAAa,gCACbT,mBAAmB,CAACO,UAAU;QAE/B,GAAGI,iBAAiB;kBAErB,cAAA,KAACP,aAAagB,SAAS;YACpB,GAAGhB,aAAaiB,eAAe;YAChCR,IAAIT,aAAaS,EAAE;YACnBS,eAAelB,aAAakB,aAAa;YACzCjB,OAAOD,aAAaC,KAAK;YACzBkB,QAAQnB,aAAamB,MAAM;;;AAInC,EAAE"}

package/dist/hooks/useSnackbarManager/components/SnackbarsContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SnackbarsContainer.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSnackbarManager/components/SnackbarsContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAE5E,OAAO,KAAK,EAAe,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AASvE,UAAU,uBACR,SAAQ,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,GAAG,QAAQ,CAAC;IACzE,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yBAAyB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAkBD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA4DhE,CAAC"}

package/dist/hooks/useSnackbarManager/components/SnackbarsContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/hooks/useSnackbarManager/components/SnackbarsContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Flex } from '../../../components/Flex/Flex';\nimport type { SnackbarPlacement } from '../../../components/Snackbar/types';\nimport type { CSSCustomProperties } from '../../../types';\nimport type { SnackbarApi, SnackbarItem, UseSnackbar } from '../types';\nimport { SnackbarAnimatedWrapper } from './SnackbarAnimatedWrapper';\nimport {\n  SnackbarsContainerContext,\n  type SnackbarsContainerContextData,\n} from './SnackbarsContainerContext';\nimport styles from './SnackbarsContainer.module.css';\n/* eslint-disable jsdoc/require-jsdoc */\n\ninterface SnackbarsContainerProps\n  extends Pick<UseSnackbar.Props, 'offsetYStart' | 'offsetYEnd' | 'zIndex'> {\n  snackbars: SnackbarItem[];\n  placement: SnackbarPlacement;\n  onSnackbarOpen: (id: string) => void;\n  onSnackbarContainerClosed: (id: string) => void;\n}\n\nconst placementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top-end': styles.placementTopEnd,\n  'top': styles.placementTop,\n  'bottom-start': styles.placementBottomStart,\n  'bottom-end': styles.placementBottomEnd,\n  'bottom': styles.placementBottom,\n};\n\nconst resolveOffset = (offset: SnackbarApi.OffsetY | undefined): string => {\n  if (typeof offset === 'undefined') {\n    return '';\n  }\n  return typeof offset === 'number' ? `${offset}px` : offset;\n};\n\nexport const SnackbarsContainer: React.FC<SnackbarsContainerProps> = ({\n  snackbars,\n  placement,\n  onSnackbarOpen,\n  onSnackbarContainerClosed: onSnackbarContainerClosedProp,\n  offsetYStart,\n  offsetYEnd,\n  zIndex,\n}) => {\n  const [snackbarsWrappersToClose, setSnackbarsWrappersToClose] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const onClosed = React.useCallback((id: string) => {\n    setSnackbarsWrappersToClose((oldState) => new Set([...oldState, id]));\n  }, []);\n\n  const onSnackbarContainerClosed = React.useCallback(\n    (id: string) => {\n      setSnackbarsWrappersToClose((oldState) => {\n        oldState.delete(id);\n        return new Set(oldState);\n      });\n      onSnackbarContainerClosedProp(id);\n    },\n    [onSnackbarContainerClosedProp],\n  );\n\n  const contextValue: SnackbarsContainerContextData = React.useMemo(\n    () => ({\n      isInsideContainer: true,\n      onClosed,\n      onOpen: onSnackbarOpen,\n    }),\n    [onClosed, onSnackbarOpen],\n  );\n\n  const containerStyles: CSSCustomProperties = {\n    '--vkui_internal--snackbars_container_offset_y_start': resolveOffset(offsetYStart),\n    '--vkui_internal--snackbars_container_offset_y_end': resolveOffset(offsetYEnd),\n    ...(zIndex !== undefined && { zIndex }),\n  };\n\n  return (\n    <SnackbarsContainerContext.Provider value={contextValue}>\n      <Flex\n        className={classNames(styles.host, placementClassNames[placement])}\n        style={containerStyles}\n      >\n        {snackbars.map((snackbar) => (\n          <SnackbarAnimatedWrapper\n            key={snackbar.id}\n            snackbarItem={snackbar}\n            onClosed={onSnackbarContainerClosed}\n            close={snackbarsWrappersToClose.has(snackbar.id)}\n            placement={placement.startsWith('top') ? 'top' : 'bottom'}\n          />\n        ))}\n      </Flex>\n    </SnackbarsContainerContext.Provider>\n  );\n};\n"],"names":["React","classNames","Flex","SnackbarAnimatedWrapper","SnackbarsContainerContext","placementClassNames","resolveOffset","offset","SnackbarsContainer","snackbars","placement","onSnackbarOpen","onSnackbarContainerClosed","onSnackbarContainerClosedProp","offsetYStart","offsetYEnd","zIndex","snackbarsWrappersToClose","setSnackbarsWrappersToClose","useState","Set","onClosed","useCallback","id","oldState","delete","contextValue","useMemo","isInsideContainer","onOpen","containerStyles","undefined","Provider","value","className","style","map","snackbar","snackbarItem","close","has","startsWith"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,QAAQ,mCAAgC;AAIrD,SAASC,uBAAuB,QAAQ,+BAA4B;AACpE,SACEC,yBAAyB,QAEpB,iCAA8B;AAYrC,MAAMC,sBAAsB;IAC1B,WAAW;IACX,SAAS;IACT,KAAK;IACL,cAAc;IACd,YAAY;IACZ,QAAQ;AACV;AAEA,MAAMC,gBAAgB,CAACC;IACrB,IAAI,OAAOA,WAAW,aAAa;QACjC,OAAO;IACT;IACA,OAAO,OAAOA,WAAW,WAAW,GAAGA,OAAO,EAAE,CAAC,GAAGA;AACtD;AAEA,OAAO,MAAMC,qBAAwD,CAAC,EACpEC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,2BAA2BC,6BAA6B,EACxDC,YAAY,EACZC,UAAU,EACVC,MAAM,EACP;IACC,MAAM,CAACC,0BAA0BC,4BAA4B,GAAGlB,MAAMmB,QAAQ,CAC5E,IAAIC;IAEN,MAAMC,WAAWrB,MAAMsB,WAAW,CAAC,CAACC;QAClCL,4BAA4B,CAACM,WAAa,IAAIJ,IAAI;mBAAII;gBAAUD;aAAG;IACrE,GAAG,EAAE;IAEL,MAAMX,4BAA4BZ,MAAMsB,WAAW,CACjD,CAACC;QACCL,4BAA4B,CAACM;YAC3BA,SAASC,MAAM,CAACF;YAChB,OAAO,IAAIH,IAAII;QACjB;QACAX,8BAA8BU;IAChC,GACA;QAACV;KAA8B;IAGjC,MAAMa,eAA8C1B,MAAM2B,OAAO,CAC/D,IAAO,CAAA;YACLC,mBAAmB;YACnBP;YACAQ,QAAQlB;QACV,CAAA,GACA;QAACU;QAAUV;KAAe;IAG5B,MAAMmB,kBAAuC;QAC3C,uDAAuDxB,cAAcQ;QACrE,qDAAqDR,cAAcS;QACnE,GAAIC,WAAWe,aAAa;YAAEf;QAAO,CAAC;IACxC;IAEA,qBACE,KAACZ,0BAA0B4B,QAAQ;QAACC,OAAOP;kBACzC,cAAA,KAACxB;YACCgC,WAAWjC,mCAAwBI,mBAAmB,CAACK,UAAU;YACjEyB,OAAOL;sBAENrB,UAAU2B,GAAG,CAAC,CAACC,yBACd,KAAClC;oBAECmC,cAAcD;oBACdhB,UAAUT;oBACV2B,OAAOtB,yBAAyBuB,GAAG,CAACH,SAASd,EAAE;oBAC/Cb,WAAWA,UAAU+B,UAAU,CAAC,SAAS,QAAQ;mBAJ5CJ,SAASd,EAAE;;;AAU5B,EAAE"}