@alfalab/core-components 48.25.0 → 48.26.0-beta.0

package/bottom-sheet/component.js

@@ -31,8 +31,8 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
     var _g, _h;
     var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _j = _a.titleSize, titleSize = _j === void 0 ? 'default' : _j, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _k = _a.titleAlign, titleAlign = _k === void 0 ? 'left' : _k, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _l = _a.stickyFooter, stickyFooter = _l === void 0 ? true : _l, _m = _a.initialHeight, initialHeight = _m === void 0 ? 'default' : _m, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _o = _a.transitionProps, transitionProps = _o === void 0 ? {} : _o, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _p = _a.swipeable, swipeable = _p === void 0 ? true : _p, _q = _a.swipeableContent, swipeableContent = _q === void 0 ? true : _q, _r = _a.swipeThreshold, swipeThreshold = _r === void 0 ? 5 : _r, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _s = _a.scrollableContainerRef, scrollableContainerRef = _s === void 0 ? function () { return null; } : _s, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _t = _a.sheetContainerRef, sheetContainerRef = _t === void 0 ? function () { return null; } : _t, _u = _a.headerOffset, headerOffset = _u === void 0 ? 24 : _u, _v = _a.adjustContainerHeight, adjustContainerHeight = _v === void 0 ? adjustContainerHeightDefault : _v, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _w = _a.iOSLock, iOSLock = _w === void 0 ? false : _w, _x = _a.virtualKeyboard, virtualKeyboard = _x === void 0 ? false : _x;
     var windowHeight = (_g = reactDiv100vh.use100vh()) !== null && _g !== void 0 ? _g : 0;
-    var visualViewportSize = hooks_useVisualviewportSize.useVisualViewportSize();
-    var fullHeight = virtualKeyboard ? (_h = visualViewportSize === null || visualViewportSize === void 0 ? void 0 : visualViewportSize.height) !== null && _h !== void 0 ? _h : 0 : windowHeight;
+    var visibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize(virtualKeyboard);
+    var fullHeight = virtualKeyboard ? (_h = visibleViewportSize === null || visibleViewportSize === void 0 ? void 0 : visibleViewportSize.height) !== null && _h !== void 0 ? _h : 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
     fullHeight = adjustContainerHeight(fullHeight);
@@ -363,8 +363,8 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
             ? "".concat(lastMagneticArea, "px")
             : 'unset',
         maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
-        marginBottom: virtualKeyboard && visualViewportSize && windowHeight > visualViewportSize.height
-            ? windowHeight - visualViewportSize.height - visualViewportSize.offsetTop
+        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
             : undefined,
     }); };
     var renderMarker = function () {

package/bottom-sheet/cssm/component.js

@@ -30,8 +30,8 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
     var _g, _h;
     var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _j = _a.titleSize, titleSize = _j === void 0 ? 'default' : _j, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _k = _a.titleAlign, titleAlign = _k === void 0 ? 'left' : _k, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _l = _a.stickyFooter, stickyFooter = _l === void 0 ? true : _l, _m = _a.initialHeight, initialHeight = _m === void 0 ? 'default' : _m, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _o = _a.transitionProps, transitionProps = _o === void 0 ? {} : _o, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _p = _a.swipeable, swipeable = _p === void 0 ? true : _p, _q = _a.swipeableContent, swipeableContent = _q === void 0 ? true : _q, _r = _a.swipeThreshold, swipeThreshold = _r === void 0 ? 5 : _r, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _s = _a.scrollableContainerRef, scrollableContainerRef = _s === void 0 ? function () { return null; } : _s, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _t = _a.sheetContainerRef, sheetContainerRef = _t === void 0 ? function () { return null; } : _t, _u = _a.headerOffset, headerOffset = _u === void 0 ? 24 : _u, _v = _a.adjustContainerHeight, adjustContainerHeight = _v === void 0 ? adjustContainerHeightDefault : _v, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _w = _a.iOSLock, iOSLock = _w === void 0 ? false : _w, _x = _a.virtualKeyboard, virtualKeyboard = _x === void 0 ? false : _x;
     var windowHeight = (_g = reactDiv100vh.use100vh()) !== null && _g !== void 0 ? _g : 0;
-    var visualViewportSize = hooks_useVisualviewportSize.useVisualViewportSize();
-    var fullHeight = virtualKeyboard ? (_h = visualViewportSize === null || visualViewportSize === void 0 ? void 0 : visualViewportSize.height) !== null && _h !== void 0 ? _h : 0 : windowHeight;
+    var visibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize(virtualKeyboard);
+    var fullHeight = virtualKeyboard ? (_h = visibleViewportSize === null || visibleViewportSize === void 0 ? void 0 : visibleViewportSize.height) !== null && _h !== void 0 ? _h : 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
     fullHeight = adjustContainerHeight(fullHeight);
@@ -362,8 +362,8 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
             ? "".concat(lastMagneticArea, "px")
             : 'unset',
         maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
-        marginBottom: virtualKeyboard && visualViewportSize && windowHeight > visualViewportSize.height
-            ? windowHeight - visualViewportSize.height - visualViewportSize.offsetTop
+        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
             : undefined,
     }); };
     var renderMarker = function () {

package/bottom-sheet/cssm/hooks/index.d.ts

@@ -1 +1 @@
-export { useVisualViewportSize, useVisibleViewportSize } from "./use-visualviewport-size";
+export { useVisibleViewportSize } from "./use-visualviewport-size";

package/bottom-sheet/cssm/hooks/index.js

@@ -5,4 +5,3 @@ var hooks_useVisualviewportSize = require('./use-visualviewport-size.js');
 
 
 exports.useVisibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize;
-exports.useVisualViewportSize = hooks_useVisualviewportSize.useVisualViewportSize;

package/bottom-sheet/cssm/hooks/use-visualviewport-size.d.ts

@@ -1,7 +1,3 @@
-type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetLeft' | 'offsetTop' | 'pageLeft' | 'pageTop' | 'scale' | 'width'>;
-declare function useVisualViewportSize(): VisualViewportSize | null;
-/**
- * @deprecated use {@link useVisualViewportSize}
- */
+type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetTop'>;
 declare function useVisibleViewportSize(enabled?: boolean): VisualViewportSize | null;
-export { useVisualViewportSize, useVisibleViewportSize };
+export { useVisibleViewportSize };

package/bottom-sheet/cssm/hooks/use-visualviewport-size.js

@@ -1,60 +1,34 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
-var shim = require('use-sync-external-store/shim');
+var React = require('react');
 var coreComponentsShared = require('../../../shared/cssm');
 
-var visualViewportSize = coreComponentsShared.isClient() ? getVisualViewportSize() : null;
-var listeners = [];
-function getVisualViewportSize() {
-    var visualViewport = window.visualViewport;
-    if (coreComponentsShared.isNullable(visualViewport)) {
+var measureVisualViewport = function (visualViewport) {
+    if (!visualViewport)
         return null;
-    }
-    var height = visualViewport.height, offsetLeft = visualViewport.offsetLeft, offsetTop = visualViewport.offsetTop, pageLeft = visualViewport.pageLeft, pageTop = visualViewport.pageTop, scale = visualViewport.scale, width = visualViewport.width;
-    return { height: height, offsetLeft: offsetLeft, offsetTop: offsetTop, pageLeft: pageLeft, pageTop: pageTop, scale: scale, width: width };
-}
-function callback() {
-    visualViewportSize = getVisualViewportSize();
-    listeners.forEach(function (listener) {
-        listener();
-    });
-}
-function subscribe(listener) {
-    var visualViewport = window.visualViewport;
-    if (coreComponentsShared.isNullable(visualViewport)) {
-        return coreComponentsShared.noop;
-    }
-    if (listeners.length === 0) {
-        visualViewport.addEventListener('resize', callback);
-        visualViewport.addEventListener('scroll', callback);
-    }
-    listeners = tslib.__spreadArray(tslib.__spreadArray([], listeners, true), [listener], false);
-    return function () {
-        listeners = listeners.filter(function (l) { return l !== listener; });
-        if (listeners.length === 0) {
-            visualViewport.removeEventListener('resize', callback);
-            visualViewport.removeEventListener('scroll', callback);
-        }
-    };
-}
-function getSnapshot() {
-    return visualViewportSize;
-}
-function getServerSnapshot() {
-    return null;
-}
-function useVisualViewportSize() {
-    return shim.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
-/**
- * @deprecated use {@link useVisualViewportSize}
- */
+    var height = visualViewport.height, offsetTop = visualViewport.offsetTop;
+    return { height: height, offsetTop: offsetTop };
+};
 function useVisibleViewportSize(enabled) {
     if (enabled === void 0) { enabled = false; }
-    var size = useVisualViewportSize();
-    return enabled ? size : null;
+    var _a = React.useState(function () {
+        return coreComponentsShared.isClient() ? measureVisualViewport(window.visualViewport) : null;
+    }), size = _a[0], setSize = _a[1];
+    React.useEffect(function () {
+        var visualViewport = window.visualViewport;
+        if (!coreComponentsShared.isClient() || !enabled || !visualViewport)
+            return coreComponentsShared.fnUtils.noop;
+        var listener = function (event) {
+            return setSize(measureVisualViewport(event.target));
+        };
+        visualViewport.addEventListener('resize', listener);
+        visualViewport.addEventListener('scroll', listener);
+        return function () {
+            visualViewport.removeEventListener('resize', listener);
+            visualViewport.removeEventListener('scroll', listener);
+        };
+    }, [enabled]);
+    return size;
 }
 
 exports.useVisibleViewportSize = useVisibleViewportSize;
-exports.useVisualViewportSize = useVisualViewportSize;

package/bottom-sheet/esm/component.js

@@ -10,12 +10,11 @@ import { Footer } from './components/footer/Component.js';
 import { Header } from './components/header/Component.js';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
 import { horizontalDirections } from './consts/swipeConsts.js';
-import { useVisualViewportSize } from './hooks/use-visualviewport-size.js';
+import { useVisibleViewportSize } from './hooks/use-visualviewport-size.js';
 import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
 import '../../navigation-bar-private/esm';
 import '../../backdrop/esm';
 import './enums/swipeEnums.js';
-import 'use-sync-external-store/shim';
 
 var styles = {"modal":"bottom-sheet__modal_1xixh","wrapper":"bottom-sheet__wrapper_1xixh","fullscreen":"bottom-sheet__fullscreen_1xixh","component":"bottom-sheet__component_1xixh","withTransition":"bottom-sheet__withTransition_1xixh","scrollableContainer":"bottom-sheet__scrollableContainer_1xixh","marker":"bottom-sheet__marker_1xixh","defaultMarker":"bottom-sheet__defaultMarker_1xixh","content":"bottom-sheet__content_1xixh","noHeader":"bottom-sheet__noHeader_1xixh","noFooter":"bottom-sheet__noFooter_1xixh","scrollLocked":"bottom-sheet__scrollLocked_1xixh","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1xixh","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1xixh","appear":"bottom-sheet__appear_1xixh","enter":"bottom-sheet__enter_1xixh","appearActive":"bottom-sheet__appearActive_1xixh","enterActive":"bottom-sheet__enterActive_1xixh","enterDone":"bottom-sheet__enterDone_1xixh","appearDone":"bottom-sheet__appearDone_1xixh","exit":"bottom-sheet__exit_1xixh","exitActive":"bottom-sheet__exitActive_1xixh","safeAreaBottom":"bottom-sheet__safeAreaBottom_1xixh","background-accent":"bottom-sheet__background-accent_1xixh","background-info":"bottom-sheet__background-info_1xixh","background-attention-muted":"bottom-sheet__background-attention-muted_1xixh","background-positive-muted":"bottom-sheet__background-positive-muted_1xixh","background-negative-muted":"bottom-sheet__background-negative-muted_1xixh","background-primary":"bottom-sheet__background-primary_1xixh","background-primary-inverted":"bottom-sheet__background-primary-inverted_1xixh","background-secondary":"bottom-sheet__background-secondary_1xixh","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1xixh","background-tertiary":"bottom-sheet__background-tertiary_1xixh","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1xixh","background-quaternary":"bottom-sheet__background-quaternary_1xixh","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1xixh","background-specialbg-component":"bottom-sheet__background-specialbg-component_1xixh","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1xixh","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1xixh","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1xixh","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1xixh","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1xixh","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1xixh","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1xixh","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1xixh"};
 require('./index.css');
@@ -27,8 +26,8 @@ var BottomSheet = forwardRef(function (_a, ref) {
     var _g, _h;
     var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _j = _a.titleSize, titleSize = _j === void 0 ? 'default' : _j, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _k = _a.titleAlign, titleAlign = _k === void 0 ? 'left' : _k, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _l = _a.stickyFooter, stickyFooter = _l === void 0 ? true : _l, _m = _a.initialHeight, initialHeight = _m === void 0 ? 'default' : _m, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _o = _a.transitionProps, transitionProps = _o === void 0 ? {} : _o, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _p = _a.swipeable, swipeable = _p === void 0 ? true : _p, _q = _a.swipeableContent, swipeableContent = _q === void 0 ? true : _q, _r = _a.swipeThreshold, swipeThreshold = _r === void 0 ? 5 : _r, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _s = _a.scrollableContainerRef, scrollableContainerRef = _s === void 0 ? function () { return null; } : _s, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _t = _a.sheetContainerRef, sheetContainerRef = _t === void 0 ? function () { return null; } : _t, _u = _a.headerOffset, headerOffset = _u === void 0 ? 24 : _u, _v = _a.adjustContainerHeight, adjustContainerHeight = _v === void 0 ? adjustContainerHeightDefault : _v, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _w = _a.iOSLock, iOSLock = _w === void 0 ? false : _w, _x = _a.virtualKeyboard, virtualKeyboard = _x === void 0 ? false : _x;
     var windowHeight = (_g = use100vh()) !== null && _g !== void 0 ? _g : 0;
-    var visualViewportSize = useVisualViewportSize();
-    var fullHeight = virtualKeyboard ? (_h = visualViewportSize === null || visualViewportSize === void 0 ? void 0 : visualViewportSize.height) !== null && _h !== void 0 ? _h : 0 : windowHeight;
+    var visibleViewportSize = useVisibleViewportSize(virtualKeyboard);
+    var fullHeight = virtualKeyboard ? (_h = visibleViewportSize === null || visibleViewportSize === void 0 ? void 0 : visibleViewportSize.height) !== null && _h !== void 0 ? _h : 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
     fullHeight = adjustContainerHeight(fullHeight);
@@ -359,8 +358,8 @@ var BottomSheet = forwardRef(function (_a, ref) {
             ? "".concat(lastMagneticArea, "px")
             : 'unset',
         maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
-        marginBottom: virtualKeyboard && visualViewportSize && windowHeight > visualViewportSize.height
-            ? windowHeight - visualViewportSize.height - visualViewportSize.offsetTop
+        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
             : undefined,
     }); };
     var renderMarker = function () {

package/bottom-sheet/esm/hooks/index.d.ts

@@ -1 +1 @@
-export { useVisualViewportSize, useVisibleViewportSize } from "./use-visualviewport-size";
+export { useVisibleViewportSize } from "./use-visualviewport-size";

package/bottom-sheet/esm/hooks/index.js

@@ -1,4 +1,3 @@
-export { useVisibleViewportSize, useVisualViewportSize } from './use-visualviewport-size.js';
-import 'tslib';
-import 'use-sync-external-store/shim';
+export { useVisibleViewportSize } from './use-visualviewport-size.js';
+import 'react';
 import '../../../shared/esm';

package/bottom-sheet/esm/hooks/use-visualviewport-size.d.ts

@@ -1,7 +1,3 @@
-type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetLeft' | 'offsetTop' | 'pageLeft' | 'pageTop' | 'scale' | 'width'>;
-declare function useVisualViewportSize(): VisualViewportSize | null;
-/**
- * @deprecated use {@link useVisualViewportSize}
- */
+type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetTop'>;
 declare function useVisibleViewportSize(enabled?: boolean): VisualViewportSize | null;
-export { useVisualViewportSize, useVisibleViewportSize };
+export { useVisibleViewportSize };

package/bottom-sheet/esm/hooks/use-visualviewport-size.js

@@ -1,57 +1,32 @@
-import { __spreadArray } from 'tslib';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { isClient, isNullable, noop } from '../../../shared/esm';
+import { useState, useEffect } from 'react';
+import { isClient, fnUtils } from '../../../shared/esm';
 
-var visualViewportSize = isClient() ? getVisualViewportSize() : null;
-var listeners = [];
-function getVisualViewportSize() {
-    var visualViewport = window.visualViewport;
-    if (isNullable(visualViewport)) {
+var measureVisualViewport = function (visualViewport) {
+    if (!visualViewport)
         return null;
-    }
-    var height = visualViewport.height, offsetLeft = visualViewport.offsetLeft, offsetTop = visualViewport.offsetTop, pageLeft = visualViewport.pageLeft, pageTop = visualViewport.pageTop, scale = visualViewport.scale, width = visualViewport.width;
-    return { height: height, offsetLeft: offsetLeft, offsetTop: offsetTop, pageLeft: pageLeft, pageTop: pageTop, scale: scale, width: width };
-}
-function callback() {
-    visualViewportSize = getVisualViewportSize();
-    listeners.forEach(function (listener) {
-        listener();
-    });
-}
-function subscribe(listener) {
-    var visualViewport = window.visualViewport;
-    if (isNullable(visualViewport)) {
-        return noop;
-    }
-    if (listeners.length === 0) {
-        visualViewport.addEventListener('resize', callback);
-        visualViewport.addEventListener('scroll', callback);
-    }
-    listeners = __spreadArray(__spreadArray([], listeners, true), [listener], false);
-    return function () {
-        listeners = listeners.filter(function (l) { return l !== listener; });
-        if (listeners.length === 0) {
-            visualViewport.removeEventListener('resize', callback);
-            visualViewport.removeEventListener('scroll', callback);
-        }
-    };
-}
-function getSnapshot() {
-    return visualViewportSize;
-}
-function getServerSnapshot() {
-    return null;
-}
-function useVisualViewportSize() {
-    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
-/**
- * @deprecated use {@link useVisualViewportSize}
- */
+    var height = visualViewport.height, offsetTop = visualViewport.offsetTop;
+    return { height: height, offsetTop: offsetTop };
+};
 function useVisibleViewportSize(enabled) {
     if (enabled === void 0) { enabled = false; }
-    var size = useVisualViewportSize();
-    return enabled ? size : null;
+    var _a = useState(function () {
+        return isClient() ? measureVisualViewport(window.visualViewport) : null;
+    }), size = _a[0], setSize = _a[1];
+    useEffect(function () {
+        var visualViewport = window.visualViewport;
+        if (!isClient() || !enabled || !visualViewport)
+            return fnUtils.noop;
+        var listener = function (event) {
+            return setSize(measureVisualViewport(event.target));
+        };
+        visualViewport.addEventListener('resize', listener);
+        visualViewport.addEventListener('scroll', listener);
+        return function () {
+            visualViewport.removeEventListener('resize', listener);
+            visualViewport.removeEventListener('scroll', listener);
+        };
+    }, [enabled]);
+    return size;
 }
 
-export { useVisibleViewportSize, useVisualViewportSize };
+export { useVisibleViewportSize };

package/bottom-sheet/esm/index.js

@@ -16,4 +16,3 @@ import '../../backdrop/esm';
 import './consts/swipeConsts.js';
 import './enums/swipeEnums.js';
 import './hooks/use-visualviewport-size.js';
-import 'use-sync-external-store/shim';

package/bottom-sheet/hooks/index.d.ts

@@ -1 +1 @@
-export { useVisualViewportSize, useVisibleViewportSize } from "./use-visualviewport-size";
+export { useVisibleViewportSize } from "./use-visualviewport-size";

package/bottom-sheet/hooks/index.js

@@ -5,4 +5,3 @@ var hooks_useVisualviewportSize = require('./use-visualviewport-size.js');
 
 
 exports.useVisibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize;
-exports.useVisualViewportSize = hooks_useVisualviewportSize.useVisualViewportSize;

package/bottom-sheet/hooks/use-visualviewport-size.d.ts

@@ -1,7 +1,3 @@
-type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetLeft' | 'offsetTop' | 'pageLeft' | 'pageTop' | 'scale' | 'width'>;
-declare function useVisualViewportSize(): VisualViewportSize | null;
-/**
- * @deprecated use {@link useVisualViewportSize}
- */
+type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetTop'>;
 declare function useVisibleViewportSize(enabled?: boolean): VisualViewportSize | null;
-export { useVisualViewportSize, useVisibleViewportSize };
+export { useVisibleViewportSize };

package/bottom-sheet/hooks/use-visualviewport-size.js

@@ -1,60 +1,34 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
-var shim = require('use-sync-external-store/shim');
+var React = require('react');
 var coreComponentsShared = require('../../shared');
 
-var visualViewportSize = coreComponentsShared.isClient() ? getVisualViewportSize() : null;
-var listeners = [];
-function getVisualViewportSize() {
-    var visualViewport = window.visualViewport;
-    if (coreComponentsShared.isNullable(visualViewport)) {
+var measureVisualViewport = function (visualViewport) {
+    if (!visualViewport)
         return null;
-    }
-    var height = visualViewport.height, offsetLeft = visualViewport.offsetLeft, offsetTop = visualViewport.offsetTop, pageLeft = visualViewport.pageLeft, pageTop = visualViewport.pageTop, scale = visualViewport.scale, width = visualViewport.width;
-    return { height: height, offsetLeft: offsetLeft, offsetTop: offsetTop, pageLeft: pageLeft, pageTop: pageTop, scale: scale, width: width };
-}
-function callback() {
-    visualViewportSize = getVisualViewportSize();
-    listeners.forEach(function (listener) {
-        listener();
-    });
-}
-function subscribe(listener) {
-    var visualViewport = window.visualViewport;
-    if (coreComponentsShared.isNullable(visualViewport)) {
-        return coreComponentsShared.noop;
-    }
-    if (listeners.length === 0) {
-        visualViewport.addEventListener('resize', callback);
-        visualViewport.addEventListener('scroll', callback);
-    }
-    listeners = tslib.__spreadArray(tslib.__spreadArray([], listeners, true), [listener], false);
-    return function () {
-        listeners = listeners.filter(function (l) { return l !== listener; });
-        if (listeners.length === 0) {
-            visualViewport.removeEventListener('resize', callback);
-            visualViewport.removeEventListener('scroll', callback);
-        }
-    };
-}
-function getSnapshot() {
-    return visualViewportSize;
-}
-function getServerSnapshot() {
-    return null;
-}
-function useVisualViewportSize() {
-    return shim.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
-/**
- * @deprecated use {@link useVisualViewportSize}
- */
+    var height = visualViewport.height, offsetTop = visualViewport.offsetTop;
+    return { height: height, offsetTop: offsetTop };
+};
 function useVisibleViewportSize(enabled) {
     if (enabled === void 0) { enabled = false; }
-    var size = useVisualViewportSize();
-    return enabled ? size : null;
+    var _a = React.useState(function () {
+        return coreComponentsShared.isClient() ? measureVisualViewport(window.visualViewport) : null;
+    }), size = _a[0], setSize = _a[1];
+    React.useEffect(function () {
+        var visualViewport = window.visualViewport;
+        if (!coreComponentsShared.isClient() || !enabled || !visualViewport)
+            return coreComponentsShared.fnUtils.noop;
+        var listener = function (event) {
+            return setSize(measureVisualViewport(event.target));
+        };
+        visualViewport.addEventListener('resize', listener);
+        visualViewport.addEventListener('scroll', listener);
+        return function () {
+            visualViewport.removeEventListener('resize', listener);
+            visualViewport.removeEventListener('scroll', listener);
+        };
+    }, [enabled]);
+    return size;
 }
 
 exports.useVisibleViewportSize = useVisibleViewportSize;
-exports.useVisualViewportSize = useVisualViewportSize;

package/bottom-sheet/modern/component.js

@@ -9,12 +9,11 @@ import { Footer } from './components/footer/Component.js';
 import { Header } from './components/header/Component.js';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
 import { horizontalDirections } from './consts/swipeConsts.js';
-import { useVisualViewportSize } from './hooks/use-visualviewport-size.js';
+import { useVisibleViewportSize } from './hooks/use-visualviewport-size.js';
 import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
 import '../../navigation-bar-private/modern';
 import '../../backdrop/modern';
 import './enums/swipeEnums.js';
-import 'use-sync-external-store/shim';
 
 const styles = {"modal":"bottom-sheet__modal_1xixh","wrapper":"bottom-sheet__wrapper_1xixh","fullscreen":"bottom-sheet__fullscreen_1xixh","component":"bottom-sheet__component_1xixh","withTransition":"bottom-sheet__withTransition_1xixh","scrollableContainer":"bottom-sheet__scrollableContainer_1xixh","marker":"bottom-sheet__marker_1xixh","defaultMarker":"bottom-sheet__defaultMarker_1xixh","content":"bottom-sheet__content_1xixh","noHeader":"bottom-sheet__noHeader_1xixh","noFooter":"bottom-sheet__noFooter_1xixh","scrollLocked":"bottom-sheet__scrollLocked_1xixh","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1xixh","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1xixh","appear":"bottom-sheet__appear_1xixh","enter":"bottom-sheet__enter_1xixh","appearActive":"bottom-sheet__appearActive_1xixh","enterActive":"bottom-sheet__enterActive_1xixh","enterDone":"bottom-sheet__enterDone_1xixh","appearDone":"bottom-sheet__appearDone_1xixh","exit":"bottom-sheet__exit_1xixh","exitActive":"bottom-sheet__exitActive_1xixh","safeAreaBottom":"bottom-sheet__safeAreaBottom_1xixh","background-accent":"bottom-sheet__background-accent_1xixh","background-info":"bottom-sheet__background-info_1xixh","background-attention-muted":"bottom-sheet__background-attention-muted_1xixh","background-positive-muted":"bottom-sheet__background-positive-muted_1xixh","background-negative-muted":"bottom-sheet__background-negative-muted_1xixh","background-primary":"bottom-sheet__background-primary_1xixh","background-primary-inverted":"bottom-sheet__background-primary-inverted_1xixh","background-secondary":"bottom-sheet__background-secondary_1xixh","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1xixh","background-tertiary":"bottom-sheet__background-tertiary_1xixh","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1xixh","background-quaternary":"bottom-sheet__background-quaternary_1xixh","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1xixh","background-specialbg-component":"bottom-sheet__background-specialbg-component_1xixh","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1xixh","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1xixh","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1xixh","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1xixh","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1xixh","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1xixh","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1xixh","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1xixh"};
 require('./index.css');
@@ -23,8 +22,8 @@ const { isNil } = fnUtils;
 const adjustContainerHeightDefault = (value) => value;
 const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, disableFocusLock, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, swipeableContent = true, swipeThreshold = 5, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, headerOffset = 24, adjustContainerHeight = adjustContainerHeightDefault, onClose, onBack, onMagnetize, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, virtualKeyboard = false, }, ref) => {
     const windowHeight = use100vh() ?? 0;
-    const visualViewportSize = useVisualViewportSize();
-    let fullHeight = virtualKeyboard ? visualViewportSize?.height ?? 0 : windowHeight;
+    const visibleViewportSize = useVisibleViewportSize(virtualKeyboard);
+    let fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     const isFirstRender = fullHeight === 0;
     fullHeight = adjustContainerHeight(fullHeight);
@@ -368,8 +367,8 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
             ? `${lastMagneticArea}px`
             : 'unset',
         maxHeight: isFirstRender ? 0 : `${lastMagneticArea}px`,
-        marginBottom: virtualKeyboard && visualViewportSize && windowHeight > visualViewportSize.height
-            ? windowHeight - visualViewportSize.height - visualViewportSize.offsetTop
+        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
             : undefined,
     });
     const renderMarker = () => {

package/bottom-sheet/modern/hooks/index.d.ts

@@ -1 +1 @@
-export { useVisualViewportSize, useVisibleViewportSize } from "./use-visualviewport-size";
+export { useVisibleViewportSize } from "./use-visualviewport-size";

package/bottom-sheet/modern/hooks/index.js

@@ -1,3 +1,3 @@
-export { useVisibleViewportSize, useVisualViewportSize } from './use-visualviewport-size.js';
-import 'use-sync-external-store/shim';
+export { useVisibleViewportSize } from './use-visualviewport-size.js';
+import 'react';
 import '../../../shared/modern';

package/bottom-sheet/modern/hooks/use-visualviewport-size.d.ts

@@ -1,7 +1,3 @@
-type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetLeft' | 'offsetTop' | 'pageLeft' | 'pageTop' | 'scale' | 'width'>;
-declare function useVisualViewportSize(): VisualViewportSize | null;
-/**
- * @deprecated use {@link useVisualViewportSize}
- */
+type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetTop'>;
 declare function useVisibleViewportSize(enabled?: boolean): VisualViewportSize | null;
-export { useVisualViewportSize, useVisibleViewportSize };
+export { useVisibleViewportSize };

package/bottom-sheet/modern/hooks/use-visualviewport-size.js

@@ -1,55 +1,27 @@
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { isClient, isNullable, noop } from '../../../shared/modern';
+import { useState, useEffect } from 'react';
+import { isClient, fnUtils } from '../../../shared/modern';
 
-let visualViewportSize = isClient() ? getVisualViewportSize() : null;
-let listeners = [];
-function getVisualViewportSize() {
-    const { visualViewport } = window;
-    if (isNullable(visualViewport)) {
+const measureVisualViewport = (visualViewport) => {
+    if (!visualViewport)
         return null;
-    }
-    const { height, offsetLeft, offsetTop, pageLeft, pageTop, scale, width } = visualViewport;
-    return { height, offsetLeft, offsetTop, pageLeft, pageTop, scale, width };
-}
-function callback() {
-    visualViewportSize = getVisualViewportSize();
-    listeners.forEach((listener) => {
-        listener();
-    });
-}
-function subscribe(listener) {
-    const { visualViewport } = window;
-    if (isNullable(visualViewport)) {
-        return noop;
-    }
-    if (listeners.length === 0) {
-        visualViewport.addEventListener('resize', callback);
-        visualViewport.addEventListener('scroll', callback);
-    }
-    listeners = [...listeners, listener];
-    return () => {
-        listeners = listeners.filter((l) => l !== listener);
-        if (listeners.length === 0) {
-            visualViewport.removeEventListener('resize', callback);
-            visualViewport.removeEventListener('scroll', callback);
-        }
-    };
-}
-function getSnapshot() {
-    return visualViewportSize;
-}
-function getServerSnapshot() {
-    return null;
-}
-function useVisualViewportSize() {
-    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
-/**
- * @deprecated use {@link useVisualViewportSize}
- */
+    const { height, offsetTop } = visualViewport;
+    return { height, offsetTop };
+};
 function useVisibleViewportSize(enabled = false) {
-    const size = useVisualViewportSize();
-    return enabled ? size : null;
+    const [size, setSize] = useState(() => isClient() ? measureVisualViewport(window.visualViewport) : null);
+    useEffect(() => {
+        const { visualViewport } = window;
+        if (!isClient() || !enabled || !visualViewport)
+            return fnUtils.noop;
+        const listener = (event) => setSize(measureVisualViewport(event.target));
+        visualViewport.addEventListener('resize', listener);
+        visualViewport.addEventListener('scroll', listener);
+        return () => {
+            visualViewport.removeEventListener('resize', listener);
+            visualViewport.removeEventListener('scroll', listener);
+        };
+    }, [enabled]);
+    return size;
 }
 
-export { useVisibleViewportSize, useVisualViewportSize };
+export { useVisibleViewportSize };

package/bottom-sheet/modern/index.js

@@ -15,4 +15,3 @@ import '../../backdrop/modern';
 import './consts/swipeConsts.js';
 import './enums/swipeEnums.js';
 import './hooks/use-visualviewport-size.js';
-import 'use-sync-external-store/shim';

package/bottom-sheet/moderncssm/component.js

@@ -9,7 +9,7 @@ import { Footer } from './components/footer/Component.js';
 import { Header } from './components/header/Component.js';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
 import { horizontalDirections } from './consts/swipeConsts.js';
-import { useVisualViewportSize } from './hooks/use-visualviewport-size.js';
+import { useVisibleViewportSize } from './hooks/use-visualviewport-size.js';
 import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
 import styles from './index.module.css';
 import './components/footer/index.module.css';
@@ -17,14 +17,13 @@ import '../../navigation-bar-private/moderncssm';
 import './components/header/index.module.css';
 import '../../backdrop/moderncssm';
 import './enums/swipeEnums.js';
-import 'use-sync-external-store/shim';
 
 const { isNil } = fnUtils;
 const adjustContainerHeightDefault = (value) => value;
 const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, disableFocusLock, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, swipeableContent = true, swipeThreshold = 5, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, headerOffset = 24, adjustContainerHeight = adjustContainerHeightDefault, onClose, onBack, onMagnetize, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, virtualKeyboard = false, }, ref) => {
     const windowHeight = use100vh() ?? 0;
-    const visualViewportSize = useVisualViewportSize();
-    let fullHeight = virtualKeyboard ? visualViewportSize?.height ?? 0 : windowHeight;
+    const visibleViewportSize = useVisibleViewportSize(virtualKeyboard);
+    let fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     const isFirstRender = fullHeight === 0;
     fullHeight = adjustContainerHeight(fullHeight);
@@ -368,8 +367,8 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
             ? `${lastMagneticArea}px`
             : 'unset',
         maxHeight: isFirstRender ? 0 : `${lastMagneticArea}px`,
-        marginBottom: virtualKeyboard && visualViewportSize && windowHeight > visualViewportSize.height
-            ? windowHeight - visualViewportSize.height - visualViewportSize.offsetTop
+        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
             : undefined,
     });
     const renderMarker = () => {