47_26_9_beta

.changeset/angry-points-chew.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-international-phone-input': minor
+---
+
+Экспорт массива countriesData и его типа (для модификации по месту использования)

.changeset/dull-olives-bathe.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-vars': minor
+---
+
+Добавлена единица длины для нулевого значения

.changeset/five-eels-rescue.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-side-panel': patch
+---
+
+Добавлена поддержка безопасных отступов safe-area

.changeset/flat-crews-cover.md

@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-modal': patch
+'@alfalab/core-components-side-panel': patch
+---
+
+Добавлена обработка safe-area

.changeset/gold-maps-bell.md

@@ -0,0 +1,7 @@
+---
+'@alfalab/core-components-modal': patch
+'@alfalab/core-components-side-panel': patch
+---
+
+- Фикс паддинга заголовка компонента SidePanel в PWA c safe-area
+- Фикс паддинга заголовка компонента Modal в PWA c safe-area

.changeset/gold-maps-yell.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-bottom-sheet': minor
+---
+
+- Добавлено свойство *adjustContainerHeight* для возможности подстраивать высоту контейнера bottomSheet извне, например с учётом верхней и/или нижней safe-area

.changeset/silly-seas-lie.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-calendar': patch
+---
+
+Критическое исправление `month-only` календаря связанное с работой minDate/maxDate пропсов

.changeset/small-pigs-sell.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-gallery': patch
+---
+
+Добавлен отдельный компонент для single изображения, что сделать его независимым от swiper

.changeset/violet-dancers-check.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-international-phone-input': minor
+---
+
+добавлен опциональный проп customCountriesList, который можно использовать, чтобы переопределить дефолтный массив country-data

.changeset/weak-poems-fail.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-input': patch
+---
+
+Фикс вызова input.setSelectionRange

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components",
-    "version": "47.26.1",
+    "version": "47.26.8",
     "private": true,
     "workspaces": [
         "packages/*"

packages/base-modal/src/Component.tsx

@@ -625,6 +625,10 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
                                                 styles.content,
                                                 contentClassName,
                                                 contentProps?.className,
+                                                {
+                                                    [styles.hasFooter]: hasFooter,
+                                                    [styles.hasHeader]: hasHeader,
+                                                },
                                             )}
                                         >
                                             {children}

packages/base-modal/src/index.module.css

@@ -39,6 +39,18 @@ body:global(.is-locked) {
     display: flex;
     flex-direction: column;
     flex: 1;
+
+    &.hasFooter {
+        @media (display-mode: standalone) {
+            padding-bottom: unset;
+        }
+    }
+
+    &.hasHeader {
+        @media (display-mode: standalone) {
+            padding-top: unset;
+        }
+    }
 }
 
 .hidden {

packages/bottom-sheet/src/__snapshots__/component.test.tsx.snap

@@ -34,7 +34,7 @@ exports[`Bottom sheet Snapshots tests should match snapshot 1`] = `
           class="component modal appear appearActive"
         >
           <div
-            class="content"
+            class="content hasHeader"
           >
             <div
               class="wrapper"
@@ -123,7 +123,7 @@ exports[`Bottom sheet Snapshots tests should match snapshot with action button 1
           class="component modal appear appearActive"
         >
           <div
-            class="content"
+            class="content hasFooter hasHeader"
           >
             <div
               class="wrapper"

packages/bottom-sheet/src/component.tsx

@@ -36,6 +36,8 @@ import styles from './index.module.css';
 
 const { isNil } = fnUtils;
 
+const adjustContainerHeightDefault = (value: number) => value;
+
 export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
     (
         {
@@ -89,6 +91,7 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
             bottomSheetInstanceRef,
             sheetContainerRef = () => null,
             headerOffset = 24,
+            adjustContainerHeight = adjustContainerHeightDefault,
             onClose,
             onBack,
             onMagnetize,
@@ -110,11 +113,12 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
     ) => {
         const windowHeight = use100vh() ?? 0;
         const visibleViewportSize = useVisibleViewportSize(virtualKeyboard);
-        const fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
-
+        let fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
         // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
         const isFirstRender = fullHeight === 0;
 
+        fullHeight = adjustContainerHeight(fullHeight);
+
         const initialIndexRef = useRef<number | undefined>(initialActiveAreaIndex);
 
         const magneticAreas = useMemo(() => {
@@ -123,15 +127,21 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
                     convertPercentToNumber(area, fullHeight, headerOffset),
                 );
             }
+            let iOSViewHeight = 0;
 
-            const iOSViewHeight = isClient()
-                ? document?.documentElement?.clientHeight || window?.innerHeight
-                : 0;
+            if (isClient()) {
+                if (document?.documentElement?.clientHeight) {
+                    iOSViewHeight = adjustContainerHeight(document.documentElement.clientHeight);
+                } else {
+                    iOSViewHeight = window?.innerHeight;
+                }
+            }
 
             const viewHeight = os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
 
             return [0, viewHeight - headerOffset];
-        }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard, adjustContainerHeight]);
 
         const lastMagneticArea = magneticAreas[magneticAreas.length - 1];
 

packages/bottom-sheet/src/index.module.css

@@ -1,4 +1,5 @@
 @import '../../vars/src/index.css';
+@import '../../vars/src/safe-area.css';
 @import './vars.css';
 
 .modal {
@@ -141,7 +142,7 @@
 }
 
 .safeAreaBottom {
-    padding-bottom: env(safe-area-inset-bottom);
+    padding-bottom: var(--sab);
 }
 
 @mixin bg-class-list;

packages/bottom-sheet/src/types.ts

@@ -10,6 +10,10 @@ import type { BackgroundColorType } from '../../types';
 export type BottomSheetTitleAlign = 'center' | 'left';
 
 export type BottomSheetProps = {
+    /**
+     * Метод, позволяющий донастраивать высоту контейнера для BottomSheet, например с учётом safe-area
+     */
+    adjustContainerHeight?: (height: number) => number
     /**
      * Контент
      */

packages/calendar/src/__snapshots__/Component.test.tsx.snap

@@ -2474,19 +2474,6 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
               1925
             </span>
           </button>
-          <button
-            aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
-            data-date="-1451692800000"
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="label stretchText"
-            >
-              1924
-            </span>
-          </button>
         </div>
       </div>
     </div>

packages/calendar/src/components/calendar-mobile/Component.tsx

@@ -177,7 +177,9 @@ export const CalendarMonthOnlyView = ({
     const initialMonthIndex = useMemo(() => {
         const date = range.value || range.selectedFrom || activeMonth.getTime() || Date.now();
 
-        return activeMonths.findIndex((m) => isSameMonth(date, m.date));
+        const index = activeMonths.findIndex((m) => isSameMonth(date, m.date));
+
+        return Math.max(index, 0);
     }, [range.value, range.selectedFrom, activeMonth, activeMonths]);
 
     // заголовок должен становиться активным если выбран весь доступный период в месяце

packages/gallery/src/Component.tsx

@@ -5,6 +5,7 @@ import SwiperCore from 'swiper';
 import { BaseModal } from '@alfalab/core-components-base-modal';
 import { useMedia } from '@alfalab/hooks';
 
+import { Single } from './components/image-viewer/single';
 import { Header, HeaderMobile, ImageViewer, InfoBar, NavigationBar } from './components';
 import { GalleryContext } from './context';
 import { GalleryImage, ImageMeta } from './types';
@@ -240,9 +241,13 @@ export const Gallery: FC<GalleryProps> = ({
                 Backdrop={Backdrop}
                 onUnmount={onUnmount}
             >
-                <div className={styles.container}>
+                <div
+                    className={cn(styles.container, {
+                        [styles.mobile]: view !== 'desktop',
+                    })}
+                >
                     {view === 'desktop' ? <Header /> : <HeaderMobile />}
-                    <ImageViewer />
+                    {images.length === 1 ? <Single /> : <ImageViewer />}
                     <nav
                         className={cn({
                             [styles.navigationVideo]: isCurrentVideo && isMobile,