@vkontakte/vkui 7.0.0-dev-efd91c.0 → 7.0.0-dev-efd91c.2

package/dist/cssm/context/ModalContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+/** @private */ export const ModalContext = /*#__PURE__*/ createContext(null);
+/** @private */ export const useModalContext = ()=>{
+    const id = useContext(ModalContext);
+    return id === null ? {
+        id
+    } : {
+        id,
+        labelId: `${id}-label`
+    };
+};
+
+//# sourceMappingURL=ModalContext.js.map

package/dist/cssm/context/ModalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/context/ModalContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/** @private */\nexport type ModalContextInterface = string;\n\n/** @private */\nexport const ModalContext = createContext<ModalContextInterface | null>(null);\n\n/** @private */\nexport type UseModalContextResult =\n  | { id: null; labelId?: undefined }\n  | { id: string; labelId: string };\n\n/** @private */\nexport const useModalContext = (): UseModalContextResult => {\n  const id = useContext(ModalContext);\n  return id === null ? { id } : { id, labelId: `${id}-label` };\n};\n"],"names":["createContext","useContext","ModalContext","useModalContext","id","labelId"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAKlD,aAAa,GACb,OAAO,MAAMC,6BAAeF,cAA4C,MAAM;AAO9E,aAAa,GACb,OAAO,MAAMG,kBAAkB;IAC7B,MAAMC,KAAKH,WAAWC;IACtB,OAAOE,OAAO,OAAO;QAAEA;IAAG,IAAI;QAAEA;QAAIC,SAAS,GAAGD,GAAG,MAAM,CAAC;IAAC;AAC7D,EAAE"}

package/dist/cssm/helpers/range.js

@@ -19,5 +19,8 @@
     }
     return range(from, to, step);
 }
+export function inRange(number, from, to) {
+    return number >= from && number <= to;
+}
 
 //# sourceMappingURL=range.js.map

package/dist/cssm/helpers/range.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/helpers/range.ts"],"sourcesContent":["/**\n * Генерирует массив с диапазоном чисел.\n */\nexport function range(from: number, to: number, step = 1): number[] {\n  const direction = from < to ? 1 : -1;\n  const distance = Math.abs(from - to) + 1;\n  const arrayLength = Math.ceil(distance / step);\n\n  const arr = Array<number>(arrayLength);\n  for (let index = 0; index < arr.length; index++) {\n    arr[index] = from + index * step * direction;\n  }\n\n  return arr;\n}\n/**\n * Генерирует массив с диапазоном чисел в порядке возрастания.\n * Если `from` меньше `to`, вернется пустой массив.\n */\nexport function rangeIncrement(from: number, to: number, step = 1): number[] {\n  if (from > to) {\n    return [];\n  }\n\n  return range(from, to, step);\n}\n"],"names":["range","from","to","step","direction","distance","Math","abs","arrayLength","ceil","arr","Array","index","length","rangeIncrement"],"mappings":"AAAA;;CAEC,GACD,OAAO,SAASA,MAAMC,IAAY,EAAEC,EAAU,EAAEC,OAAO,CAAC;IACtD,MAAMC,YAAYH,OAAOC,KAAK,IAAI,CAAC;IACnC,MAAMG,WAAWC,KAAKC,GAAG,CAACN,OAAOC,MAAM;IACvC,MAAMM,cAAcF,KAAKG,IAAI,CAACJ,WAAWF;IAEzC,MAAMO,MAAMC,MAAcH;IAC1B,IAAK,IAAII,QAAQ,GAAGA,QAAQF,IAAIG,MAAM,EAAED,QAAS;QAC/CF,GAAG,CAACE,MAAM,GAAGX,OAAOW,QAAQT,OAAOC;IACrC;IAEA,OAAOM;AACT;AACA;;;CAGC,GACD,OAAO,SAASI,eAAeb,IAAY,EAAEC,EAAU,EAAEC,OAAO,CAAC;IAC/D,IAAIF,OAAOC,IAAI;QACb,OAAO,EAAE;IACX;IAEA,OAAOF,MAAMC,MAAMC,IAAIC;AACzB"}
+{"version":3,"sources":["../../../src/helpers/range.ts"],"sourcesContent":["/**\n * Генерирует массив с диапазоном чисел.\n */\nexport function range(from: number, to: number, step = 1): number[] {\n  const direction = from < to ? 1 : -1;\n  const distance = Math.abs(from - to) + 1;\n  const arrayLength = Math.ceil(distance / step);\n\n  const arr = Array<number>(arrayLength);\n  for (let index = 0; index < arr.length; index++) {\n    arr[index] = from + index * step * direction;\n  }\n\n  return arr;\n}\n/**\n * Генерирует массив с диапазоном чисел в порядке возрастания.\n * Если `from` меньше `to`, вернется пустой массив.\n */\nexport function rangeIncrement(from: number, to: number, step = 1): number[] {\n  if (from > to) {\n    return [];\n  }\n\n  return range(from, to, step);\n}\n\nexport function inRange(number: number, from: number, to: number) {\n  return number >= from && number <= to;\n}\n"],"names":["range","from","to","step","direction","distance","Math","abs","arrayLength","ceil","arr","Array","index","length","rangeIncrement","inRange","number"],"mappings":"AAAA;;CAEC,GACD,OAAO,SAASA,MAAMC,IAAY,EAAEC,EAAU,EAAEC,OAAO,CAAC;IACtD,MAAMC,YAAYH,OAAOC,KAAK,IAAI,CAAC;IACnC,MAAMG,WAAWC,KAAKC,GAAG,CAACN,OAAOC,MAAM;IACvC,MAAMM,cAAcF,KAAKG,IAAI,CAACJ,WAAWF;IAEzC,MAAMO,MAAMC,MAAcH;IAC1B,IAAK,IAAII,QAAQ,GAAGA,QAAQF,IAAIG,MAAM,EAAED,QAAS;QAC/CF,GAAG,CAACE,MAAM,GAAGX,OAAOW,QAAQT,OAAOC;IACrC;IAEA,OAAOM;AACT;AACA;;;CAGC,GACD,OAAO,SAASI,eAAeb,IAAY,EAAEC,EAAU,EAAEC,OAAO,CAAC;IAC/D,IAAIF,OAAOC,IAAI;QACb,OAAO,EAAE;IACX;IAEA,OAAOF,MAAMC,MAAMC,IAAIC;AACzB;AAEA,OAAO,SAASY,QAAQC,MAAc,EAAEf,IAAY,EAAEC,EAAU;IAC9D,OAAOc,UAAUf,QAAQe,UAAUd;AACrC"}

package/dist/cssm/hooks/useObjectMemo.js

@@ -1,7 +1,11 @@
 import * as React from "react";
 import { isEqual } from "@vkontakte/vkjs";
-export function useObjectMemo(object) {
-    const cache = React.useRef(object);
+/**
+ * @deprecated используйте React.useMemo
+ */ export function useObjectMemo(object) {
+    /**
+   * Запись и чтение во время рендеринга в useRef запрещена
+   */ const cache = React.useRef(object);
     if (!isEqual(cache.current, object)) {
         cache.current = object;
     }

package/dist/cssm/hooks/useObjectMemo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useObjectMemo.ts"],"sourcesContent":["import * as React from 'react';\nimport { isEqual } from '@vkontakte/vkjs';\n\nexport function useObjectMemo<T>(object: T): T {\n  const cache = React.useRef(object);\n  if (!isEqual(cache.current, object)) {\n    cache.current = object;\n  }\n  return cache.current;\n}\n"],"names":["React","isEqual","useObjectMemo","object","cache","useRef","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,kBAAkB;AAE1C,OAAO,SAASC,cAAiBC,MAAS;IACxC,MAAMC,QAAQJ,MAAMK,MAAM,CAACF;IAC3B,IAAI,CAACF,QAAQG,MAAME,OAAO,EAAEH,SAAS;QACnCC,MAAME,OAAO,GAAGH;IAClB;IACA,OAAOC,MAAME,OAAO;AACtB"}
+{"version":3,"sources":["../../../src/hooks/useObjectMemo.ts"],"sourcesContent":["import * as React from 'react';\nimport { isEqual } from '@vkontakte/vkjs';\n\n/**\n * @deprecated используйте React.useMemo\n */\nexport function useObjectMemo<T>(object: T): T {\n  /**\n   * Запись и чтение во время рендеринга в useRef запрещена\n   */\n  const cache = React.useRef(object);\n  if (!isEqual(cache.current, object)) {\n    cache.current = object;\n  }\n  return cache.current;\n}\n"],"names":["React","isEqual","useObjectMemo","object","cache","useRef","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,kBAAkB;AAE1C;;CAEC,GACD,OAAO,SAASC,cAAiBC,MAAS;IACxC;;GAEC,GACD,MAAMC,QAAQJ,MAAMK,MAAM,CAACF;IAC3B,IAAI,CAACF,QAAQG,MAAME,OAAO,EAAEH,SAAS;QACnCC,MAAME,OAAO,GAAGH;IAClB;IACA,OAAOC,MAAME,OAAO;AACtB"}

package/dist/cssm/hooks/usePrevious.js

@@ -1,10 +1,17 @@
 import * as React from "react";
-export function usePrevious(value) {
+/**
+ * @deprecated постарайтесь избавится от этого хука или используйте `useStateWithPrev`
+ */ export function usePrevious(value) {
     const ref = React.useRef();
     React.useEffect(()=>{
         ref.current = value;
     });
-    return ref.current;
+    /**
+   * ref.current нельзя читать во время рендеринга
+   *
+   * - see https://react.dev/reference/react/useRef
+   * - also https://react.dev/reference/react/useState#storing-information-from-previous-renders
+   */ return ref.current;
 }
 
 //# sourceMappingURL=usePrevious.js.map

package/dist/cssm/hooks/usePrevious.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/usePrevious.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function usePrevious<T>(value: T): T | undefined {\n  const ref = React.useRef<T | undefined>();\n\n  React.useEffect(() => {\n    ref.current = value;\n  });\n\n  return ref.current;\n}\n"],"names":["React","usePrevious","value","ref","useRef","useEffect","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,SAASC,YAAeC,KAAQ;IACrC,MAAMC,MAAMH,MAAMI,MAAM;IAExBJ,MAAMK,SAAS,CAAC;QACdF,IAAIG,OAAO,GAAGJ;IAChB;IAEA,OAAOC,IAAIG,OAAO;AACpB"}
+{"version":3,"sources":["../../../src/hooks/usePrevious.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @deprecated постарайтесь избавится от этого хука или используйте `useStateWithPrev`\n */\nexport function usePrevious<T>(value: T): T | undefined {\n  const ref = React.useRef<T | undefined>();\n\n  React.useEffect(() => {\n    ref.current = value;\n  });\n\n  /**\n   * ref.current нельзя читать во время рендеринга\n   *\n   * - see https://react.dev/reference/react/useRef\n   * - also https://react.dev/reference/react/useState#storing-information-from-previous-renders\n   */\n  return ref.current;\n}\n"],"names":["React","usePrevious","value","ref","useRef","useEffect","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B;;CAEC,GACD,OAAO,SAASC,YAAeC,KAAQ;IACrC,MAAMC,MAAMH,MAAMI,MAAM;IAExBJ,MAAMK,SAAS,CAAC;QACdF,IAAIG,OAAO,GAAGJ;IAChB;IAEA;;;;;GAKC,GACD,OAAOC,IAAIG,OAAO;AACpB"}

package/dist/cssm/hooks/useStableCallback.js

@@ -5,7 +5,7 @@ export function useStableCallback(fn) {
     useIsomorphicLayoutEffect(()=>{
         ref.current = fn;
     });
-    return React.useRef((...args)=>(0, ref.current)(...args)).current;
+    return React.useCallback((...args)=>(0, ref.current)(...args), []);
 }
 
 //# sourceMappingURL=useStableCallback.js.map

package/dist/cssm/hooks/useStableCallback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useStableCallback.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\n/**\n * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nexport function useStableCallback<\n  Fn extends (...args: any[]) => any = (...args: unknown[]) => unknown,\n>(fn: Fn): Fn;\nexport function useStableCallback<Args extends unknown[], Return>(\n  fn: (...args: Args) => Return,\n): (...args: Args) => Return;\nexport function useStableCallback<Args extends unknown[], Return>(\n  fn: (...args: Args) => Return,\n): (...args: Args) => Return {\n  const ref = React.useRef(fn);\n  useIsomorphicLayoutEffect(() => {\n    ref.current = fn;\n  });\n  return React.useRef((...args: Args) => (0, ref.current)(...args)).current;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useStableCallback","fn","ref","useRef","current","args"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAmC;AAW7E,OAAO,SAASC,kBACdC,EAA6B;IAE7B,MAAMC,MAAMJ,MAAMK,MAAM,CAACF;IACzBF,0BAA0B;QACxBG,IAAIE,OAAO,GAAGH;IAChB;IACA,OAAOH,MAAMK,MAAM,CAAC,CAAC,GAAGE,OAAe,AAAC,CAAA,GAAGH,IAAIE,OAAO,AAAD,KAAMC,OAAOD,OAAO;AAC3E"}
+{"version":3,"sources":["../../../src/hooks/useStableCallback.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\n/**\n * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nexport function useStableCallback<\n  Fn extends (...args: any[]) => any = (...args: unknown[]) => unknown,\n>(fn: Fn): Fn;\nexport function useStableCallback<Args extends unknown[], Return>(\n  fn: (...args: Args) => Return,\n): (...args: Args) => Return;\nexport function useStableCallback<Args extends unknown[], Return>(\n  fn: (...args: Args) => Return,\n): (...args: Args) => Return {\n  const ref = React.useRef(fn);\n  useIsomorphicLayoutEffect(() => {\n    ref.current = fn;\n  });\n  return React.useCallback((...args: Args) => (0, ref.current)(...args), []);\n}\n"],"names":["React","useIsomorphicLayoutEffect","useStableCallback","fn","ref","useRef","current","useCallback","args"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAmC;AAW7E,OAAO,SAASC,kBACdC,EAA6B;IAE7B,MAAMC,MAAMJ,MAAMK,MAAM,CAACF;IACzBF,0BAA0B;QACxBG,IAAIE,OAAO,GAAGH;IAChB;IACA,OAAOH,MAAMO,WAAW,CAAC,CAAC,GAAGC,OAAe,AAAC,CAAA,GAAGJ,IAAIE,OAAO,AAAD,KAAME,OAAO,EAAE;AAC3E"}

package/dist/cssm/hooks/useStateWithPrev.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+function basicStateInitializer(initialArg) {
+    return initialArg instanceof Function ? initialArg() : initialArg;
+}
+function initializer(initialArg) {
+    const initialState = basicStateInitializer(initialArg);
+    return [
+        initialState,
+        undefined
+    ];
+}
+function basicStateReducer(state, action) {
+    return action instanceof Function ? action(state) : action;
+}
+function reducer([prevState], action) {
+    const newState = basicStateReducer(prevState, action);
+    return [
+        newState,
+        prevState
+    ];
+}
+/**
+ * Возвращает значение с текущим и предыдущим состоянием
+ *
+ * # Пример
+ *
+ * ```ts
+ * const [[count, prevCount], setCount] = useStateWithPrev(initialState);
+ * ```
+ */ export function useStateWithPrev(initialState) {
+    return React.useReducer(reducer, undefined, ()=>initializer(initialState));
+}
+
+//# sourceMappingURL=useStateWithPrev.js.map

package/dist/cssm/hooks/useStateWithPrev.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useStateWithPrev.ts"],"sourcesContent":["import * as React from 'react';\n\nfunction basicStateInitializer<S>(initialArg: S | (() => S)): S {\n  return initialArg instanceof Function ? initialArg() : initialArg;\n}\n\nfunction initializer<T>(initialArg: T | (() => T)): [T, T | undefined] {\n  const initialState = basicStateInitializer(initialArg);\n\n  return [initialState, undefined];\n}\n\nfunction basicStateReducer<S>(state: S, action: React.SetStateAction<S>): S {\n  return action instanceof Function ? action(state) : action;\n}\n\nfunction reducer<T>(\n  [prevState]: [T, T | undefined],\n  action: React.SetStateAction<T>,\n): [T, T | undefined] {\n  const newState = basicStateReducer(prevState, action);\n\n  return [newState, prevState];\n}\n\n/**\n * Возвращает значение с текущим и предыдущим состоянием\n *\n * # Пример\n *\n * ```ts\n * const [[count, prevCount], setCount] = useStateWithPrev(initialState);\n * ```\n */\nexport function useStateWithPrev<T>(\n  initialState: T | (() => T),\n): [[T, T | undefined], React.Dispatch<React.SetStateAction<T>>] {\n  return React.useReducer<React.Reducer<[T, T | undefined], React.SetStateAction<T>>, undefined>(\n    reducer,\n    undefined,\n    () => initializer(initialState),\n  );\n}\n"],"names":["React","basicStateInitializer","initialArg","Function","initializer","initialState","undefined","basicStateReducer","state","action","reducer","prevState","newState","useStateWithPrev","useReducer"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAyBC,UAAyB;IACzD,OAAOA,sBAAsBC,WAAWD,eAAeA;AACzD;AAEA,SAASE,YAAeF,UAAyB;IAC/C,MAAMG,eAAeJ,sBAAsBC;IAE3C,OAAO;QAACG;QAAcC;KAAU;AAClC;AAEA,SAASC,kBAAqBC,KAAQ,EAAEC,MAA+B;IACrE,OAAOA,kBAAkBN,WAAWM,OAAOD,SAASC;AACtD;AAEA,SAASC,QACP,CAACC,UAA8B,EAC/BF,MAA+B;IAE/B,MAAMG,WAAWL,kBAAkBI,WAAWF;IAE9C,OAAO;QAACG;QAAUD;KAAU;AAC9B;AAEA;;;;;;;;CAQC,GACD,OAAO,SAASE,iBACdR,YAA2B;IAE3B,OAAOL,MAAMc,UAAU,CACrBJ,SACAJ,WACA,IAAMF,YAAYC;AAEtB"}

package/dist/cssm/hooks/useSyncHTMLWithBaseVKUIClasses.js

@@ -0,0 +1,23 @@
+import { getParentElement } from "../components/AppRoot/helpers.js";
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
+export function useSyncHTMLWithBaseVKUIClasses({ appRootRef, mode, enable }) {
+    useIsomorphicLayoutEffect(()=>{
+        if (!enable) {
+            return;
+        }
+        const htmlElement = appRootRef.current?.ownerDocument.documentElement;
+        const parentElement = getParentElement(appRootRef.current);
+        if (mode === 'full') {
+            /* eslint-disable-next-line no-restricted-properties */ htmlElement?.classList.add('vkui');
+        }
+        /* eslint-disable-next-line no-restricted-properties */ parentElement?.classList.add('vkui__root');
+        return ()=>{
+            if (mode === 'full') {
+                /* eslint-disable-next-line no-restricted-properties */ htmlElement?.classList.remove('vkui');
+            }
+            /* eslint-disable-next-line no-restricted-properties */ parentElement?.classList.remove('vkui__root');
+        };
+    }, []);
+}
+
+//# sourceMappingURL=useSyncHTMLWithBaseVKUIClasses.js.map

package/dist/cssm/hooks/useSyncHTMLWithBaseVKUIClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useSyncHTMLWithBaseVKUIClasses.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getParentElement } from '../components/AppRoot/helpers';\nimport { type AppRootMode } from '../components/AppRoot/types';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport function useSyncHTMLWithBaseVKUIClasses({\n  appRootRef,\n  mode,\n  enable,\n}: {\n  appRootRef: React.RefObject<HTMLElement>;\n  mode: AppRootMode;\n  enable: boolean;\n}) {\n  useIsomorphicLayoutEffect(() => {\n    if (!enable) {\n      return;\n    }\n\n    const htmlElement = appRootRef.current?.ownerDocument.documentElement;\n    const parentElement = getParentElement(appRootRef.current);\n\n    if (mode === 'full') {\n      /* eslint-disable-next-line no-restricted-properties */\n      htmlElement?.classList.add('vkui');\n    }\n    /* eslint-disable-next-line no-restricted-properties */\n    parentElement?.classList.add('vkui__root');\n\n    return () => {\n      if (mode === 'full') {\n        /* eslint-disable-next-line no-restricted-properties */\n        htmlElement?.classList.remove('vkui');\n      }\n      /* eslint-disable-next-line no-restricted-properties */\n      parentElement?.classList.remove('vkui__root');\n    };\n  }, []);\n}\n"],"names":["getParentElement","useIsomorphicLayoutEffect","useSyncHTMLWithBaseVKUIClasses","appRootRef","mode","enable","htmlElement","current","ownerDocument","documentElement","parentElement","classList","add","remove"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,mCAAgC;AAEjE,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,OAAO,SAASC,+BAA+B,EAC7CC,UAAU,EACVC,IAAI,EACJC,MAAM,EAKP;IACCJ,0BAA0B;QACxB,IAAI,CAACI,QAAQ;YACX;QACF;QAEA,MAAMC,cAAcH,WAAWI,OAAO,EAAEC,cAAcC;QACtD,MAAMC,gBAAgBV,iBAAiBG,WAAWI,OAAO;QAEzD,IAAIH,SAAS,QAAQ;YACnB,qDAAqD,GACrDE,aAAaK,UAAUC,IAAI;QAC7B;QACA,qDAAqD,GACrDF,eAAeC,UAAUC,IAAI;QAE7B,OAAO;YACL,IAAIR,SAAS,QAAQ;gBACnB,qDAAqD,GACrDE,aAAaK,UAAUE,OAAO;YAChC;YACA,qDAAqD,GACrDH,eAAeC,UAAUE,OAAO;QAClC;IACF,GAAG,EAAE;AACP"}

package/dist/cssm/hooks/useSyncHTMLWithTokens.js

@@ -0,0 +1,19 @@
+import { useTokensClassName } from "../lib/tokens/useTokenClassName.js";
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
+export function useSyncHTMLWithTokens({ appRootRef, enable }) {
+    const tokenClassName = useTokensClassName();
+    useIsomorphicLayoutEffect(()=>{
+        if (!enable) {
+            return;
+        }
+        const htmlElement = appRootRef.current?.ownerDocument.documentElement;
+        /* eslint-disable-next-line no-restricted-properties */ htmlElement?.classList.add(tokenClassName);
+        return ()=>{
+            /* eslint-disable-next-line no-restricted-properties */ htmlElement?.classList.remove(tokenClassName);
+        };
+    }, [
+        tokenClassName
+    ]);
+}
+
+//# sourceMappingURL=useSyncHTMLWithTokens.js.map

package/dist/cssm/hooks/useSyncHTMLWithTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useSyncHTMLWithTokens.ts"],"sourcesContent":["import { useTokensClassName } from '../lib/tokens/useTokenClassName';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport function useSyncHTMLWithTokens({\n  appRootRef,\n  enable,\n}: {\n  appRootRef: React.RefObject<HTMLElement>;\n  enable: boolean;\n}) {\n  const tokenClassName = useTokensClassName();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!enable) {\n      return;\n    }\n\n    const htmlElement = appRootRef.current?.ownerDocument.documentElement;\n    /* eslint-disable-next-line no-restricted-properties */\n    htmlElement?.classList.add(tokenClassName);\n\n    return () => {\n      /* eslint-disable-next-line no-restricted-properties */\n      htmlElement?.classList.remove(tokenClassName);\n    };\n  }, [tokenClassName]);\n}\n"],"names":["useTokensClassName","useIsomorphicLayoutEffect","useSyncHTMLWithTokens","appRootRef","enable","tokenClassName","htmlElement","current","ownerDocument","documentElement","classList","add","remove"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,qCAAkC;AACrE,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,OAAO,SAASC,sBAAsB,EACpCC,UAAU,EACVC,MAAM,EAIP;IACC,MAAMC,iBAAiBL;IAEvBC,0BAA0B;QACxB,IAAI,CAACG,QAAQ;YACX;QACF;QAEA,MAAME,cAAcH,WAAWI,OAAO,EAAEC,cAAcC;QACtD,qDAAqD,GACrDH,aAAaI,UAAUC,IAAIN;QAE3B,OAAO;YACL,qDAAqD,GACrDC,aAAaI,UAAUE,OAAOP;QAChC;IACF,GAAG;QAACA;KAAe;AACrB"}

package/dist/cssm/hooks/useVirtualKeyboardState.js

@@ -0,0 +1,134 @@
+import { useEffect, useRef, useState } from "react";
+import { debounce, throttle } from "@vkontakte/vkjs";
+import { getVisualViewport, isHTMLContentEditableElement, useDOM } from "../lib/dom.js";
+/**
+ * > см. [Неудобно работать с клавиатурой в ModalPage на iOS #3792](https://github.com/VKCOM/VKUI/discussions/3792)
+ *
+ * Для реализации модальных окон для тач-устройств, мы вынуждены отслеживать открытие виртуальной
+ * клавиатуры. По состоянию `opened` компоненты должны временно блокировать дальнейшее взаимодействие
+ * с ними. Например, отключить закрытие по свайпу, чтобы не мешать пользователю работать с полями
+ * ввода.
+ *
+ * Помимо этого в **Safari** и в **Chrome Android** нам нужно отслеживать прокрутку области видимости
+ * пользователем, т.к. в упомянутых браузерах, виртуальная клавиатура поднимает контент вверх
+ * не изменяя её высоту. Из-за этого появляется возможность прокручивать `window`, что визуально
+ * выглядит плохо. В хуке мы ловим фокус на поле ввода и далее, если это тач-устройство, то
+ * отлавливаем события прокрутки на `window`, чтобы сохранять текущую её позицию через `scrollTo(x, y)`.
+ *
+ * **Troubleshooting**
+ *
+ * - в **Safari** и в **Chrome Android** шапка будет выдвигаться вверх – хаки с выставлением `offsetTop`
+ *   из `VisualViewport` порождают reflow/repaint и прыгания контента;
+ * - в **Safari** изменение высоты виртуальной клавиатуры, например, на выбор эмодзи, не поднимет
+ *   `VisualViewport` из-за чего клавиатура может частично перекрыть элементы интерфейса.
+ *
+ * **Полезные ссылки**
+ *
+ * - [The Eccentric Ways of iOS Safari with the Keyboard](https://web.archive.org/web/20240920081850/https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d?gi=5411141a13e0)
+ * - [Dealing with the visual viewport](https://web.archive.org/web/20240920082109/https://rdavis.io/articles/dealing-with-the-visual-viewport)
+ * - [How to get the document height in iOS Safari when the on-screen keyboard is open](https://web.archive.org/web/20240920082743/https://martijnhols.nl/gists/how-to-get-document-height-ios-safari-osk)
+ */ export function useVirtualKeyboardState(enabled = true) {
+    const { window, document } = useDOM();
+    const [focusedEl, setFocusedEl] = useState(null);
+    const [keyboardOpened, setKeyboardOpened] = useState(false);
+    const prevVisualViewportRef = useRef(null);
+    useEffect(function handleFocusedEl() {
+        if (!enabled || !window || !document) {
+            return;
+        }
+        const handleFocus = (event)=>{
+            const activeElement = event === true ? document.activeElement : event.target;
+            if (isHTMLContentEditableElement(activeElement)) {
+                const patchedEvent = event === true ? {
+                    type: 'focusin'
+                } : event;
+                switch(patchedEvent.type){
+                    case 'focusin':
+                        prevVisualViewportRef.current = getVisualViewport(window);
+                        setFocusedEl(activeElement);
+                        break;
+                    case 'focusout':
+                        prevVisualViewportRef.current = null;
+                        setKeyboardOpened(false);
+                        setFocusedEl(null);
+                        break;
+                }
+            }
+        };
+        /**
+       * У полей с autoFocus не отлавливаются события `focus`, для этого вызываем обработчик
+       * вручную, чтобы иметь хоть какое-то понимание происходящего.
+       */ handleFocus(true);
+        const eventOptions = {
+            passive: true,
+            capture: false
+        };
+        document.addEventListener('focusin', handleFocus, eventOptions);
+        document.addEventListener('focusout', handleFocus, eventOptions);
+        return ()=>{
+            prevVisualViewportRef.current = null;
+            document.removeEventListener('focusin', handleFocus, eventOptions);
+            document.removeEventListener('focusout', handleFocus, eventOptions);
+        };
+    }, [
+        enabled,
+        window,
+        document
+    ]);
+    useEffect(function handleVirtualKeyboardOpened() {
+        if (!focusedEl || !window) {
+            return;
+        }
+        const handleResize = debounce(()=>{
+            /* istanbul ignore if: нереалистичный кейс, проверяем в угоду TypeScript */ if (prevVisualViewportRef.current === null) {
+                return;
+            }
+            const nextVisualViewport = getVisualViewport(window);
+            const { offsetTop: prevOffsetTop, height: prevHeight } = prevVisualViewportRef.current;
+            const { offsetTop: nextOffsetTop, height: nextHeight } = nextVisualViewport;
+            if (prevOffsetTop !== nextOffsetTop || prevHeight !== nextHeight) {
+                setKeyboardOpened(true);
+                prevVisualViewportRef.current = nextVisualViewport;
+            }
+        }, 100);
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', handleResize);
+        } else {
+            window.addEventListener('resize', handleResize);
+        }
+        return function dispose() {
+            if (window.visualViewport) {
+                window.visualViewport.removeEventListener('resize', handleResize);
+            } else {
+                window.removeEventListener('resize', handleResize);
+            }
+        };
+    }, [
+        focusedEl,
+        window
+    ]);
+    useEffect(function preventWindowScrollIfKeyboardOpened() {
+        if (!keyboardOpened || !window) {
+            return;
+        }
+        const prevent = throttle(()=>{
+            if (prevVisualViewportRef.current) {
+                window.scrollTo(0, prevVisualViewportRef.current.offsetTop);
+            }
+        }, 100);
+        window.addEventListener('scroll', prevent, {
+            passive: true
+        });
+        return function dispose() {
+            window.removeEventListener('scroll', prevent);
+        };
+    }, [
+        keyboardOpened,
+        window
+    ]);
+    return {
+        opened: keyboardOpened
+    };
+}
+
+//# sourceMappingURL=useVirtualKeyboardState.js.map

package/dist/cssm/hooks/useVirtualKeyboardState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useVirtualKeyboardState.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { debounce, throttle } from '@vkontakte/vkjs';\nimport {\n  getVisualViewport,\n  isHTMLContentEditableElement,\n  useDOM,\n  type VisualViewport,\n} from '../lib/dom';\n\nexport type VirtualKeyboardState = { opened: boolean };\n\n/**\n * > см. [Неудобно работать с клавиатурой в ModalPage на iOS #3792](https://github.com/VKCOM/VKUI/discussions/3792)\n *\n * Для реализации модальных окон для тач-устройств, мы вынуждены отслеживать открытие виртуальной\n * клавиатуры. По состоянию `opened` компоненты должны временно блокировать дальнейшее взаимодействие\n * с ними. Например, отключить закрытие по свайпу, чтобы не мешать пользователю работать с полями\n * ввода.\n *\n * Помимо этого в **Safari** и в **Chrome Android** нам нужно отслеживать прокрутку области видимости\n * пользователем, т.к. в упомянутых браузерах, виртуальная клавиатура поднимает контент вверх\n * не изменяя её высоту. Из-за этого появляется возможность прокручивать `window`, что визуально\n * выглядит плохо. В хуке мы ловим фокус на поле ввода и далее, если это тач-устройство, то\n * отлавливаем события прокрутки на `window`, чтобы сохранять текущую её позицию через `scrollTo(x, y)`.\n *\n * **Troubleshooting**\n *\n * - в **Safari** и в **Chrome Android** шапка будет выдвигаться вверх – хаки с выставлением `offsetTop`\n *   из `VisualViewport` порождают reflow/repaint и прыгания контента;\n * - в **Safari** изменение высоты виртуальной клавиатуры, например, на выбор эмодзи, не поднимет\n *   `VisualViewport` из-за чего клавиатура может частично перекрыть элементы интерфейса.\n *\n * **Полезные ссылки**\n *\n * - [The Eccentric Ways of iOS Safari with the Keyboard](https://web.archive.org/web/20240920081850/https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d?gi=5411141a13e0)\n * - [Dealing with the visual viewport](https://web.archive.org/web/20240920082109/https://rdavis.io/articles/dealing-with-the-visual-viewport)\n * - [How to get the document height in iOS Safari when the on-screen keyboard is open](https://web.archive.org/web/20240920082743/https://martijnhols.nl/gists/how-to-get-document-height-ios-safari-osk)\n */\nexport function useVirtualKeyboardState(enabled = true): VirtualKeyboardState {\n  const { window, document } = useDOM();\n\n  const [focusedEl, setFocusedEl] = useState<Element | null>(null);\n  const [keyboardOpened, setKeyboardOpened] = useState(false);\n\n  const prevVisualViewportRef = useRef<VisualViewport | null>(null);\n\n  useEffect(\n    function handleFocusedEl() {\n      if (!enabled || !window || !document) {\n        return;\n      }\n\n      const handleFocus = (event: FocusEvent | true) => {\n        const activeElement = event === true ? document.activeElement : (event.target as Element);\n\n        if (isHTMLContentEditableElement(activeElement)) {\n          const patchedEvent = event === true ? { type: 'focusin' } : event;\n          switch (patchedEvent.type) {\n            case 'focusin':\n              prevVisualViewportRef.current = getVisualViewport(window);\n              setFocusedEl(activeElement);\n              break;\n            case 'focusout':\n              prevVisualViewportRef.current = null;\n              setKeyboardOpened(false);\n              setFocusedEl(null);\n              break;\n          }\n        }\n      };\n\n      /**\n       * У полей с autoFocus не отлавливаются события `focus`, для этого вызываем обработчик\n       * вручную, чтобы иметь хоть какое-то понимание происходящего.\n       */\n      handleFocus(true);\n\n      const eventOptions = { passive: true, capture: false };\n      document.addEventListener('focusin', handleFocus, eventOptions);\n      document.addEventListener('focusout', handleFocus, eventOptions);\n\n      return () => {\n        prevVisualViewportRef.current = null;\n        document.removeEventListener('focusin', handleFocus, eventOptions);\n        document.removeEventListener('focusout', handleFocus, eventOptions);\n      };\n    },\n    [enabled, window, document],\n  );\n\n  useEffect(\n    function handleVirtualKeyboardOpened() {\n      if (!focusedEl || !window) {\n        return;\n      }\n\n      const handleResize = debounce(() => {\n        /* istanbul ignore if: нереалистичный кейс, проверяем в угоду TypeScript */\n        if (prevVisualViewportRef.current === null) {\n          return;\n        }\n\n        const nextVisualViewport = getVisualViewport(window);\n\n        const { offsetTop: prevOffsetTop, height: prevHeight } = prevVisualViewportRef.current;\n        const { offsetTop: nextOffsetTop, height: nextHeight } = nextVisualViewport;\n        if (prevOffsetTop !== nextOffsetTop || prevHeight !== nextHeight) {\n          setKeyboardOpened(true);\n          prevVisualViewportRef.current = nextVisualViewport;\n        }\n      }, 100);\n\n      if (window.visualViewport) {\n        window.visualViewport.addEventListener('resize', handleResize);\n      } else {\n        window.addEventListener('resize', handleResize);\n      }\n\n      return function dispose() {\n        if (window.visualViewport) {\n          window.visualViewport.removeEventListener('resize', handleResize);\n        } else {\n          window.removeEventListener('resize', handleResize);\n        }\n      };\n    },\n    [focusedEl, window],\n  );\n\n  useEffect(\n    function preventWindowScrollIfKeyboardOpened() {\n      if (!keyboardOpened || !window) {\n        return;\n      }\n\n      const prevent = throttle(() => {\n        if (prevVisualViewportRef.current) {\n          window.scrollTo(0, prevVisualViewportRef.current.offsetTop);\n        }\n      }, 100);\n\n      window.addEventListener('scroll', prevent, { passive: true });\n\n      return function dispose() {\n        window.removeEventListener('scroll', prevent);\n      };\n    },\n    [keyboardOpened, window],\n  );\n\n  return { opened: keyboardOpened };\n}\n"],"names":["useEffect","useRef","useState","debounce","throttle","getVisualViewport","isHTMLContentEditableElement","useDOM","useVirtualKeyboardState","enabled","window","document","focusedEl","setFocusedEl","keyboardOpened","setKeyboardOpened","prevVisualViewportRef","handleFocusedEl","handleFocus","event","activeElement","target","patchedEvent","type","current","eventOptions","passive","capture","addEventListener","removeEventListener","handleVirtualKeyboardOpened","handleResize","nextVisualViewport","offsetTop","prevOffsetTop","height","prevHeight","nextOffsetTop","nextHeight","visualViewport","dispose","preventWindowScrollIfKeyboardOpened","prevent","scrollTo","opened"],"mappings":"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"}

package/dist/cssm/index.js

@@ -59,9 +59,11 @@ export { Snackbar } from "./components/Snackbar/Snackbar.js";
 export { Tooltip } from "./components/Tooltip/Tooltip.js";
 /**
  * Modals
- */ export { ModalRoot } from "./components/ModalRoot/ModalRootAdaptive.js";
+ */ export { ModalRoot } from "./components/ModalRoot/ModalRoot.js";
 export { withModalRootContext } from "./components/ModalRoot/withModalRootContext.js";
 export { ModalRootContext } from "./components/ModalRoot/ModalRootContext.js";
+export { useModalRootContext } from "./components/ModalRoot/useModalRootContext.js";
+export { ModalPageContent } from "./components/ModalPageContent/ModalPageContent.js";
 export { ModalPage } from "./components/ModalPage/ModalPage.js";
 export { ModalPageHeader } from "./components/ModalPageHeader/ModalPageHeader.js";
 export { ModalCard } from "./components/ModalCard/ModalCard.js";
@@ -147,6 +149,8 @@ export { Skeleton } from "./components/Skeleton/Skeleton.js";
 /**
  * Helpers
  */ export { Div } from "./components/Div/Div.js";
+export { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_WIDTH, DEFAULT_ARROW_PADDING, DefaultIcon } from "./components/FloatingArrow/DefaultIcon.js";
+export { FloatingArrow } from "./components/FloatingArrow/FloatingArrow.js";
 export { Touch } from "./components/Touch/Touch.js";
 export { PanelSpinner } from "./components/PanelSpinner/PanelSpinner.js";
 export { PanelHeaderClose } from "./components/PanelHeaderClose/PanelHeaderClose.js";
@@ -184,7 +188,6 @@ export { useScrollLock } from "./components/AppRoot/ScrollContext.js";
 export { useNavTransition } from "./components/NavTransitionContext/NavTransitionContext.js";
 export { useNavDirection } from "./components/NavTransitionDirectionContext/NavTransitionDirectionContext.js";
 export { useNavId } from "./components/NavIdContext/useNavId.js";
-export { useModalRootContext } from "./components/ModalRoot/useModalRootContext.js";
 /**
  * Utils
  */ export { classNames } from "@vkontakte/vkjs";
@@ -200,6 +203,7 @@ export { Popper } from "./components/Popper/Popper.js";
 /**
  * Unstable
  */ export { ViewInfinite as unstable_ViewInfinite } from "./components/View/ViewInfinite.js";
+export { ModalPageFooter as unstable_ModalPageFooter } from "./components/ModalPageFooter/ModalPageFooter.js";
 import "./styles/common.css";
 
 //# sourceMappingURL=index.js.map