@vkontakte/vkui 8.1.3 → 8.2.0

package/dist/cssm/hooks/useKeyboardInputTracker.js

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { isKeyboardFocusingStarted } from "../lib/accessibility.js";
 import { useDOM } from "../lib/dom.js";
 import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
@@ -8,52 +7,60 @@ const EVENT_OPTIONS = {
     passive: true,
     capture: true
 };
-/**
- * Чтобы оптимизировать рендер, сохраняем в ref.
- *
- * В контекст можно передать через getter, подробнее в примере ниже.
- *
- * ```tsx
- * const keyboardInputTrackerRef = useKeyboardInputTracker();
- * <SomeContext.Provider value={{
- *  get keyboardInput() {
- *    return keyboardInputTrackerRef.current;
- *  }
- * }}>
- *  {children}
- * </SomeContext.Provider>
- * ```
- *
- * @private
- */ export function useKeyboardInputTracker() {
+let keyboardInputState = false;
+let mountedTrackers = 0;
+let detachListeners = null;
+const keyboardFocusingStartedRef = {
+    get current () {
+        return keyboardInputState;
+    }
+};
+const setKeyboardInputState = (nextValue)=>{
+    if (keyboardInputState !== nextValue) {
+        keyboardInputState = nextValue;
+    }
+};
+const attachKeyboardInputListeners = (document)=>{
+    const handleKeydown = (event)=>{
+        if (isKeyboardFocusingStarted(event)) {
+            setKeyboardInputState(true);
+        }
+    };
+    const handleCustomEnableKeyboardEvent = ()=>{
+        setKeyboardInputState(true);
+    };
+    const handleCustomDisableKeyboardEvent = ()=>{
+        setKeyboardInputState(false);
+    };
+    document.addEventListener('keydown', handleKeydown, EVENT_OPTIONS);
+    document.addEventListener(ENABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomEnableKeyboardEvent, EVENT_OPTIONS);
+    document.addEventListener(DISABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+    document.addEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+    document.addEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+    return ()=>{
+        document.removeEventListener('keydown', handleKeydown, EVENT_OPTIONS);
+        document.removeEventListener(ENABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomEnableKeyboardEvent, EVENT_OPTIONS);
+        document.removeEventListener(DISABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+        document.removeEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+        document.removeEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+    };
+};
+export function useKeyboardInputTracker() {
     const { document } = useDOM();
-    const keyboardFocusingStartedRef = React.useRef(false);
     useIsomorphicLayoutEffect(()=>{
         /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */ if (!document) {
             return;
         }
-        const handleKeydown = (event)=>{
-            if (isKeyboardFocusingStarted(event)) {
-                keyboardFocusingStartedRef.current = true;
-            }
-        };
-        const handleCustomEnableKeyboardEvent = ()=>{
-            keyboardFocusingStartedRef.current = true;
-        };
-        const handleCustomDisableKeyboardEvent = ()=>{
-            keyboardFocusingStartedRef.current = false;
-        };
-        document.addEventListener('keydown', handleKeydown, EVENT_OPTIONS);
-        document.addEventListener(ENABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomEnableKeyboardEvent, EVENT_OPTIONS);
-        document.addEventListener(DISABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
-        document.addEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
-        document.addEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+        mountedTrackers += 1;
+        if (!detachListeners) {
+            detachListeners = attachKeyboardInputListeners(document);
+        }
         return ()=>{
-            document.removeEventListener('keydown', handleKeydown, EVENT_OPTIONS);
-            document.removeEventListener(ENABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomEnableKeyboardEvent, EVENT_OPTIONS);
-            document.removeEventListener(DISABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
-            document.removeEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
-            document.removeEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+            mountedTrackers -= 1;
+            if (mountedTrackers === 0 && detachListeners) {
+                detachListeners();
+                detachListeners = null;
+            }
         };
     }, [
         document

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useKeyboardInputTracker.ts"],"sourcesContent":["import * as React from 'react';\nimport { isKeyboardFocusingStarted } from '../lib/accessibility';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport const ENABLE_KEYBOARD_INPUT_EVENT_NAME = 'enableKeyboardInput';\nexport const DISABLE_KEYBOARD_INPUT_EVENT_NAME = 'disableKeyboardInput';\n\nconst EVENT_OPTIONS = {\n  passive: true,\n  capture: true,\n};\n\n/**\n * Чтобы оптимизировать рендер, сохраняем в ref.\n *\n * В контекст можно передать через getter, подробнее в примере ниже.\n *\n * ```tsx\n * const keyboardInputTrackerRef = useKeyboardInputTracker();\n * <SomeContext.Provider value={{\n *  get keyboardInput() {\n *    return keyboardInputTrackerRef.current;\n *  }\n * }}>\n *  {children}\n * </SomeContext.Provider>\n * ```\n *\n * @private\n */\nexport function useKeyboardInputTracker(): React.RefObject<boolean> {\n  const { document } = useDOM();\n  const keyboardFocusingStartedRef = React.useRef(false);\n\n  useIsomorphicLayoutEffect(() => {\n    /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */\n    if (!document) {\n      return;\n    }\n\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (isKeyboardFocusingStarted(event)) {\n        keyboardFocusingStartedRef.current = true;\n      }\n    };\n\n    const handleCustomEnableKeyboardEvent = () => {\n      keyboardFocusingStartedRef.current = true;\n    };\n\n    const handleCustomDisableKeyboardEvent = () => {\n      keyboardFocusingStartedRef.current = false;\n    };\n\n    document.addEventListener('keydown', handleKeydown, EVENT_OPTIONS);\n    document.addEventListener(\n      ENABLE_KEYBOARD_INPUT_EVENT_NAME,\n      handleCustomEnableKeyboardEvent,\n      EVENT_OPTIONS,\n    );\n    document.addEventListener(\n      DISABLE_KEYBOARD_INPUT_EVENT_NAME,\n      handleCustomDisableKeyboardEvent,\n      EVENT_OPTIONS,\n    );\n    document.addEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n    document.addEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeydown, EVENT_OPTIONS);\n      document.removeEventListener(\n        ENABLE_KEYBOARD_INPUT_EVENT_NAME,\n        handleCustomEnableKeyboardEvent,\n        EVENT_OPTIONS,\n      );\n      document.removeEventListener(\n        DISABLE_KEYBOARD_INPUT_EVENT_NAME,\n        handleCustomDisableKeyboardEvent,\n        EVENT_OPTIONS,\n      );\n      document.removeEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n      document.removeEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n    };\n  }, [document]);\n\n  return keyboardFocusingStartedRef;\n}\n"],"names":["React","isKeyboardFocusingStarted","useDOM","useIsomorphicLayoutEffect","ENABLE_KEYBOARD_INPUT_EVENT_NAME","DISABLE_KEYBOARD_INPUT_EVENT_NAME","EVENT_OPTIONS","passive","capture","useKeyboardInputTracker","document","keyboardFocusingStartedRef","useRef","handleKeydown","event","current","handleCustomEnableKeyboardEvent","handleCustomDisableKeyboardEvent","addEventListener","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,0BAAuB;AACjE,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,OAAO,MAAMC,mCAAmC,sBAAsB;AACtE,OAAO,MAAMC,oCAAoC,uBAAuB;AAExE,MAAMC,gBAAgB;IACpBC,SAAS;IACTC,SAAS;AACX;AAEA;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,QAAQ,EAAE,GAAGR;IACrB,MAAMS,6BAA6BX,MAAMY,MAAM,CAAC;IAEhDT,0BAA0B;QACxB,oIAAoI,GACpI,IAAI,CAACO,UAAU;YACb;QACF;QAEA,MAAMG,gBAAgB,CAACC;YACrB,IAAIb,0BAA0Ba,QAAQ;gBACpCH,2BAA2BI,OAAO,GAAG;YACvC;QACF;QAEA,MAAMC,kCAAkC;YACtCL,2BAA2BI,OAAO,GAAG;QACvC;QAEA,MAAME,mCAAmC;YACvCN,2BAA2BI,OAAO,GAAG;QACvC;QAEAL,SAASQ,gBAAgB,CAAC,WAAWL,eAAeP;QACpDI,SAASQ,gBAAgB,CACvBd,kCACAY,iCACAV;QAEFI,SAASQ,gBAAgB,CACvBb,mCACAY,kCACAX;QAEFI,SAASQ,gBAAgB,CAAC,aAAaD,kCAAkCX;QACzEI,SAASQ,gBAAgB,CAAC,cAAcD,kCAAkCX;QAE1E,OAAO;YACLI,SAASS,mBAAmB,CAAC,WAAWN,eAAeP;YACvDI,SAASS,mBAAmB,CAC1Bf,kCACAY,iCACAV;YAEFI,SAASS,mBAAmB,CAC1Bd,mCACAY,kCACAX;YAEFI,SAASS,mBAAmB,CAAC,aAAaF,kCAAkCX;YAC5EI,SAASS,mBAAmB,CAAC,cAAcF,kCAAkCX;QAC/E;IACF,GAAG;QAACI;KAAS;IAEb,OAAOC;AACT"}
+{"version":3,"sources":["../../../src/hooks/useKeyboardInputTracker.ts"],"sourcesContent":["import type * as React from 'react';\nimport { isKeyboardFocusingStarted } from '../lib/accessibility';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport const ENABLE_KEYBOARD_INPUT_EVENT_NAME = 'enableKeyboardInput';\nexport const DISABLE_KEYBOARD_INPUT_EVENT_NAME = 'disableKeyboardInput';\n\nconst EVENT_OPTIONS = {\n  passive: true,\n  capture: true,\n};\n\nlet keyboardInputState = false;\nlet mountedTrackers = 0;\nlet detachListeners: null | (() => void) = null;\n\nconst keyboardFocusingStartedRef: React.RefObject<boolean> = {\n  get current() {\n    return keyboardInputState;\n  },\n};\n\nconst setKeyboardInputState = (nextValue: boolean) => {\n  if (keyboardInputState !== nextValue) {\n    keyboardInputState = nextValue;\n  }\n};\n\nconst attachKeyboardInputListeners = (document: Document) => {\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (isKeyboardFocusingStarted(event)) {\n      setKeyboardInputState(true);\n    }\n  };\n\n  const handleCustomEnableKeyboardEvent = () => {\n    setKeyboardInputState(true);\n  };\n\n  const handleCustomDisableKeyboardEvent = () => {\n    setKeyboardInputState(false);\n  };\n\n  document.addEventListener('keydown', handleKeydown, EVENT_OPTIONS);\n  document.addEventListener(\n    ENABLE_KEYBOARD_INPUT_EVENT_NAME,\n    handleCustomEnableKeyboardEvent,\n    EVENT_OPTIONS,\n  );\n  document.addEventListener(\n    DISABLE_KEYBOARD_INPUT_EVENT_NAME,\n    handleCustomDisableKeyboardEvent,\n    EVENT_OPTIONS,\n  );\n  document.addEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n  document.addEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n\n  return () => {\n    document.removeEventListener('keydown', handleKeydown, EVENT_OPTIONS);\n    document.removeEventListener(\n      ENABLE_KEYBOARD_INPUT_EVENT_NAME,\n      handleCustomEnableKeyboardEvent,\n      EVENT_OPTIONS,\n    );\n    document.removeEventListener(\n      DISABLE_KEYBOARD_INPUT_EVENT_NAME,\n      handleCustomDisableKeyboardEvent,\n      EVENT_OPTIONS,\n    );\n    document.removeEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n    document.removeEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n  };\n};\n\nexport function useKeyboardInputTracker(): React.RefObject<boolean> {\n  const { document } = useDOM();\n\n  useIsomorphicLayoutEffect(() => {\n    /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */\n    if (!document) {\n      return;\n    }\n\n    mountedTrackers += 1;\n\n    if (!detachListeners) {\n      detachListeners = attachKeyboardInputListeners(document);\n    }\n\n    return () => {\n      mountedTrackers -= 1;\n      if (mountedTrackers === 0 && detachListeners) {\n        detachListeners();\n        detachListeners = null;\n      }\n    };\n  }, [document]);\n\n  return keyboardFocusingStartedRef;\n}\n"],"names":["isKeyboardFocusingStarted","useDOM","useIsomorphicLayoutEffect","ENABLE_KEYBOARD_INPUT_EVENT_NAME","DISABLE_KEYBOARD_INPUT_EVENT_NAME","EVENT_OPTIONS","passive","capture","keyboardInputState","mountedTrackers","detachListeners","keyboardFocusingStartedRef","current","setKeyboardInputState","nextValue","attachKeyboardInputListeners","document","handleKeydown","event","handleCustomEnableKeyboardEvent","handleCustomDisableKeyboardEvent","addEventListener","removeEventListener","useKeyboardInputTracker"],"mappings":"AACA,SAASA,yBAAyB,QAAQ,0BAAuB;AACjE,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,OAAO,MAAMC,mCAAmC,sBAAsB;AACtE,OAAO,MAAMC,oCAAoC,uBAAuB;AAExE,MAAMC,gBAAgB;IACpBC,SAAS;IACTC,SAAS;AACX;AAEA,IAAIC,qBAAqB;AACzB,IAAIC,kBAAkB;AACtB,IAAIC,kBAAuC;AAE3C,MAAMC,6BAAuD;IAC3D,IAAIC,WAAU;QACZ,OAAOJ;IACT;AACF;AAEA,MAAMK,wBAAwB,CAACC;IAC7B,IAAIN,uBAAuBM,WAAW;QACpCN,qBAAqBM;IACvB;AACF;AAEA,MAAMC,+BAA+B,CAACC;IACpC,MAAMC,gBAAgB,CAACC;QACrB,IAAIlB,0BAA0BkB,QAAQ;YACpCL,sBAAsB;QACxB;IACF;IAEA,MAAMM,kCAAkC;QACtCN,sBAAsB;IACxB;IAEA,MAAMO,mCAAmC;QACvCP,sBAAsB;IACxB;IAEAG,SAASK,gBAAgB,CAAC,WAAWJ,eAAeZ;IACpDW,SAASK,gBAAgB,CACvBlB,kCACAgB,iCACAd;IAEFW,SAASK,gBAAgB,CACvBjB,mCACAgB,kCACAf;IAEFW,SAASK,gBAAgB,CAAC,aAAaD,kCAAkCf;IACzEW,SAASK,gBAAgB,CAAC,cAAcD,kCAAkCf;IAE1E,OAAO;QACLW,SAASM,mBAAmB,CAAC,WAAWL,eAAeZ;QACvDW,SAASM,mBAAmB,CAC1BnB,kCACAgB,iCACAd;QAEFW,SAASM,mBAAmB,CAC1BlB,mCACAgB,kCACAf;QAEFW,SAASM,mBAAmB,CAAC,aAAaF,kCAAkCf;QAC5EW,SAASM,mBAAmB,CAAC,cAAcF,kCAAkCf;IAC/E;AACF;AAEA,OAAO,SAASkB;IACd,MAAM,EAAEP,QAAQ,EAAE,GAAGf;IAErBC,0BAA0B;QACxB,oIAAoI,GACpI,IAAI,CAACc,UAAU;YACb;QACF;QAEAP,mBAAmB;QAEnB,IAAI,CAACC,iBAAiB;YACpBA,kBAAkBK,6BAA6BC;QACjD;QAEA,OAAO;YACLP,mBAAmB;YACnB,IAAIA,oBAAoB,KAAKC,iBAAiB;gBAC5CA;gBACAA,kBAAkB;YACpB;QACF;IACF,GAAG;QAACM;KAAS;IAEb,OAAOL;AACT"}

package/dist/cssm/hooks/useLatestRef.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
+export function useLatestRef(value) {
+    const ref = React.useRef(value);
+    useIsomorphicLayoutEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref;
+}
+
+//# sourceMappingURL=useLatestRef.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useLatestRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport function useLatestRef<T>(value: T): React.RefObject<T> {\n  const ref = React.useRef(value);\n\n  useIsomorphicLayoutEffect(() => {\n    ref.current = value;\n  }, [value]);\n\n  return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useLatestRef","value","ref","useRef","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,OAAO,SAASC,aAAgBC,KAAQ;IACtC,MAAMC,MAAMJ,MAAMK,MAAM,CAACF;IAEzBF,0BAA0B;QACxBG,IAAIE,OAAO,GAAGH;IAChB,GAAG;QAACA;KAAM;IAEV,OAAOC;AACT"}

package/dist/cssm/hooks/useLocale.js

@@ -1,7 +1,7 @@
-import { useConfigProvider } from "../components/ConfigProvider/ConfigProviderContext.js";
+import * as React from "react";
+import { LocaleContext } from "../components/ConfigProvider/ConfigProviderSubContexts.js";
 export function useLocale() {
-    const { locale } = useConfigProvider();
-    return locale;
+    return React.useContext(LocaleContext);
 }
 
 //# sourceMappingURL=useLocale.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useLocale.ts"],"sourcesContent":["import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';\n\nexport function useLocale(): string {\n  const { locale } = useConfigProvider();\n\n  return locale;\n}\n"],"names":["useConfigProvider","useLocale","locale"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,wDAAqD;AAEvF,OAAO,SAASC;IACd,MAAM,EAAEC,MAAM,EAAE,GAAGF;IAEnB,OAAOE;AACT"}
+{"version":3,"sources":["../../../src/hooks/useLocale.ts"],"sourcesContent":["import * as React from 'react';\nimport { LocaleContext } from '../components/ConfigProvider/ConfigProviderSubContexts';\n\nexport function useLocale(): string {\n  return React.useContext(LocaleContext);\n}\n"],"names":["React","LocaleContext","useLocale","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,4DAAyD;AAEvF,OAAO,SAASC;IACd,OAAOF,MAAMG,UAAU,CAACF;AAC1B"}

package/dist/cssm/hooks/useMediaQueryMatch.js

@@ -16,6 +16,7 @@ export function useMediaQueryMatches(media, { disable } = {}) {
         match.addEventListener('change', handleMediaQueryChange);
         return ()=>match.removeEventListener('change', handleMediaQueryChange);
     }, [
+        disable,
         media,
         window
     ]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useMediaQueryMatch.ts"],"sourcesContent":["/* eslint-disable no-restricted-properties */\nimport * as React from 'react';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\ntype Options = {\n  disable?: boolean | undefined;\n};\n\nexport function useMediaQueryMatches(\n  media: string,\n  { disable }: Options = {},\n): boolean | undefined {\n  const { window } = useDOM();\n\n  const [matches, setMatches] = React.useState<boolean | undefined>(undefined);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!window || disable) {\n      return;\n    }\n    const match = window.matchMedia(media);\n    setMatches(match.matches);\n    /* istanbul ignore next: на текущий момент, покрытие данного кейса неинтересно  */\n    const handleMediaQueryChange = (event: MediaQueryListEvent) => {\n      /* istanbul ignore next */\n      setMatches(event.matches);\n    };\n    match.addEventListener('change', handleMediaQueryChange);\n    return () => match.removeEventListener('change', handleMediaQueryChange);\n  }, [media, window]);\n\n  return matches;\n}\n"],"names":["React","useDOM","useIsomorphicLayoutEffect","useMediaQueryMatches","media","disable","window","matches","setMatches","useState","undefined","match","matchMedia","handleMediaQueryChange","event","addEventListener","removeEventListener"],"mappings":"AAAA,2CAA2C,GAC3C,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAM7E,OAAO,SAASC,qBACdC,KAAa,EACb,EAAEC,OAAO,EAAW,GAAG,CAAC,CAAC;IAEzB,MAAM,EAAEC,MAAM,EAAE,GAAGL;IAEnB,MAAM,CAACM,SAASC,WAAW,GAAGR,MAAMS,QAAQ,CAAsBC;IAElER,0BAA0B;QACxB,IAAI,CAACI,UAAUD,SAAS;YACtB;QACF;QACA,MAAMM,QAAQL,OAAOM,UAAU,CAACR;QAChCI,WAAWG,MAAMJ,OAAO;QACxB,gFAAgF,GAChF,MAAMM,yBAAyB,CAACC;YAC9B,wBAAwB,GACxBN,WAAWM,MAAMP,OAAO;QAC1B;QACAI,MAAMI,gBAAgB,CAAC,UAAUF;QACjC,OAAO,IAAMF,MAAMK,mBAAmB,CAAC,UAAUH;IACnD,GAAG;QAACT;QAAOE;KAAO;IAElB,OAAOC;AACT"}
+{"version":3,"sources":["../../../src/hooks/useMediaQueryMatch.ts"],"sourcesContent":["/* eslint-disable no-restricted-properties */\nimport * as React from 'react';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\ntype Options = {\n  disable?: boolean | undefined;\n};\n\nexport function useMediaQueryMatches(\n  media: string,\n  { disable }: Options = {},\n): boolean | undefined {\n  const { window } = useDOM();\n\n  const [matches, setMatches] = React.useState<boolean | undefined>(undefined);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!window || disable) {\n      return;\n    }\n    const match = window.matchMedia(media);\n    setMatches(match.matches);\n    /* istanbul ignore next: на текущий момент, покрытие данного кейса неинтересно  */\n    const handleMediaQueryChange = (event: MediaQueryListEvent) => {\n      /* istanbul ignore next */\n      setMatches(event.matches);\n    };\n    match.addEventListener('change', handleMediaQueryChange);\n    return () => match.removeEventListener('change', handleMediaQueryChange);\n  }, [disable, media, window]);\n\n  return matches;\n}\n"],"names":["React","useDOM","useIsomorphicLayoutEffect","useMediaQueryMatches","media","disable","window","matches","setMatches","useState","undefined","match","matchMedia","handleMediaQueryChange","event","addEventListener","removeEventListener"],"mappings":"AAAA,2CAA2C,GAC3C,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAM7E,OAAO,SAASC,qBACdC,KAAa,EACb,EAAEC,OAAO,EAAW,GAAG,CAAC,CAAC;IAEzB,MAAM,EAAEC,MAAM,EAAE,GAAGL;IAEnB,MAAM,CAACM,SAASC,WAAW,GAAGR,MAAMS,QAAQ,CAAsBC;IAElER,0BAA0B;QACxB,IAAI,CAACI,UAAUD,SAAS;YACtB;QACF;QACA,MAAMM,QAAQL,OAAOM,UAAU,CAACR;QAChCI,WAAWG,MAAMJ,OAAO;QACxB,gFAAgF,GAChF,MAAMM,yBAAyB,CAACC;YAC9B,wBAAwB,GACxBN,WAAWM,MAAMP,OAAO;QAC1B;QACAI,MAAMI,gBAAgB,CAAC,UAAUF;QACjC,OAAO,IAAMF,MAAMK,mBAAmB,CAAC,UAAUH;IACnD,GAAG;QAACR;QAASD;QAAOE;KAAO;IAE3B,OAAOC;AACT"}

package/dist/cssm/hooks/useMutationObserver.js

@@ -1,17 +1,17 @@
 import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
 import { useStableCallback } from "./useStableCallback.js";
-export const DEFAULT_MUTATION_OBSERVER_OPTIONS = {
+const DEFAULT_MUTATION_OBSERVER_OPTIONS = {
     subtree: true,
     childList: true
 };
-export const useMutationObserver = (ref, callback, options = DEFAULT_MUTATION_OBSERVER_OPTIONS)=>{
+export const useMutationObserver = (ref, callback)=>{
     const stableCallback = useStableCallback(callback);
     useIsomorphicLayoutEffect(()=>{
         if (!ref || !ref.current) {
             return;
         }
         const observer = new MutationObserver(stableCallback);
-        observer.observe(ref.current, options);
+        observer.observe(ref.current, DEFAULT_MUTATION_OBSERVER_OPTIONS);
         return ()=>observer.disconnect();
     }, [
         ref,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useMutationObserver.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\nimport { useStableCallback } from './useStableCallback';\n\nexport const DEFAULT_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {\n  subtree: true,\n  childList: true,\n};\n\nexport const useMutationObserver = (\n  ref: React.RefObject<HTMLElement | null> | null,\n  callback: () => void,\n  options: MutationObserverInit = DEFAULT_MUTATION_OBSERVER_OPTIONS,\n): void => {\n  const stableCallback = useStableCallback(callback);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref || !ref.current) {\n      return;\n    }\n    const observer = new MutationObserver(stableCallback);\n    observer.observe(ref.current, options);\n    return () => observer.disconnect();\n  }, [ref, stableCallback]);\n};\n"],"names":["useIsomorphicLayoutEffect","useStableCallback","DEFAULT_MUTATION_OBSERVER_OPTIONS","subtree","childList","useMutationObserver","ref","callback","options","stableCallback","current","observer","MutationObserver","observe","disconnect"],"mappings":"AACA,SAASA,yBAAyB,QAAQ,sCAAmC;AAC7E,SAASC,iBAAiB,QAAQ,yBAAsB;AAExD,OAAO,MAAMC,oCAA0D;IACrEC,SAAS;IACTC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,sBAAsB,CACjCC,KACAC,UACAC,UAAgCN,iCAAiC;IAEjE,MAAMO,iBAAiBR,kBAAkBM;IAEzCP,0BAA0B;QACxB,IAAI,CAACM,OAAO,CAACA,IAAII,OAAO,EAAE;YACxB;QACF;QACA,MAAMC,WAAW,IAAIC,iBAAiBH;QACtCE,SAASE,OAAO,CAACP,IAAII,OAAO,EAAEF;QAC9B,OAAO,IAAMG,SAASG,UAAU;IAClC,GAAG;QAACR;QAAKG;KAAe;AAC1B,EAAE"}
+{"version":3,"sources":["../../../src/hooks/useMutationObserver.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\nimport { useStableCallback } from './useStableCallback';\n\nconst DEFAULT_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {\n  subtree: true,\n  childList: true,\n};\n\nexport const useMutationObserver = (\n  ref: React.RefObject<HTMLElement | null> | null,\n  callback: () => void,\n): void => {\n  const stableCallback = useStableCallback(callback);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref || !ref.current) {\n      return;\n    }\n    const observer = new MutationObserver(stableCallback);\n    observer.observe(ref.current, DEFAULT_MUTATION_OBSERVER_OPTIONS);\n    return () => observer.disconnect();\n  }, [ref, stableCallback]);\n};\n"],"names":["useIsomorphicLayoutEffect","useStableCallback","DEFAULT_MUTATION_OBSERVER_OPTIONS","subtree","childList","useMutationObserver","ref","callback","stableCallback","current","observer","MutationObserver","observe","disconnect"],"mappings":"AACA,SAASA,yBAAyB,QAAQ,sCAAmC;AAC7E,SAASC,iBAAiB,QAAQ,yBAAsB;AAExD,MAAMC,oCAA0D;IAC9DC,SAAS;IACTC,WAAW;AACb;AAEA,OAAO,MAAMC,sBAAsB,CACjCC,KACAC;IAEA,MAAMC,iBAAiBP,kBAAkBM;IAEzCP,0BAA0B;QACxB,IAAI,CAACM,OAAO,CAACA,IAAIG,OAAO,EAAE;YACxB;QACF;QACA,MAAMC,WAAW,IAAIC,iBAAiBH;QACtCE,SAASE,OAAO,CAACN,IAAIG,OAAO,EAAEP;QAC9B,OAAO,IAAMQ,SAASG,UAAU;IAClC,GAAG;QAACP;QAAKE;KAAe;AAC1B,EAAE"}

package/dist/cssm/hooks/usePlatform.js

@@ -1,7 +1,7 @@
-import { useConfigProvider } from "../components/ConfigProvider/ConfigProviderContext.js";
+import * as React from "react";
+import { PlatformContext } from "../components/ConfigProvider/ConfigProviderSubContexts.js";
 export function usePlatform() {
-    const { platform } = useConfigProvider();
-    return platform;
+    return React.useContext(PlatformContext);
 }
 
 //# sourceMappingURL=usePlatform.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/usePlatform.ts"],"sourcesContent":["import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';\nimport type { PlatformType } from '../lib/platform';\n\nexport function usePlatform(): PlatformType {\n  const { platform } = useConfigProvider();\n\n  return platform;\n}\n"],"names":["useConfigProvider","usePlatform","platform"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,wDAAqD;AAGvF,OAAO,SAASC;IACd,MAAM,EAAEC,QAAQ,EAAE,GAAGF;IAErB,OAAOE;AACT"}
+{"version":3,"sources":["../../../src/hooks/usePlatform.ts"],"sourcesContent":["import * as React from 'react';\nimport { PlatformContext } from '../components/ConfigProvider/ConfigProviderSubContexts';\nimport type { PlatformType } from '../lib/platform';\n\nexport function usePlatform(): PlatformType {\n  return React.useContext(PlatformContext);\n}\n"],"names":["React","PlatformContext","usePlatform","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,4DAAyD;AAGzF,OAAO,SAASC;IACd,OAAOF,MAAMG,UAAU,CAACF;AAC1B"}

package/dist/cssm/hooks/useResizeObserver.js

@@ -1,17 +1,16 @@
 import { useEffect } from "react";
-import { useDOM } from "../lib/dom.js";
+import { isWindow } from "../lib/dom.js";
 import { isRefObject } from "../lib/isRefObject.js";
 import { useStableCallback } from "./useStableCallback.js";
 /**
  * Хук вызывает переданный коллбэк при изменении размеров элемента.
  */ export function useResizeObserver(ref, callback) {
     const stableCallback = useStableCallback(callback);
-    const { window } = useDOM();
     useEffect(function addResizeObserverHandler() {
-        if (!ref || !window) {
+        if (!ref) {
             return;
         }
-        if (ref === window) {
+        if (isWindow(ref)) {
             const onResize = ()=>stableCallback(ref);
             ref.addEventListener('resize', onResize);
             return ()=>ref.removeEventListener('resize', onResize);
@@ -27,8 +26,7 @@ import { useStableCallback } from "./useStableCallback.js";
         return ()=>observer.disconnect();
     }, [
         ref,
-        stableCallback,
-        window
+        stableCallback
     ]);
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type * as React from 'react';\nimport { useDOM } from '../lib/dom';\nimport { isRefObject } from '../lib/isRefObject';\nimport { useStableCallback } from './useStableCallback';\n\n/**\n * Хук вызывает переданный коллбэк при изменении размеров элемента.\n */\nexport function useResizeObserver(\n  ref: React.RefObject<HTMLElement | null> | Window | null | undefined,\n  callback: (element: HTMLElement | Window) => void,\n): void {\n  const stableCallback = useStableCallback(callback);\n  const { window } = useDOM();\n\n  useEffect(\n    function addResizeObserverHandler() {\n      if (!ref || !window) {\n        return;\n      }\n\n      if (ref === window) {\n        const onResize = () => stableCallback(ref);\n        ref.addEventListener('resize', onResize);\n        return () => ref.removeEventListener('resize', onResize);\n      }\n\n      /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n      if (!isRefObject(ref) || !ref.current) {\n        return;\n      }\n      const element = ref.current;\n\n      const observeFn = () => stableCallback(element);\n\n      // eslint-disable-next-line compat/compat\n      const observer: ResizeObserver = new ResizeObserver(observeFn);\n      observer.observe(element);\n\n      return () => observer.disconnect();\n    },\n    [ref, stableCallback, window],\n  );\n}\n"],"names":["useEffect","useDOM","isRefObject","useStableCallback","useResizeObserver","ref","callback","stableCallback","window","addResizeObserverHandler","onResize","addEventListener","removeEventListener","current","element","observeFn","observer","ResizeObserver","observe","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAElC,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,WAAW,QAAQ,wBAAqB;AACjD,SAASC,iBAAiB,QAAQ,yBAAsB;AAExD;;CAEC,GACD,OAAO,SAASC,kBACdC,GAAoE,EACpEC,QAAiD;IAEjD,MAAMC,iBAAiBJ,kBAAkBG;IACzC,MAAM,EAAEE,MAAM,EAAE,GAAGP;IAEnBD,UACE,SAASS;QACP,IAAI,CAACJ,OAAO,CAACG,QAAQ;YACnB;QACF;QAEA,IAAIH,QAAQG,QAAQ;YAClB,MAAME,WAAW,IAAMH,eAAeF;YACtCA,IAAIM,gBAAgB,CAAC,UAAUD;YAC/B,OAAO,IAAML,IAAIO,mBAAmB,CAAC,UAAUF;QACjD;QAEA,6EAA6E,GAC7E,IAAI,CAACR,YAAYG,QAAQ,CAACA,IAAIQ,OAAO,EAAE;YACrC;QACF;QACA,MAAMC,UAAUT,IAAIQ,OAAO;QAE3B,MAAME,YAAY,IAAMR,eAAeO;QAEvC,yCAAyC;QACzC,MAAME,WAA2B,IAAIC,eAAeF;QACpDC,SAASE,OAAO,CAACJ;QAEjB,OAAO,IAAME,SAASG,UAAU;IAClC,GACA;QAACd;QAAKE;QAAgBC;KAAO;AAEjC"}
+{"version":3,"sources":["../../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type * as React from 'react';\nimport { isWindow } from '../lib/dom';\nimport { isRefObject } from '../lib/isRefObject';\nimport { useStableCallback } from './useStableCallback';\n\n/**\n * Хук вызывает переданный коллбэк при изменении размеров элемента.\n */\nexport function useResizeObserver(\n  ref: React.RefObject<HTMLElement | null> | Window | null | undefined,\n  callback: (element: HTMLElement | Window) => void,\n): void {\n  const stableCallback = useStableCallback(callback);\n\n  useEffect(\n    function addResizeObserverHandler() {\n      if (!ref) {\n        return;\n      }\n\n      if (isWindow(ref)) {\n        const onResize = () => stableCallback(ref);\n        ref.addEventListener('resize', onResize);\n        return () => ref.removeEventListener('resize', onResize);\n      }\n\n      /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n      if (!isRefObject(ref) || !ref.current) {\n        return;\n      }\n      const element = ref.current;\n\n      const observeFn = () => stableCallback(element);\n\n      // eslint-disable-next-line compat/compat\n      const observer: ResizeObserver = new ResizeObserver(observeFn);\n      observer.observe(element);\n\n      return () => observer.disconnect();\n    },\n    [ref, stableCallback],\n  );\n}\n"],"names":["useEffect","isWindow","isRefObject","useStableCallback","useResizeObserver","ref","callback","stableCallback","addResizeObserverHandler","onResize","addEventListener","removeEventListener","current","element","observeFn","observer","ResizeObserver","observe","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAElC,SAASC,QAAQ,QAAQ,gBAAa;AACtC,SAASC,WAAW,QAAQ,wBAAqB;AACjD,SAASC,iBAAiB,QAAQ,yBAAsB;AAExD;;CAEC,GACD,OAAO,SAASC,kBACdC,GAAoE,EACpEC,QAAiD;IAEjD,MAAMC,iBAAiBJ,kBAAkBG;IAEzCN,UACE,SAASQ;QACP,IAAI,CAACH,KAAK;YACR;QACF;QAEA,IAAIJ,SAASI,MAAM;YACjB,MAAMI,WAAW,IAAMF,eAAeF;YACtCA,IAAIK,gBAAgB,CAAC,UAAUD;YAC/B,OAAO,IAAMJ,IAAIM,mBAAmB,CAAC,UAAUF;QACjD;QAEA,6EAA6E,GAC7E,IAAI,CAACP,YAAYG,QAAQ,CAACA,IAAIO,OAAO,EAAE;YACrC;QACF;QACA,MAAMC,UAAUR,IAAIO,OAAO;QAE3B,MAAME,YAAY,IAAMP,eAAeM;QAEvC,yCAAyC;QACzC,MAAME,WAA2B,IAAIC,eAAeF;QACpDC,SAASE,OAAO,CAACJ;QAEjB,OAAO,IAAME,SAASG,UAAU;IAClC,GACA;QAACb;QAAKE;KAAe;AAEzB"}

package/dist/cssm/hooks/useSyncHTMLWithBaseVKUIClasses.js

@@ -35,7 +35,8 @@ export function useSyncHTMLWithBaseVKUIClasses({ appRootRef, mode, enable, layou
     }, [
         mode,
         enable,
-        layout
+        layout,
+        appRootRef
     ]);
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useSyncHTMLWithBaseVKUIClasses.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { AppRootLayout, AppRootMode } from '../components/AppRoot/types';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nconst layoutClassNames = { card: 'vkui--layout-card', plain: 'vkui--layout-plain' };\n\nexport function useSyncHTMLWithBaseVKUIClasses({\n  appRootRef,\n  mode,\n  enable,\n  layout,\n}: {\n  appRootRef: React.RefObject<HTMLElement | null>;\n  mode: AppRootMode;\n  layout?: AppRootLayout | undefined;\n  enable: boolean;\n}) {\n  useIsomorphicLayoutEffect(() => {\n    if (!enable) {\n      return;\n    }\n\n    const htmlElement = appRootRef.current?.ownerDocument.documentElement;\n    const parentElement = appRootRef.current?.parentElement ?? null;\n\n    const htmlElementClasses = ['vkui'];\n    const parentElementClasses = ['vkui__root'];\n\n    if (mode === 'embedded') {\n      parentElementClasses.push('vkui__root--embedded');\n    }\n\n    if (mode === 'full') {\n      if (layout) {\n        htmlElementClasses.push(layoutClassNames[layout]);\n      }\n      /* eslint-disable-next-line no-restricted-properties */\n      htmlElement?.classList.add(...htmlElementClasses);\n    }\n\n    /* eslint-disable-next-line no-restricted-properties */\n    parentElement?.classList.add(...parentElementClasses);\n\n    return () => {\n      if (mode === 'full') {\n        /* eslint-disable-next-line no-restricted-properties */\n        htmlElement?.classList.remove(...htmlElementClasses);\n      }\n      /* eslint-disable-next-line no-restricted-properties */\n      parentElement?.classList.remove(...parentElementClasses);\n    };\n  }, [mode, enable, layout]);\n}\n"],"names":["useIsomorphicLayoutEffect","layoutClassNames","card","plain","useSyncHTMLWithBaseVKUIClasses","appRootRef","mode","enable","layout","htmlElement","current","ownerDocument","documentElement","parentElement","htmlElementClasses","parentElementClasses","push","classList","add","remove"],"mappings":"AAEA,SAASA,yBAAyB,QAAQ,sCAAmC;AAE7E,MAAMC,mBAAmB;IAAEC,MAAM;IAAqBC,OAAO;AAAqB;AAElF,OAAO,SAASC,+BAA+B,EAC7CC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,MAAM,EAMP;IACCR,0BAA0B;QACxB,IAAI,CAACO,QAAQ;YACX;QACF;QAEA,MAAME,cAAcJ,WAAWK,OAAO,EAAEC,cAAcC;QACtD,MAAMC,gBAAgBR,WAAWK,OAAO,EAAEG,iBAAiB;QAE3D,MAAMC,qBAAqB;YAAC;SAAO;QACnC,MAAMC,uBAAuB;YAAC;SAAa;QAE3C,IAAIT,SAAS,YAAY;YACvBS,qBAAqBC,IAAI,CAAC;QAC5B;QAEA,IAAIV,SAAS,QAAQ;YACnB,IAAIE,QAAQ;gBACVM,mBAAmBE,IAAI,CAACf,gBAAgB,CAACO,OAAO;YAClD;YACA,qDAAqD,GACrDC,aAAaQ,UAAUC,OAAOJ;QAChC;QAEA,qDAAqD,GACrDD,eAAeI,UAAUC,OAAOH;QAEhC,OAAO;YACL,IAAIT,SAAS,QAAQ;gBACnB,qDAAqD,GACrDG,aAAaQ,UAAUE,UAAUL;YACnC;YACA,qDAAqD,GACrDD,eAAeI,UAAUE,UAAUJ;QACrC;IACF,GAAG;QAACT;QAAMC;QAAQC;KAAO;AAC3B"}
+{"version":3,"sources":["../../../src/hooks/useSyncHTMLWithBaseVKUIClasses.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { AppRootLayout, AppRootMode } from '../components/AppRoot/types';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nconst layoutClassNames = { card: 'vkui--layout-card', plain: 'vkui--layout-plain' };\n\nexport function useSyncHTMLWithBaseVKUIClasses({\n  appRootRef,\n  mode,\n  enable,\n  layout,\n}: {\n  appRootRef: React.RefObject<HTMLElement | null>;\n  mode: AppRootMode;\n  layout?: AppRootLayout | undefined;\n  enable: boolean;\n}) {\n  useIsomorphicLayoutEffect(() => {\n    if (!enable) {\n      return;\n    }\n\n    const htmlElement = appRootRef.current?.ownerDocument.documentElement;\n    const parentElement = appRootRef.current?.parentElement ?? null;\n\n    const htmlElementClasses = ['vkui'];\n    const parentElementClasses = ['vkui__root'];\n\n    if (mode === 'embedded') {\n      parentElementClasses.push('vkui__root--embedded');\n    }\n\n    if (mode === 'full') {\n      if (layout) {\n        htmlElementClasses.push(layoutClassNames[layout]);\n      }\n      /* eslint-disable-next-line no-restricted-properties */\n      htmlElement?.classList.add(...htmlElementClasses);\n    }\n\n    /* eslint-disable-next-line no-restricted-properties */\n    parentElement?.classList.add(...parentElementClasses);\n\n    return () => {\n      if (mode === 'full') {\n        /* eslint-disable-next-line no-restricted-properties */\n        htmlElement?.classList.remove(...htmlElementClasses);\n      }\n      /* eslint-disable-next-line no-restricted-properties */\n      parentElement?.classList.remove(...parentElementClasses);\n    };\n  }, [mode, enable, layout, appRootRef]);\n}\n"],"names":["useIsomorphicLayoutEffect","layoutClassNames","card","plain","useSyncHTMLWithBaseVKUIClasses","appRootRef","mode","enable","layout","htmlElement","current","ownerDocument","documentElement","parentElement","htmlElementClasses","parentElementClasses","push","classList","add","remove"],"mappings":"AAEA,SAASA,yBAAyB,QAAQ,sCAAmC;AAE7E,MAAMC,mBAAmB;IAAEC,MAAM;IAAqBC,OAAO;AAAqB;AAElF,OAAO,SAASC,+BAA+B,EAC7CC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,MAAM,EAMP;IACCR,0BAA0B;QACxB,IAAI,CAACO,QAAQ;YACX;QACF;QAEA,MAAME,cAAcJ,WAAWK,OAAO,EAAEC,cAAcC;QACtD,MAAMC,gBAAgBR,WAAWK,OAAO,EAAEG,iBAAiB;QAE3D,MAAMC,qBAAqB;YAAC;SAAO;QACnC,MAAMC,uBAAuB;YAAC;SAAa;QAE3C,IAAIT,SAAS,YAAY;YACvBS,qBAAqBC,IAAI,CAAC;QAC5B;QAEA,IAAIV,SAAS,QAAQ;YACnB,IAAIE,QAAQ;gBACVM,mBAAmBE,IAAI,CAACf,gBAAgB,CAACO,OAAO;YAClD;YACA,qDAAqD,GACrDC,aAAaQ,UAAUC,OAAOJ;QAChC;QAEA,qDAAqD,GACrDD,eAAeI,UAAUC,OAAOH;QAEhC,OAAO;YACL,IAAIT,SAAS,QAAQ;gBACnB,qDAAqD,GACrDG,aAAaQ,UAAUE,UAAUL;YACnC;YACA,qDAAqD,GACrDD,eAAeI,UAAUE,UAAUJ;QACrC;IACF,GAAG;QAACT;QAAMC;QAAQC;QAAQH;KAAW;AACvC"}

package/dist/cssm/hooks/useSyncHTMLWithTokens.js

@@ -12,7 +12,9 @@ export function useSyncHTMLWithTokens({ appRootRef, enable }) {
             /* eslint-disable-next-line no-restricted-properties */ htmlElement?.classList.remove(tokenClassName);
         };
     }, [
-        tokenClassName
+        enable,
+        tokenClassName,
+        appRootRef
     ]);
 }
 

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

@@ -1 +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 | null>;\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"}
+{"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 | null>;\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  }, [enable, tokenClassName, appRootRef]);\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;QAACD;QAAQC;QAAgBF;KAAW;AACzC"}

package/dist/cssm/hooks/useWaitTransitionFinish.js

@@ -1,31 +1,29 @@
 import * as React from "react";
 import { noop } from "@vkontakte/vkjs";
-import { useDOM } from "../lib/dom.js";
 export const useWaitTransitionFinish = ()=>{
     const timeoutRef = React.useRef(null);
-    const { document } = useDOM();
     const detach = React.useRef(noop);
     const remove = React.useCallback(()=>{
         detach.current();
         detach.current = noop;
     }, []);
     const waitTransitionFinish = React.useCallback((element, eventHandler, durationFallback)=>{
-        if (element) {
-            if (!document?.hidden) {
-                remove();
-                element.addEventListener('transitionend', eventHandler);
-                detach.current = ()=>{
-                    element.removeEventListener('transitionend', eventHandler);
-                };
-            } else {
-                if (timeoutRef?.current) {
-                    clearTimeout(timeoutRef.current);
-                }
-                timeoutRef.current = setTimeout(eventHandler, durationFallback);
+        if (!element) {
+            return;
+        }
+        if (!element.ownerDocument.hidden) {
+            remove();
+            element.addEventListener('transitionend', eventHandler);
+            detach.current = ()=>{
+                element.removeEventListener('transitionend', eventHandler);
+            };
+        } else {
+            if (timeoutRef?.current) {
+                clearTimeout(timeoutRef.current);
             }
+            timeoutRef.current = setTimeout(eventHandler, durationFallback);
         }
     }, [
-        document,
         remove,
         timeoutRef
     ]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useWaitTransitionFinish.ts"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useDOM } from '../lib/dom';\n\nexport const useWaitTransitionFinish = (): ((\n  element: HTMLElement | undefined | null,\n  eventHandler: (e?: TransitionEvent) => void,\n  durationFallback: number,\n) => void) => {\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const { document } = useDOM();\n  const detach = React.useRef(noop);\n\n  const remove = React.useCallback(() => {\n    detach.current();\n    detach.current = noop;\n  }, []);\n\n  const waitTransitionFinish = React.useCallback(\n    (\n      element: HTMLElement | undefined | null,\n      eventHandler: (e?: TransitionEvent) => void,\n      durationFallback: number,\n    ) => {\n      if (element) {\n        if (!document?.hidden) {\n          remove();\n          element.addEventListener('transitionend', eventHandler);\n          detach.current = () => {\n            element.removeEventListener('transitionend', eventHandler);\n          };\n        } else {\n          if (timeoutRef?.current) {\n            clearTimeout(timeoutRef.current);\n          }\n          timeoutRef.current = setTimeout(eventHandler, durationFallback);\n        }\n      }\n    },\n    [document, remove, timeoutRef],\n  );\n\n  return waitTransitionFinish;\n};\n"],"names":["React","noop","useDOM","useWaitTransitionFinish","timeoutRef","useRef","document","detach","remove","useCallback","current","waitTransitionFinish","element","eventHandler","durationFallback","hidden","addEventListener","removeEventListener","clearTimeout","setTimeout"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,MAAM,QAAQ,gBAAa;AAEpC,OAAO,MAAMC,0BAA0B;IAKrC,MAAMC,aAAaJ,MAAMK,MAAM,CAAuC;IACtE,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;IACrB,MAAMK,SAASP,MAAMK,MAAM,CAACJ;IAE5B,MAAMO,SAASR,MAAMS,WAAW,CAAC;QAC/BF,OAAOG,OAAO;QACdH,OAAOG,OAAO,GAAGT;IACnB,GAAG,EAAE;IAEL,MAAMU,uBAAuBX,MAAMS,WAAW,CAC5C,CACEG,SACAC,cACAC;QAEA,IAAIF,SAAS;YACX,IAAI,CAACN,UAAUS,QAAQ;gBACrBP;gBACAI,QAAQI,gBAAgB,CAAC,iBAAiBH;gBAC1CN,OAAOG,OAAO,GAAG;oBACfE,QAAQK,mBAAmB,CAAC,iBAAiBJ;gBAC/C;YACF,OAAO;gBACL,IAAIT,YAAYM,SAAS;oBACvBQ,aAAad,WAAWM,OAAO;gBACjC;gBACAN,WAAWM,OAAO,GAAGS,WAAWN,cAAcC;YAChD;QACF;IACF,GACA;QAACR;QAAUE;QAAQJ;KAAW;IAGhC,OAAOO;AACT,EAAE"}
+{"version":3,"sources":["../../../src/hooks/useWaitTransitionFinish.ts"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\n\nexport const useWaitTransitionFinish = (): ((\n  element: HTMLElement | undefined | null,\n  eventHandler: (e?: TransitionEvent) => void,\n  durationFallback: number,\n) => void) => {\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const detach = React.useRef(noop);\n\n  const remove = React.useCallback(() => {\n    detach.current();\n    detach.current = noop;\n  }, []);\n\n  const waitTransitionFinish = React.useCallback(\n    (\n      element: HTMLElement | undefined | null,\n      eventHandler: (e?: TransitionEvent) => void,\n      durationFallback: number,\n    ) => {\n      if (!element) {\n        return;\n      }\n\n      if (!element.ownerDocument.hidden) {\n        remove();\n        element.addEventListener('transitionend', eventHandler);\n        detach.current = () => {\n          element.removeEventListener('transitionend', eventHandler);\n        };\n      } else {\n        if (timeoutRef?.current) {\n          clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(eventHandler, durationFallback);\n      }\n    },\n    [remove, timeoutRef],\n  );\n\n  return waitTransitionFinish;\n};\n"],"names":["React","noop","useWaitTransitionFinish","timeoutRef","useRef","detach","remove","useCallback","current","waitTransitionFinish","element","eventHandler","durationFallback","ownerDocument","hidden","addEventListener","removeEventListener","clearTimeout","setTimeout"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAO,MAAMC,0BAA0B;IAKrC,MAAMC,aAAaH,MAAMI,MAAM,CAAuC;IACtE,MAAMC,SAASL,MAAMI,MAAM,CAACH;IAE5B,MAAMK,SAASN,MAAMO,WAAW,CAAC;QAC/BF,OAAOG,OAAO;QACdH,OAAOG,OAAO,GAAGP;IACnB,GAAG,EAAE;IAEL,MAAMQ,uBAAuBT,MAAMO,WAAW,CAC5C,CACEG,SACAC,cACAC;QAEA,IAAI,CAACF,SAAS;YACZ;QACF;QAEA,IAAI,CAACA,QAAQG,aAAa,CAACC,MAAM,EAAE;YACjCR;YACAI,QAAQK,gBAAgB,CAAC,iBAAiBJ;YAC1CN,OAAOG,OAAO,GAAG;gBACfE,QAAQM,mBAAmB,CAAC,iBAAiBL;YAC/C;QACF,OAAO;YACL,IAAIR,YAAYK,SAAS;gBACvBS,aAAad,WAAWK,OAAO;YACjC;YACAL,WAAWK,OAAO,GAAGU,WAAWP,cAAcC;QAChD;IACF,GACA;QAACN;QAAQH;KAAW;IAGtB,OAAOM;AACT,EAAE"}

package/dist/cssm/index.js

@@ -103,6 +103,7 @@ export { Search } from "./components/Search/Search.js";
 export { Tabs } from "./components/Tabs/Tabs.js";
 export { TabsItem } from "./components/TabsItem/TabsItem.js";
 export { Spinner } from "./components/Spinner/Spinner.js";
+export { ExpressiveSpinner as unstable_ExpressiveSpinner } from "./components/Spinner/ExpressiveSpinner/ExpressiveSpinner.js";
 export { PullToRefresh } from "./components/PullToRefresh/PullToRefresh.js";
 export { Link } from "./components/Link/Link.js";
 export { Mark } from "./components/Mark/Mark.js";