@alfalab/core-components 27.3.0 → 27.5.0-beta.0

package/calendar-input/modern/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, MouseEvent, ElementType } from "react";
 import { PopoverProps } from "../../popover";
 import { DateInputProps } from "../../date-input";
-import { CalendarProps } from "../../calendar";
+import { CalendarProps, CalendarMobileProps } from "../../calendar";
 type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Дополнительный класс
@@ -20,7 +20,7 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: CalendarProps & Record<string, unknown>;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -101,7 +101,7 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
      */
     useAnchorWidth?: boolean;
 };
-declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps, "children" | "value" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "dir" | "className" | "dataTestId" | "height" | "name" | "width" | "hidden" | "color" | "size" | "block" | "clear" | "multiple" | "disabled" | "leftAddons" | "rightAddons" | "colors" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "max" | "maxLength" | "min" | "minLength" | "readOnly" | "required" | "src" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef" | "onComplete"> & {
+declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps, "children" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "dataTestId" | "leftAddons" | "rightAddons" | "size" | "block" | "colors" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "height" | "max" | "min" | "width" | "crossOrigin" | "error" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "fieldClassName" | "labelClassName" | "addonsClassName" | "hint" | "bottomAddons" | "clear" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef" | "onComplete"> & {
     /**
      * Дополнительный класс
      */
@@ -117,7 +117,12 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | undefined;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
+        open: boolean;
+        title?: string | undefined;
+        onClose?: (() => void) | undefined;
+        yearsAmount?: number | undefined;
+    } & Record<string, unknown>) | undefined;
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -170,7 +175,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Обработчик изменения значения
      */
-    onChange?: ((event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | null, payload: {
+    onChange?: ((event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | React.ChangeEvent<HTMLInputElement> | null, payload: {
         date: Date;
         value: string;
     }) => void) | undefined;
@@ -184,11 +189,11 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Обработчик изменения календаря
      */
-    onCalendarChange?: ((date: number) => void) | undefined;
+    onCalendarChange?: ((date?: number | undefined) => void) | undefined;
     /**
      * Позиционирование поповера с календарем
      */
-    popoverPosition?: "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
+    popoverPosition?: "right" | "left" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
     /**
      * z-index Popover
      */

package/calendar-input/modern/Component.js

@@ -1,19 +1,25 @@
 import React, { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
+import { useMedia } from '@alfalab/hooks';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import { Popover } from '../../popover/modern';
 import { parseDateString, isCompleteDateInput, formatDate, DateInput } from '../../date-input/modern';
-import { Calendar, dateInLimits } from '../../calendar/modern';
+import { dateInLimits, Calendar, CalendarMobile } from '../../calendar/modern';
 import { SUPPORTS_INPUT_TYPE_DATE } from './utils.js';
 
-var styles = {"component":"calendar-input__component_1ji6p","block":"calendar-input__block_1ji6p","calendarContainer":"calendar-input__calendarContainer_1ji6p","calendarIcon":"calendar-input__calendarIcon_1ji6p","nativeInput":"calendar-input__nativeInput_1ji6p"};
+var styles = {"component":"calendar-input__component_gqwrq","block":"calendar-input__block_gqwrq","calendarContainer":"calendar-input__calendarContainer_gqwrq","calendarIcon":"calendar-input__calendarIcon_gqwrq","nativeInput":"calendar-input__nativeInput_gqwrq"};
 require('./index.css');
 
-const CalendarInput = forwardRef(({ block = false, className, inputClassName, popoverClassName, defaultOpen = false, defaultMonth, defaultValue = '', calendarPosition = 'popover', value, dataTestId, calendarProps = {}, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], preventFlip, mobileMode = 'popover', wrapperRef = null, disabled, onChange = () => null, onInputChange, onCalendarChange, onKeyDown, readOnly, Calendar: Calendar$1 = Calendar, popoverPosition = 'bottom-start', zIndexPopover, useAnchorWidth, rightAddons, error, ...restProps }, ref) => {
+const CalendarInput = forwardRef(({ block = false, className, inputClassName, popoverClassName, defaultOpen = false, defaultMonth, defaultValue = '', calendarPosition = 'popover', value, dataTestId, calendarProps = {}, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], preventFlip, mobileMode = 'popover', wrapperRef = null, disabled, onChange = () => null, onInputChange, onCalendarChange, onKeyDown, readOnly, Calendar: Calendar$1, popoverPosition = 'bottom-start', zIndexPopover, useAnchorWidth, rightAddons, error, ...restProps }, ref) => {
+    const [view] = useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop');
+    const CalendarComponent = view === 'desktop' ? Calendar : CalendarMobile;
     const shouldRenderNative = SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
     const shouldRenderOnlyInput = mobileMode === 'input';
     const shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
@@ -46,17 +52,21 @@ const CalendarInput = forwardRef(({ block = false, className, inputClassName, po
             setOpen(true);
     }, [open]);
     const handleFocus = useCallback((event) => {
-        setOpen(true);
-        if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
-            calendarRef.current.focus();
+        if (view === 'desktop') {
+            setOpen(true);
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
         }
-    }, [open]);
+    }, [open, view]);
     const handleBlur = useCallback((event) => {
-        const target = (event.relatedTarget || document.activeElement);
-        if (calendarRef.current && calendarRef.current.contains(target) === false) {
-            setOpen(false);
+        if (view === 'desktop') {
+            const target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current && calendarRef.current.contains(target) === false) {
+                setOpen(false);
+            }
         }
-    }, []);
+    }, [view]);
     const handleInputKeyDown = useCallback((event) => {
         if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
             event.preventDefault();
@@ -80,14 +90,21 @@ const CalendarInput = forwardRef(({ block = false, className, inputClassName, po
     const handleInputChange = useCallback((event, payload) => {
         changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
     }, [changeHandler, checkInputValueIsValid]);
-    const handleCalendarChange = useCallback(date => {
-        changeHandler(null, formatDate(date), new Date(date), 'calendar');
-        setOpen(false);
-    }, [changeHandler]);
+    const handleCalendarChange = useCallback((date) => {
+        if (date) {
+            changeHandler(null, formatDate(date), new Date(date), 'calendar');
+        }
+        if (view === 'desktop') {
+            setOpen(false);
+        }
+    }, [changeHandler, view]);
     const handleCalendarWrapperMouseDown = useCallback((event) => {
         // Не дает инпуту терять фокус при выборе даты
         event.preventDefault();
     }, []);
+    const handleCalendarClose = useCallback(() => {
+        setOpen(false);
+    }, []);
     useEffect(() => {
         setOpen(defaultOpen);
     }, [defaultOpen]);
@@ -99,12 +116,14 @@ const CalendarInput = forwardRef(({ block = false, className, inputClassName, po
     const renderCalendar = useCallback(() => (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
-        React.createElement(Calendar$1, Object.assign({}, calendarProps, { ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))), [
+        React.createElement(CalendarComponent, Object.assign({}, calendarProps, { open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))), [
         calendarProps,
         calendarValue,
         checkInputValueIsValid,
         defaultMonth,
         events,
+        open,
+        handleCalendarClose,
         handleCalendarChange,
         handleCalendarWrapperMouseDown,
         inputValue,

package/calendar-input/modern/index.css

@@ -12,6 +12,7 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-m: 16px;
 }
 :root {
     --border-radius-s: 4px;
@@ -40,35 +41,36 @@
     --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.calendar-input__component_1ji6p {
+.calendar-input__component_gqwrq {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.calendar-input__block_1ji6p {
+.calendar-input__block_gqwrq {
     width: 100%;
 }
-.calendar-input__calendarContainer_1ji6p {
+.calendar-input__calendarContainer_gqwrq {
     display: inline-block;
     box-sizing: border-box;
-    border-radius: var(--calendar-input-popover-border-radius)
+    border-radius: var(--calendar-input-popover-border-radius);
+    padding: 0 var(--gap-m)
 }
 @media (max-width: 374px) {
-.calendar-input__calendarContainer_1ji6p {
+.calendar-input__calendarContainer_gqwrq {
         width: 100%;
         min-width: 288px
 }
     }
-.calendar-input__calendarIcon_1ji6p {
+.calendar-input__calendarIcon_gqwrq {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
 }
-.calendar-input__calendarIcon_1ji6p:not(:only-child) {
+.calendar-input__calendarIcon_gqwrq:not(:only-child) {
         margin-right: var(--gap-2xs);
     }
-.calendar-input__nativeInput_1ji6p {
+.calendar-input__nativeInput_gqwrq {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -79,9 +81,9 @@
             appearance: none;
     z-index: 1
 }
-.calendar-input__nativeInput_1ji6p::-webkit-calendar-picker-indicator {
+.calendar-input__nativeInput_gqwrq::-webkit-calendar-picker-indicator {
         display: none;
     }
-.calendar-input__nativeInput_1ji6p::-webkit-inner-spin-button {
+.calendar-input__nativeInput_gqwrq::-webkit-inner-spin-button {
         display: none;
     }

package/calendar-input/modern/index.js

@@ -1,6 +1,7 @@
 import 'react';
 import 'classnames';
 import 'react-merge-refs';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import 'date-fns/format';

package/calendar-range/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('./index.module-bdc188f2.js');
+var index_module = require('./index.module-28b1b3f9.js');
 var React = require('react');
 require('classnames');
 require('date-fns/startOfMonth');

package/calendar-range/esm/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './index.module-fb530dc4.js';
+import { _ as __rest, a as __assign } from './index.module-77c23a7d.js';
 import React from 'react';
 import 'classnames';
 import 'date-fns/startOfMonth';

package/calendar-range/esm/index.js

@@ -1,4 +1,4 @@
-import './index.module-fb530dc4.js';
+import './index.module-77c23a7d.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfMonth';

package/calendar-range/esm/{index.module-fb530dc4.js → index.module-77c23a7d.js}

@@ -37,7 +37,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-range__component_bzhuw","divider":"calendar-range__divider_bzhuw","static":"calendar-range__static_bzhuw","calendar":"calendar-range__calendar_bzhuw"};
+var styles = {"component":"calendar-range__component_1qqfo","divider":"calendar-range__divider_1qqfo","static":"calendar-range__static_1qqfo","calendar":"calendar-range__calendar_1qqfo"};
 require('./views/index.css');
 
 export { __rest as _, __assign as a, styles as s };

package/calendar-range/esm/utils.js

@@ -1,5 +1,3 @@
-var isDayButton = function (node) {
-    return node && node.tagName === 'BUTTON' && node.dataset.date;
-};
+var isDayButton = function (node) { return node && node.tagName === 'BUTTON' && node.dataset.date; };
 
 export { isDayButton };

package/calendar-range/esm/views/index.css

@@ -34,19 +34,19 @@
 
     /* marker */
 }
-.calendar-range__component_bzhuw {
+.calendar-range__component_1qqfo {
     display: flex
 }
-.calendar-range__component_bzhuw button[aria-selected='true'] {
+.calendar-range__component_1qqfo button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_bzhuw *[class*='errorIcon_'] {
+.calendar-range__component_1qqfo *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_bzhuw *[class*='calendarIcon_'] {
+.calendar-range__component_1qqfo *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_bzhuw {
+.calendar-range__divider_1qqfo {
     height: 48px;
     display: flex;
     align-items: center;
@@ -54,13 +54,13 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_bzhuw:after {
+.calendar-range__divider_1qqfo:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
-.calendar-range__static_bzhuw .calendar-range__calendar_bzhuw {
+.calendar-range__static_1qqfo .calendar-range__calendar_1qqfo {
         width: var(--calendar-inner-width);
     }

package/calendar-range/esm/views/popover.js

@@ -1,4 +1,4 @@
-import { s as styles, a as __assign } from '../index.module-fb530dc4.js';
+import { s as styles, a as __assign } from '../index.module-77c23a7d.js';
 import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import startOfMonth from 'date-fns/startOfMonth';

package/calendar-range/esm/views/static.js

@@ -1,4 +1,4 @@
-import { _ as __rest, s as styles, a as __assign } from '../index.module-fb530dc4.js';
+import { _ as __rest, s as styles, a as __assign } from '../index.module-77c23a7d.js';
 import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import startOfMonth from 'date-fns/startOfMonth';

package/calendar-range/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./index.module-bdc188f2.js');
+require('./index.module-28b1b3f9.js');
 require('react');
 require('classnames');
 require('date-fns/startOfMonth');

package/calendar-range/{index.module-bdc188f2.js → index.module-28b1b3f9.js}

@@ -37,7 +37,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-range__component_bzhuw","divider":"calendar-range__divider_bzhuw","static":"calendar-range__static_bzhuw","calendar":"calendar-range__calendar_bzhuw"};
+var styles = {"component":"calendar-range__component_1qqfo","divider":"calendar-range__divider_1qqfo","static":"calendar-range__static_1qqfo","calendar":"calendar-range__calendar_1qqfo"};
 require('./views/index.css');
 
 exports.__rest = __rest;

package/calendar-range/modern/Component.js

@@ -10,7 +10,7 @@ import 'date-fns/endOfMonth';
 import '../../calendar-input/modern';
 import '../../date-input/modern';
 import './hooks.js';
-import './index.module-c939f54b.js';
+import './index.module-2efa75c0.js';
 import { CalendarRangePopover } from './views/popover.js';
 import '../../calendar/modern';
 import './utils.js';

package/calendar-range/modern/index.js

@@ -10,7 +10,7 @@ import 'date-fns/endOfMonth';
 import '../../calendar-input/modern';
 import '../../date-input/modern';
 import './hooks.js';
-import './index.module-c939f54b.js';
+import './index.module-2efa75c0.js';
 import './views/popover.js';
 import '../../calendar/modern';
 import './utils.js';

package/calendar-range/modern/index.module-2efa75c0.js

@@ -0,0 +1,4 @@
+var styles = {"component":"calendar-range__component_1qqfo","divider":"calendar-range__divider_1qqfo","static":"calendar-range__static_1qqfo","calendar":"calendar-range__calendar_1qqfo"};
+require('./views/index.css');
+
+export { styles as s };

package/calendar-range/modern/views/index.css

@@ -34,19 +34,19 @@
 
     /* marker */
 }
-.calendar-range__component_bzhuw {
+.calendar-range__component_1qqfo {
     display: flex
 }
-.calendar-range__component_bzhuw button[aria-selected='true'] {
+.calendar-range__component_1qqfo button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_bzhuw *[class*='errorIcon_'] {
+.calendar-range__component_1qqfo *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_bzhuw *[class*='calendarIcon_'] {
+.calendar-range__component_1qqfo *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_bzhuw {
+.calendar-range__divider_1qqfo {
     height: 48px;
     display: flex;
     align-items: center;
@@ -54,13 +54,13 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_bzhuw:after {
+.calendar-range__divider_1qqfo:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
-.calendar-range__static_bzhuw .calendar-range__calendar_bzhuw {
+.calendar-range__static_1qqfo .calendar-range__calendar_1qqfo {
         width: var(--calendar-inner-width);
     }

package/calendar-range/modern/views/popover.js

@@ -9,7 +9,7 @@ import 'date-fns/isEqual';
 import { isValidInputValue, parseDateString, CalendarInput } from '../../../calendar-input/modern';
 import { isCompleteDateInput } from '../../../date-input/modern';
 import { usePopoverViewMonthes } from '../hooks.js';
-import { s as styles } from '../index.module-c939f54b.js';
+import { s as styles } from '../index.module-2efa75c0.js';
 
 const CalendarRangePopover = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, inputFromProps = {}, inputToProps = {}, offDays, events, dataTestId, }) => {
     const [inputFromValue, setInputFromValue] = useState(valueFrom);

package/calendar-range/modern/views/static.js

@@ -10,7 +10,7 @@ import endOfMonth from 'date-fns/endOfMonth';
 import { isValidInputValue, parseDateString, formatDate } from '../../../calendar-input/modern';
 import { isCompleteDateInput, DateInput } from '../../../date-input/modern';
 import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
-import { s as styles } from '../index.module-c939f54b.js';
+import { s as styles } from '../index.module-2efa75c0.js';
 import { usePeriodWithReset, Calendar } from '../../../calendar/modern';
 import { isDayButton } from '../utils.js';
 

package/calendar-range/views/index.css

@@ -34,19 +34,19 @@
 
     /* marker */
 }
-.calendar-range__component_bzhuw {
+.calendar-range__component_1qqfo {
     display: flex
 }
-.calendar-range__component_bzhuw button[aria-selected='true'] {
+.calendar-range__component_1qqfo button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_bzhuw *[class*='errorIcon_'] {
+.calendar-range__component_1qqfo *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_bzhuw *[class*='calendarIcon_'] {
+.calendar-range__component_1qqfo *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_bzhuw {
+.calendar-range__divider_1qqfo {
     height: 48px;
     display: flex;
     align-items: center;
@@ -54,13 +54,13 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_bzhuw:after {
+.calendar-range__divider_1qqfo:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
-.calendar-range__static_bzhuw .calendar-range__calendar_bzhuw {
+.calendar-range__static_1qqfo .calendar-range__calendar_1qqfo {
         width: var(--calendar-inner-width);
     }

package/calendar-range/views/popover.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('../index.module-bdc188f2.js');
+var index_module = require('../index.module-28b1b3f9.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');

package/calendar-range/views/static.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('../index.module-bdc188f2.js');
+var index_module = require('../index.module-28b1b3f9.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');

package/calendar-with-skeleton/Component.js

@@ -50,7 +50,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-with-skeleton__component_1y7z8","calendarVisible":"calendar-with-skeleton__calendarVisible_1y7z8","skeleton":"calendar-with-skeleton__skeleton_1y7z8","header":"calendar-with-skeleton__header_1y7z8","weekDays":"calendar-with-skeleton__weekDays_1y7z8","row":"calendar-with-skeleton__row_1y7z8","enter":"calendar-with-skeleton__enter_1y7z8","enterActive":"calendar-with-skeleton__enterActive_1y7z8","exit":"calendar-with-skeleton__exit_1y7z8","exitActive":"calendar-with-skeleton__exitActive_1y7z8"};
+var styles = {"component":"calendar-with-skeleton__component_1q9cz","calendarVisible":"calendar-with-skeleton__calendarVisible_1q9cz","skeleton":"calendar-with-skeleton__skeleton_1q9cz","header":"calendar-with-skeleton__header_1q9cz","weekDays":"calendar-with-skeleton__weekDays_1q9cz","row":"calendar-with-skeleton__row_1q9cz","enter":"calendar-with-skeleton__enter_1q9cz","enterActive":"calendar-with-skeleton__enterActive_1q9cz","exit":"calendar-with-skeleton__exit_1q9cz","exitActive":"calendar-with-skeleton__exitActive_1q9cz"};
 require('./index.css');
 
 var CalendarWithSkeleton = React.forwardRef(function (_a, ref) {

package/calendar-with-skeleton/esm/Component.js

@@ -43,7 +43,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-with-skeleton__component_1y7z8","calendarVisible":"calendar-with-skeleton__calendarVisible_1y7z8","skeleton":"calendar-with-skeleton__skeleton_1y7z8","header":"calendar-with-skeleton__header_1y7z8","weekDays":"calendar-with-skeleton__weekDays_1y7z8","row":"calendar-with-skeleton__row_1y7z8","enter":"calendar-with-skeleton__enter_1y7z8","enterActive":"calendar-with-skeleton__enterActive_1y7z8","exit":"calendar-with-skeleton__exit_1y7z8","exitActive":"calendar-with-skeleton__exitActive_1y7z8"};
+var styles = {"component":"calendar-with-skeleton__component_1q9cz","calendarVisible":"calendar-with-skeleton__calendarVisible_1q9cz","skeleton":"calendar-with-skeleton__skeleton_1q9cz","header":"calendar-with-skeleton__header_1q9cz","weekDays":"calendar-with-skeleton__weekDays_1q9cz","row":"calendar-with-skeleton__row_1q9cz","enter":"calendar-with-skeleton__enter_1q9cz","enterActive":"calendar-with-skeleton__enterActive_1q9cz","exit":"calendar-with-skeleton__exit_1q9cz","exitActive":"calendar-with-skeleton__exitActive_1q9cz"};
 require('./index.css');
 
 var CalendarWithSkeleton = forwardRef(function (_a, ref) {

package/calendar-with-skeleton/esm/index.css

@@ -14,15 +14,15 @@
     --gap-m: 16px;
     --gap-l: 20px;
 }
-.calendar-with-skeleton__component_1y7z8 {
+.calendar-with-skeleton__component_1q9cz {
     width: var(--calendar-width);
     height: var(--calendar-height);
     position: relative;
 }
-.calendar-with-skeleton__calendarVisible_1y7z8 {
+.calendar-with-skeleton__calendarVisible_1q9cz {
     height: auto;
 }
-.calendar-with-skeleton__skeleton_1y7z8 {
+.calendar-with-skeleton__skeleton_1q9cz {
     display: flex;
     flex-direction: column;
     padding: var(--gap-m);
@@ -37,25 +37,25 @@
     background-color: var(--color-light-bg-primary);
     background-clip: content-box;
 }
-.calendar-with-skeleton__header_1y7z8 {
+.calendar-with-skeleton__header_1q9cz {
     height: 48px;
     margin-bottom: var(--gap-l);
 }
-.calendar-with-skeleton__weekDays_1y7z8 {
+.calendar-with-skeleton__weekDays_1q9cz {
     height: 12px;
     margin-bottom: var(--gap-m);
 }
-.calendar-with-skeleton__row_1y7z8 {
+.calendar-with-skeleton__row_1q9cz {
     height: 32px
 }
-.calendar-with-skeleton__row_1y7z8 + .calendar-with-skeleton__row_1y7z8 {
+.calendar-with-skeleton__row_1q9cz + .calendar-with-skeleton__row_1q9cz {
         margin-top: 10px;
     }
-.calendar-with-skeleton__enter_1y7z8,
-.calendar-with-skeleton__enterActive_1y7z8,
-.calendar-with-skeleton__exit_1y7z8 {
+.calendar-with-skeleton__enter_1q9cz,
+.calendar-with-skeleton__enterActive_1q9cz,
+.calendar-with-skeleton__exit_1q9cz {
     opacity: 1;
 }
-.calendar-with-skeleton__exitActive_1y7z8 {
+.calendar-with-skeleton__exitActive_1q9cz {
     opacity: 0;
 }