@vkontakte/vkui 5.4.1 → 5.4.3

package/dist/cssm/styles/constants.css

@@ -26,10 +26,10 @@
 
   /* z_index */
   --vkui_internal--z_index_cell_dragging: 1;
-  --vkui_internal--z_index_pull_to_refresh: 1;
   --vkui_internal--z_index_tabs: 2;
   --vkui_internal--z_index_fixed_layout: 3;
   --vkui_internal--z_index_panel_header_context: 4;
+  --vkui_internal--z_index_pull_to_refresh: 9;
   --vkui_internal--z_index_panel_header_fixed: 10;
   --vkui_internal--z_index_split_layout_panel_header: 11;
 
@@ -52,7 +52,8 @@
 
   /* z_index ImageBase isolate */
   --vkui_internal--z_index_image_base_overlay: 0;
-  --vkui_internal--z_index_image_base_badge: 1;
+  --vkui_internal--z_index_image_base_border: 1;
+  --vkui_internal--z_index_image_base_badge: 2;
 }
 
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

package/dist/hooks/useTodayDate.js

@@ -1,6 +1,7 @@
 import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
 import React from "react";
-import { getMillisecondsToTomorrow } from "../lib/date";
+import { getMillisecondsToTomorrow, isSameDay } from "../lib/date";
+import { useDOM } from "../lib/dom";
 /**
  * Опционально обновляемая дата сегодняшнего дня
  *
@@ -11,23 +12,45 @@ import { getMillisecondsToTomorrow } from "../lib/date";
  * @param listenDayChangesForUpdate - флаг по которому определяется, будет ли создаваться подписка на смену календарного дня
  */ export function useTodayDate() {
     var listenDayChangesForUpdate = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+    var _useDOM = useDOM(), document = _useDOM.document, window = _useDOM.window;
     var _React_useState = _sliced_to_array(React.useState(function() {
         return new Date();
     }), 2), todayDate = _React_useState[0], setTodayDate = _React_useState[1];
     React.useEffect(function() {
-        if (!listenDayChangesForUpdate) {
+        if (!listenDayChangesForUpdate || !document || !window) {
             return;
         }
-        var timeToDayChange = getMillisecondsToTomorrow(todayDate);
-        var timeout = setTimeout(function() {
-            setTodayDate(new Date());
-        }, timeToDayChange);
+        var timeout = undefined;
+        var recalcTimeout = function() {
+            if (document.visibilityState === "visible") {
+                var now = new Date();
+                var timeToDayChange = getMillisecondsToTomorrow(now);
+                // Удаляем старый таймаут
+                window.clearTimeout(timeout);
+                // Создаем новый таймаут
+                timeout = window.setTimeout(function() {
+                    setTodayDate(now);
+                }, timeToDayChange);
+                // Если todayDate не обновился в таймаут - обновить при заходе на вкладку
+                if (!isSameDay(todayDate, now)) {
+                    setTodayDate(now);
+                }
+            }
+        };
+        recalcTimeout();
+        // Создаем слушатель visibilitychange, чтобы предотвратить пропуск обновления стейта после заморозки вкладки
+        // Если человек ее долго не трогал или закрывал крышку ноута и тп
+        // https://developer.chrome.com/blog/page-lifecycle-api/
+        document.addEventListener("visibilitychange", recalcTimeout);
         return function() {
-            clearTimeout(timeout);
+            window.clearTimeout(timeout);
+            document.removeEventListener("visibilitychange", recalcTimeout);
         };
     }, [
+        document,
         listenDayChangesForUpdate,
-        todayDate
+        todayDate,
+        window
     ]);
     return todayDate;
 }

package/dist/hooks/useTodayDate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useTodayDate.ts"],"sourcesContent":["import React from 'react';\nimport { getMillisecondsToTomorrow } from '../lib/date';\n\n/**\n * Опционально обновляемая дата сегодняшнего дня\n *\n * Дата - сегодня (в соответствии с системным временем)\n *\n * Часы, минуты, секунды, миллисекунды - произвольные\n *\n * @param listenDayChangesForUpdate - флаг по которому определяется, будет ли создаваться подписка на смену календарного дня\n */\nexport function useTodayDate(listenDayChangesForUpdate = false) {\n  const [todayDate, setTodayDate] = React.useState(() => new Date());\n\n  React.useEffect(() => {\n    if (!listenDayChangesForUpdate) {\n      return;\n    }\n\n    const timeToDayChange = getMillisecondsToTomorrow(todayDate);\n\n    const timeout = setTimeout(() => {\n      setTodayDate(new Date());\n    }, timeToDayChange);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [listenDayChangesForUpdate, todayDate]);\n\n  return todayDate;\n}\n"],"names":["React","getMillisecondsToTomorrow","useTodayDate","listenDayChangesForUpdate","useState","Date","todayDate","setTodayDate","useEffect","timeToDayChange","timeout","setTimeout","clearTimeout"],"mappings":";AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,yBAAyB,QAAQ,cAAc;AAExD;;;;;;;;CAQC,GACD,OAAO,SAASC,eAAgD;QAAnCC,4BAAAA,iEAA4B,KAAK;IAC5D,IAAkCH,mCAAAA,MAAMI,QAAQ,CAAC;eAAM,IAAIC;YAApDC,YAA2BN,oBAAhBO,eAAgBP;IAElCA,MAAMQ,SAAS,CAAC,WAAM;QACpB,IAAI,CAACL,2BAA2B;YAC9B;QACF,CAAC;QAED,IAAMM,kBAAkBR,0BAA0BK;QAElD,IAAMI,UAAUC,WAAW,WAAM;YAC/BJ,aAAa,IAAIF;QACnB,GAAGI;QAEH,OAAO,WAAM;YACXG,aAAaF;QACf;IACF,GAAG;QAACP;QAA2BG;KAAU;IAEzC,OAAOA;AACT,CAAC"}
+{"version":3,"sources":["../../src/hooks/useTodayDate.ts"],"sourcesContent":["import React from 'react';\nimport { getMillisecondsToTomorrow, isSameDay } from '../lib/date';\nimport { useDOM } from '../lib/dom';\n\n/**\n * Опционально обновляемая дата сегодняшнего дня\n *\n * Дата - сегодня (в соответствии с системным временем)\n *\n * Часы, минуты, секунды, миллисекунды - произвольные\n *\n * @param listenDayChangesForUpdate - флаг по которому определяется, будет ли создаваться подписка на смену календарного дня\n */\nexport function useTodayDate(listenDayChangesForUpdate = false) {\n  const { document, window } = useDOM();\n  const [todayDate, setTodayDate] = React.useState(() => new Date());\n\n  React.useEffect(() => {\n    if (!listenDayChangesForUpdate || !document || !window) {\n      return;\n    }\n\n    let timeout: number | undefined = undefined;\n\n    const recalcTimeout = () => {\n      if (document.visibilityState === 'visible') {\n        const now = new Date();\n\n        const timeToDayChange = getMillisecondsToTomorrow(now);\n\n        // Удаляем старый таймаут\n        window.clearTimeout(timeout);\n\n        // Создаем новый таймаут\n        timeout = window.setTimeout(() => {\n          setTodayDate(now);\n        }, timeToDayChange);\n\n        // Если todayDate не обновился в таймаут - обновить при заходе на вкладку\n        if (!isSameDay(todayDate, now)) {\n          setTodayDate(now);\n        }\n      }\n    };\n\n    recalcTimeout();\n\n    // Создаем слушатель visibilitychange, чтобы предотвратить пропуск обновления стейта после заморозки вкладки\n    // Если человек ее долго не трогал или закрывал крышку ноута и тп\n    // https://developer.chrome.com/blog/page-lifecycle-api/\n    document.addEventListener('visibilitychange', recalcTimeout);\n\n    return () => {\n      window.clearTimeout(timeout);\n      document.removeEventListener('visibilitychange', recalcTimeout);\n    };\n  }, [document, listenDayChangesForUpdate, todayDate, window]);\n\n  return todayDate;\n}\n"],"names":["React","getMillisecondsToTomorrow","isSameDay","useDOM","useTodayDate","listenDayChangesForUpdate","document","window","useState","Date","todayDate","setTodayDate","useEffect","timeout","undefined","recalcTimeout","visibilityState","now","timeToDayChange","clearTimeout","setTimeout","addEventListener","removeEventListener"],"mappings":";AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,yBAAyB,EAAEC,SAAS,QAAQ,cAAc;AACnE,SAASC,MAAM,QAAQ,aAAa;AAEpC;;;;;;;;CAQC,GACD,OAAO,SAASC,eAAgD;QAAnCC,4BAAAA,iEAA4B,KAAK;IAC5D,IAA6BF,UAAAA,UAArBG,WAAqBH,QAArBG,UAAUC,SAAWJ,QAAXI;IAClB,IAAkCP,mCAAAA,MAAMQ,QAAQ,CAAC;eAAM,IAAIC;YAApDC,YAA2BV,oBAAhBW,eAAgBX;IAElCA,MAAMY,SAAS,CAAC,WAAM;QACpB,IAAI,CAACP,6BAA6B,CAACC,YAAY,CAACC,QAAQ;YACtD;QACF,CAAC;QAED,IAAIM,UAA8BC;QAElC,IAAMC,gBAAgB,WAAM;YAC1B,IAAIT,SAASU,eAAe,KAAK,WAAW;gBAC1C,IAAMC,MAAM,IAAIR;gBAEhB,IAAMS,kBAAkBjB,0BAA0BgB;gBAElD,yBAAyB;gBACzBV,OAAOY,YAAY,CAACN;gBAEpB,wBAAwB;gBACxBA,UAAUN,OAAOa,UAAU,CAAC,WAAM;oBAChCT,aAAaM;gBACf,GAAGC;gBAEH,yEAAyE;gBACzE,IAAI,CAAChB,UAAUQ,WAAWO,MAAM;oBAC9BN,aAAaM;gBACf,CAAC;YACH,CAAC;QACH;QAEAF;QAEA,4GAA4G;QAC5G,iEAAiE;QACjE,wDAAwD;QACxDT,SAASe,gBAAgB,CAAC,oBAAoBN;QAE9C,OAAO,WAAM;YACXR,OAAOY,YAAY,CAACN;YACpBP,SAASgB,mBAAmB,CAAC,oBAAoBP;QACnD;IACF,GAAG;QAACT;QAAUD;QAA2BK;QAAWH;KAAO;IAE3D,OAAOG;AACT,CAAC"}