@alfalab/core-components 42.3.1 → 42.5.0

package/calendar/modern/components/months-table/index.css

@@ -49,38 +49,38 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__monthsTable_1qpcv {
+} .cc-calendar .calendar__monthsTable_1ystt {
         display: flex;
         flex-wrap: wrap;
         width: var(--calendar-inner-width);
         justify-content: flex-start
-    } @media (max-width: 374px) { .cc-calendar .calendar__monthsTable_1qpcv {
+    } @media (max-width: 374px) { .cc-calendar .calendar__monthsTable_1ystt {
             width: var(--calendar-mobile-inner-width);
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__monthsTable_1qpcv.calendar__responsive_1qpcv {
+        } .cc-calendar .calendar__monthsTable_1ystt.calendar__responsive_1ystt {
             width: 100%;
             justify-content: space-between
-        } .cc-calendar .calendar__monthsTable_1qpcv.calendar__responsive_1qpcv .calendar__button_1qpcv {
+        } .cc-calendar .calendar__monthsTable_1ystt.calendar__responsive_1ystt .calendar__button_1ystt {
                 width: 33%;
                 margin-right: 0;
-            } .cc-calendar .calendar__button_1qpcv {
+            } .cc-calendar .calendar__button_1ystt {
         width: var(--calendar-select-button-width);
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
-    } .cc-calendar .calendar__button_1qpcv:nth-child(3n) {
+    } .cc-calendar .calendar__button_1ystt:nth-child(3n) {
             margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_1qpcv {
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_1ystt {
             width: var(--calendar-mobile-select-button-width)
     }
 
-            .cc-calendar .calendar__button_1qpcv:nth-child(3n) {
+            .cc-calendar .calendar__button_1ystt:nth-child(3n) {
                 margin-right: var(--gap-2xs);
             }
 
-            .cc-calendar .calendar__button_1qpcv:nth-child(2n) {
+            .cc-calendar .calendar__button_1ystt:nth-child(2n) {
                 margin-right: 0;
-            } .cc-calendar .calendar__button_1qpcv {
+            } .cc-calendar .calendar__button_1ystt {
 
             height: 36px
     }

package/calendar/modern/components/period-slider/Component.js

@@ -38,7 +38,7 @@ import 'date-fns/isToday';
 import 'date-fns/isYesterday';
 import 'date-fns/startOfQuarter';
 
-const styles = {"component":"calendar__component_1umbr","period":"calendar__period_1umbr","clicablePeriod":"calendar__clicablePeriod_1umbr","empty":"calendar__empty_1umbr","arrow":"calendar__arrow_1umbr","full":"calendar__full_1umbr","yearSelectorButton":"calendar__yearSelectorButton_1umbr"};
+const styles = {"component":"calendar__component_19bxk","period":"calendar__period_19bxk","clicablePeriod":"calendar__clicablePeriod_19bxk","empty":"calendar__empty_19bxk","arrow":"calendar__arrow_19bxk","full":"calendar__full_19bxk","yearSelectorButton":"calendar__yearSelectorButton_19bxk"};
 require('./index.css');
 
 const PeriodSlider = ({ value, periodType = 'month', className, periodFormatter = formatPeriod, prevArrowDisabled = false, nextArrowDisabled = false, hideDisabledArrows = false, isMonthAndYearSelectable = false, showCurrentYearSelector = false, onPrevArrowClick = () => null, onNextArrowClick = () => null, onMonthClick, onYearClick, onPeriodClick, dataTestId, }) => {

package/calendar/modern/components/period-slider/index.css

@@ -42,37 +42,37 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_1umbr {
+} .calendar__component_19bxk {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-} .calendar__period_1umbr {
+} .calendar__period_19bxk {
     font-family: var(--calendar-month-only-header-font-family);
     font-size: var(--calendar-month-only-header-font-size);
     font-weight: var(--calendar-month-only-header-font-weight);
     line-height: 24px;
     text-align: center
-} @media (max-width: 374px) { .calendar__period_1umbr {
+} @media (max-width: 374px) { .calendar__period_19bxk {
         width: auto;
         flex-grow: 1
 }
-    } .calendar__clicablePeriod_1umbr {
+    } .calendar__clicablePeriod_19bxk {
     cursor: pointer;
-} .calendar__empty_1umbr {
+} .calendar__empty_19bxk {
     color: var(--color-light-text-secondary);
-} .calendar__arrow_1umbr {
+} .calendar__arrow_19bxk {
     position: absolute;
     top: 4px
-} .calendar__arrow_1umbr:first-child {
+} .calendar__arrow_19bxk:first-child {
         left: 0;
-    } .calendar__arrow_1umbr:last-child {
+    } .calendar__arrow_19bxk:last-child {
         right: 0;
         transform: rotateY(180deg);
-    } @media (max-width: 374px) { .calendar__full_1umbr .calendar__arrow_1umbr {
+    } @media (max-width: 374px) { .calendar__full_19bxk .calendar__arrow_19bxk {
         display: none
 }
-    } .calendar__yearSelectorButton_1umbr {
+    } .calendar__yearSelectorButton_19bxk {
     margin-left: var(--gap-xs);
 }

package/calendar/modern/components/select-button/Component.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { ButtonDesktop } from '../../../../button/modern/desktop';
 
-const styles = {"button":"calendar__button_ar20g","filled":"calendar__filled_ar20g","outlined":"calendar__outlined_ar20g","selected":"calendar__selected_ar20g"};
+const styles = {"button":"calendar__button_clkmv","filled":"calendar__filled_clkmv","outlined":"calendar__outlined_clkmv","selected":"calendar__selected_clkmv"};
 require('./index.css');
 
 const SelectButton = forwardRef(({ className, children, view = 'default', ...restProps }, ref) => (React.createElement(ButtonDesktop, { ...restProps, ref: ref, view: 'ghost', size: 'xs', className: cn(styles.button, styles[view], className) }, children)));

package/calendar/modern/components/select-button/index.css

@@ -45,7 +45,7 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__button_ar20g {
+} .cc-calendar .calendar__button_clkmv {
         font-size: 16px;
         line-height: 24px;
         font-weight: 400;
@@ -55,22 +55,22 @@
         padding: 0 var(--gap-xs);
         background-color: transparent;
         border-radius: var(--border-radius-l)
-    } .cc-calendar .calendar__button_ar20g:not(:disabled):hover {
+    } .cc-calendar .calendar__button_clkmv:not(:disabled):hover {
             background-color: var(--color-light-bg-tertiary);
             color: var(--color-light-text-primary);
-        } .cc-calendar .calendar__button_ar20g.calendar__filled_ar20g {
+        } .cc-calendar .calendar__button_clkmv.calendar__filled_clkmv {
             background-color: var(--color-light-bg-tertiary)
-        } .cc-calendar .calendar__button_ar20g.calendar__filled_ar20g:not(:disabled):hover {
+        } .cc-calendar .calendar__button_clkmv.calendar__filled_clkmv:not(:disabled):hover {
                 background-color: var(--color-light-bg-tertiary-shade-7);
-            } .cc-calendar .calendar__button_ar20g.calendar__outlined_ar20g {
+            } .cc-calendar .calendar__button_clkmv.calendar__outlined_clkmv {
             border: 1px solid var(--calendar-select-button-today-border-color);
-        } .cc-calendar .calendar__button_ar20g.calendar__selected_ar20g,
-        .cc-calendar .calendar__button_ar20g.calendar__selected_ar20g:disabled {
+        } .cc-calendar .calendar__button_clkmv.calendar__selected_clkmv,
+        .cc-calendar .calendar__button_clkmv.calendar__selected_clkmv:disabled {
             background-color: var(--calendar-select-button-selected-background);
             color: var(--color-light-text-primary-inverted)
-        } .cc-calendar .calendar__button_ar20g.calendar__selected_ar20g:not(:disabled):hover, .cc-calendar .calendar__button_ar20g.calendar__selected_ar20g:disabled:not(:disabled):hover {
+        } .cc-calendar .calendar__button_clkmv.calendar__selected_clkmv:not(:disabled):hover, .cc-calendar .calendar__button_clkmv.calendar__selected_clkmv:disabled:not(:disabled):hover {
                 background-color: var(--calendar-select-button-selected-background);
                 color: var(--color-light-text-primary-inverted);
-            } .cc-calendar .calendar__button_ar20g > * {
+            } .cc-calendar .calendar__button_clkmv > * {
             flex-grow: 1;
         }

package/calendar/modern/components/years-table/Component.js

@@ -5,7 +5,7 @@ import isThisYear from 'date-fns/isThisYear';
 import { SelectButton } from '../select-button/Component.js';
 import '../../../../button/modern/desktop';
 
-const styles = {"yearsTable":"calendar__yearsTable_s3znq","responsive":"calendar__responsive_s3znq","inner":"calendar__inner_s3znq","button":"calendar__button_s3znq"};
+const styles = {"yearsTable":"calendar__yearsTable_bfjo6","responsive":"calendar__responsive_bfjo6","inner":"calendar__inner_bfjo6","button":"calendar__button_bfjo6"};
 require('./index.css');
 
 const YearsTable = ({ selectedYear, years = [], getYearProps, onScroll, responsive, }) => {

package/calendar/modern/components/years-table/index.css

@@ -49,21 +49,21 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__yearsTable_s3znq {
+} .cc-calendar .calendar__yearsTable_bfjo6 {
         overflow: auto;
         overflow-x: hidden;
         width: 100%
-    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_s3znq {
+    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_bfjo6 {
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__yearsTable_s3znq.calendar__responsive_s3znq {
+        } .cc-calendar .calendar__yearsTable_bfjo6.calendar__responsive_bfjo6 {
             justify-content: space-between
-        } .cc-calendar .calendar__yearsTable_s3znq.calendar__responsive_s3znq .calendar__inner_s3znq {
+        } .cc-calendar .calendar__yearsTable_bfjo6.calendar__responsive_bfjo6 .calendar__inner_bfjo6 {
                 left: auto;
-            } .cc-calendar .calendar__yearsTable_s3znq.calendar__responsive_s3znq .calendar__button_s3znq {
+            } .cc-calendar .calendar__yearsTable_bfjo6.calendar__responsive_bfjo6 .calendar__button_bfjo6 {
                 width: 33%;
                 margin-right: 0;
-            } .cc-calendar .calendar__inner_s3znq {
+            } .cc-calendar .calendar__inner_bfjo6 {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
@@ -72,26 +72,26 @@
         /* (width - inner-width) / 2 */
         left: 32px;
         overflow: hidden
-    } @media (max-width: 374px) { .cc-calendar .calendar__inner_s3znq {
+    } @media (max-width: 374px) { .cc-calendar .calendar__inner_bfjo6 {
             left: 16px
     }
-        } .cc-calendar .calendar__button_s3znq {
+        } .cc-calendar .calendar__button_bfjo6 {
         width: var(--calendar-select-button-width);
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
-    } .cc-calendar .calendar__button_s3znq:nth-child(3n) {
+    } .cc-calendar .calendar__button_bfjo6:nth-child(3n) {
             margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_s3znq {
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_bfjo6 {
             width: var(--calendar-mobile-select-button-width)
     }
 
-            .cc-calendar .calendar__button_s3znq:nth-child(3n) {
+            .cc-calendar .calendar__button_bfjo6:nth-child(3n) {
                 margin-right: var(--gap-2xs);
             }
 
-            .cc-calendar .calendar__button_s3znq:nth-child(2n) {
+            .cc-calendar .calendar__button_bfjo6:nth-child(2n) {
                 margin-right: 0;
-            } .cc-calendar .calendar__button_s3znq {
+            } .cc-calendar .calendar__button_bfjo6 {
 
             height: 36px
     }

package/calendar/modern/desktop.css

@@ -43,27 +43,27 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_ts4x5 {
+} .calendar__component_izbka {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_ts4x5 {
+} @media (max-width: 374px) { .calendar__component_izbka {
         align-items: center;
         width: 100%;
         height: 321px
 }
-    } .calendar__component_ts4x5.calendar__responsive_ts4x5 {
+    } .calendar__component_izbka.calendar__responsive_izbka {
         width: 100%
-    } .calendar__component_ts4x5.calendar__responsive_ts4x5 .calendar__period_ts4x5 {
+    } .calendar__component_izbka.calendar__responsive_izbka .calendar__period_izbka {
             width: 100%;
-        } .calendar__component_ts4x5.calendar__responsive_ts4x5 .calendar__monthYear_ts4x5 {
+        } .calendar__component_izbka.calendar__responsive_izbka .calendar__monthYear_izbka {
             width: 100%;
-        } .calendar__component_ts4x5.calendar__responsive_ts4x5 .calendar__container_ts4x5 {
+        } .calendar__component_izbka.calendar__responsive_izbka .calendar__container_izbka {
             width: 100%;
-        } .calendar__container_ts4x5 {
+        } .calendar__container_izbka {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -71,17 +71,17 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} .calendar__container_ts4x5.calendar__customScrollbar_ts4x5 {
+} .calendar__container_izbka.calendar__customScrollbar_izbka {
         overflow: auto;
         overflow: overlay;
         cursor: auto;
-    } .calendar__container_ts4x5.calendar__customScrollbar_ts4x5::-webkit-scrollbar {
+    } .calendar__container_izbka.calendar__customScrollbar_izbka::-webkit-scrollbar {
         width: 12px;
-    } .calendar__container_ts4x5.calendar__customScrollbar_ts4x5::-webkit-scrollbar-track {
+    } .calendar__container_izbka.calendar__customScrollbar_izbka::-webkit-scrollbar-track {
         background-color: transparent;
-    } .calendar__container_ts4x5.calendar__customScrollbar_ts4x5::-webkit-scrollbar-track-piece {
+    } .calendar__container_izbka.calendar__customScrollbar_izbka::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .calendar__container_ts4x5.calendar__customScrollbar_ts4x5::-webkit-scrollbar-thumb {
+    } .calendar__container_izbka.calendar__customScrollbar_izbka::-webkit-scrollbar-thumb {
         background-color: var(--color-light-graphic-primary-alpha-30);
         border-radius: var(--border-radius-circle) / 6px;
         border-color: transparent;
@@ -89,38 +89,38 @@
         border-width: 4px;
         background-clip: padding-box;
         min-height: 40px;
-    } .calendar__container_ts4x5.calendar__customScrollbar_ts4x5::-webkit-scrollbar-thumb:hover {
+    } .calendar__container_izbka.calendar__customScrollbar_izbka::-webkit-scrollbar-thumb:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .calendar__container_ts4x5.calendar__customScrollbar_ts4x5::-webkit-scrollbar-thumb:active {
+    } .calendar__container_izbka.calendar__customScrollbar_izbka::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-graphic-primary-alpha-60);
-    } .calendar__container_ts4x5.calendar__customScrollbar_ts4x5::-webkit-resizer {
+    } .calendar__container_izbka.calendar__customScrollbar_izbka::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
-    } .calendar__container_ts4x5.calendar__customScrollbar_ts4x5::-webkit-scrollbar-button,
-    .calendar__container_ts4x5.calendar__customScrollbar_ts4x5::-webkit-scrollbar-corner {
+    } .calendar__container_izbka.calendar__customScrollbar_izbka::-webkit-scrollbar-button,
+    .calendar__container_izbka.calendar__customScrollbar_izbka::-webkit-scrollbar-corner {
         display: none;
-    } .calendar__container_ts4x5.calendar__customScrollbar_ts4x5 {
+    } .calendar__container_izbka.calendar__customScrollbar_izbka {
 
         display: block;
-    } @media (max-width: 374px) { .calendar__container_ts4x5 {
+    } @media (max-width: 374px) { .calendar__container_izbka {
         width: 288px
 }
-    } .calendar__sixWeeks_ts4x5 {
+    } .calendar__sixWeeks_izbka {
     height: 388px
-} @media (max-width: 374px) { .calendar__sixWeeks_ts4x5 {
+} @media (max-width: 374px) { .calendar__sixWeeks_izbka {
         height: 361px
 }
-    } .calendar__period_ts4x5 {
+    } .calendar__period_izbka {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_ts4x5 {
+} @media (max-width: 374px) { .calendar__period_izbka {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_ts4x5 {
+    } .calendar__monthYear_izbka {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_ts4x5 {
+} @media (max-width: 374px) { .calendar__monthYear_izbka {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/modern/index-2abb571d.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import React from "react";
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
+declare const inputUtils: {
+    disableUserInput: typeof disableUserInput;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };

package/calendar-input/components/calendar-input/Component.js

@@ -19,7 +19,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"calendar-input__component_1q9a6","block":"calendar-input__block_1q9a6","calendarContainer":"calendar-input__calendarContainer_1q9a6","calendarResponsive":"calendar-input__calendarResponsive_1q9a6","calendarIcon":"calendar-input__calendarIcon_1q9a6","nativeInput":"calendar-input__nativeInput_1q9a6"};
+var styles = {"component":"calendar-input__component_1f3u4","block":"calendar-input__block_1f3u4","calendarContainer":"calendar-input__calendarContainer_1f3u4","calendarResponsive":"calendar-input__calendarResponsive_1f3u4","calendarIcon":"calendar-input__calendarIcon_1f3u4","nativeInput":"calendar-input__nativeInput_1f3u4"};
 require('./index.css');
 
 var CalendarInput = React.forwardRef(function (_a, ref) {
@@ -44,6 +44,7 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
             !offDays.includes(dateValue));
     };
     var inputDisabled = disabled || readOnly;
+    var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
     var calendarRef = React.useRef(null);
     var openCalendar = function () {
@@ -70,6 +71,9 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
     var handleClick = function () {
         if (!open)
             openCalendar();
+        if (view === 'desktop' && inputRef.current) {
+            inputRef.current.focus();
+        }
     };
     var handleFocus = function (event) {
         if (view === 'desktop') {
@@ -89,7 +93,7 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
     };
     var handleInputKeyDown = function (event) {
         var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy) {
+        if (disableUserInput && !isCopy && event.key !== 'Tab') {
             event.preventDefault();
         }
         if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
@@ -144,7 +148,7 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
     React__default.default.createElement("div", { className: cn__default.default(styles.component, className, (_b = {},
             _b[styles.block] = block,
             _b)), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
-        React__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__assign({}, restProps, { ref: ref, wrapperRef: mergeRefs__default.default([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, inputClassName: inputClassName, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__assign({}, restProps, { ref: mergeRefs__default.default([inputRef, ref]), wrapperRef: mergeRefs__default.default([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, inputClassName: inputClassName, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
                 rightAddons,
                 shouldRenderPopover && (React__default.default.createElement(CalendarMIcon.CalendarMIcon, { className: styles.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
         shouldRenderStatic && renderCalendar(),

package/calendar-input/components/calendar-input/index.css

@@ -1,4 +1,4 @@
-/* hash: h82j4 */
+/* hash: v7mqw */
 :root {
 } /* deprecated */ :root {
     --color-light-border-secondary: #e9e9eb;
@@ -43,31 +43,31 @@
 } :root {
     --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-radius: var(--border-radius-m);
-} .calendar-input__component_1q9a6 {
+} .calendar-input__component_1f3u4 {
     display: inline-block;
     outline: none;
     position: relative;
-} .calendar-input__block_1q9a6 {
+} .calendar-input__block_1f3u4 {
     width: 100%;
-} .calendar-input__calendarContainer_1q9a6 {
+} .calendar-input__calendarContainer_1f3u4 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .calendar-input__calendarContainer_1q9a6 {
+} @media (max-width: 374px) { .calendar-input__calendarContainer_1f3u4 {
         width: 100%;
         min-width: 288px
 }
-    } .calendar-input__calendarResponsive_1q9a6 {
+    } .calendar-input__calendarResponsive_1f3u4 {
     width: var(--calendar-width);
-} .calendar-input__calendarIcon_1q9a6 {
+} .calendar-input__calendarIcon_1f3u4 {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
-} .calendar-input__calendarIcon_1q9a6:not(:only-child) {
+} .calendar-input__calendarIcon_1f3u4:not(:only-child) {
         margin-right: var(--gap-2xs);
-    } .calendar-input__nativeInput_1q9a6 {
+    } .calendar-input__nativeInput_1f3u4 {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -76,8 +76,8 @@
     height: 100%;
     appearance: none;
     z-index: 1
-} .calendar-input__nativeInput_1q9a6::-webkit-calendar-picker-indicator {
+} .calendar-input__nativeInput_1f3u4::-webkit-calendar-picker-indicator {
         display: none;
-    } .calendar-input__nativeInput_1q9a6::-webkit-inner-spin-button {
+    } .calendar-input__nativeInput_1f3u4::-webkit-inner-spin-button {
         display: none;
     }

package/calendar-input/cssm/components/calendar-input/Component.js

@@ -43,6 +43,7 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
             !offDays.includes(dateValue));
     };
     var inputDisabled = disabled || readOnly;
+    var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
     var calendarRef = React.useRef(null);
     var openCalendar = function () {
@@ -69,6 +70,9 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
     var handleClick = function () {
         if (!open)
             openCalendar();
+        if (view === 'desktop' && inputRef.current) {
+            inputRef.current.focus();
+        }
     };
     var handleFocus = function (event) {
         if (view === 'desktop') {
@@ -88,7 +92,7 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
     };
     var handleInputKeyDown = function (event) {
         var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy) {
+        if (disableUserInput && !isCopy && event.key !== 'Tab') {
             event.preventDefault();
         }
         if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
@@ -143,7 +147,7 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
     React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {},
             _b[styles__default.default.block] = block,
             _b)), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
-        React__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__assign({}, restProps, { ref: ref, wrapperRef: mergeRefs__default.default([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, inputClassName: inputClassName, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__assign({}, restProps, { ref: mergeRefs__default.default([inputRef, ref]), wrapperRef: mergeRefs__default.default([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, inputClassName: inputClassName, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
                 rightAddons,
                 shouldRenderPopover && (React__default.default.createElement(CalendarMIcon.CalendarMIcon, { className: styles__default.default.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
         shouldRenderStatic && renderCalendar(),

package/calendar-input/cssm/index-2abb571d.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import React from "react";
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
+declare const inputUtils: {
+    disableUserInput: typeof disableUserInput;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };

package/calendar-input/esm/components/calendar-input/Component.js

@@ -11,7 +11,7 @@ import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
 
-var styles = {"component":"calendar-input__component_1q9a6","block":"calendar-input__block_1q9a6","calendarContainer":"calendar-input__calendarContainer_1q9a6","calendarResponsive":"calendar-input__calendarResponsive_1q9a6","calendarIcon":"calendar-input__calendarIcon_1q9a6","nativeInput":"calendar-input__nativeInput_1q9a6"};
+var styles = {"component":"calendar-input__component_1f3u4","block":"calendar-input__block_1f3u4","calendarContainer":"calendar-input__calendarContainer_1f3u4","calendarResponsive":"calendar-input__calendarResponsive_1f3u4","calendarIcon":"calendar-input__calendarIcon_1f3u4","nativeInput":"calendar-input__nativeInput_1f3u4"};
 require('./index.css');
 
 var CalendarInput = forwardRef(function (_a, ref) {
@@ -36,6 +36,7 @@ var CalendarInput = forwardRef(function (_a, ref) {
             !offDays.includes(dateValue));
     };
     var inputDisabled = disabled || readOnly;
+    var inputRef = useRef(null);
     var inputWrapperRef = useRef(null);
     var calendarRef = useRef(null);
     var openCalendar = function () {
@@ -62,6 +63,9 @@ var CalendarInput = forwardRef(function (_a, ref) {
     var handleClick = function () {
         if (!open)
             openCalendar();
+        if (view === 'desktop' && inputRef.current) {
+            inputRef.current.focus();
+        }
     };
     var handleFocus = function (event) {
         if (view === 'desktop') {
@@ -81,7 +85,7 @@ var CalendarInput = forwardRef(function (_a, ref) {
     };
     var handleInputKeyDown = function (event) {
         var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy) {
+        if (disableUserInput && !isCopy && event.key !== 'Tab') {
             event.preventDefault();
         }
         if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
@@ -136,7 +140,7 @@ var CalendarInput = forwardRef(function (_a, ref) {
     React.createElement("div", { className: cn(styles.component, className, (_b = {},
             _b[styles.block] = block,
             _b)), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
-        React.createElement(DateInput, __assign({}, restProps, { ref: ref, wrapperRef: mergeRefs([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, inputClassName: inputClassName, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React.createElement(React.Fragment, null,
+        React.createElement(DateInput, __assign({}, restProps, { ref: mergeRefs([inputRef, ref]), wrapperRef: mergeRefs([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, inputClassName: inputClassName, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
                 shouldRenderPopover && (React.createElement(CalendarMIcon, { className: styles.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
         shouldRenderStatic && renderCalendar(),

package/calendar-input/esm/components/calendar-input/index.css

@@ -1,4 +1,4 @@
-/* hash: h82j4 */
+/* hash: v7mqw */
 :root {
 } /* deprecated */ :root {
     --color-light-border-secondary: #e9e9eb;
@@ -43,31 +43,31 @@
 } :root {
     --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-radius: var(--border-radius-m);
-} .calendar-input__component_1q9a6 {
+} .calendar-input__component_1f3u4 {
     display: inline-block;
     outline: none;
     position: relative;
-} .calendar-input__block_1q9a6 {
+} .calendar-input__block_1f3u4 {
     width: 100%;
-} .calendar-input__calendarContainer_1q9a6 {
+} .calendar-input__calendarContainer_1f3u4 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .calendar-input__calendarContainer_1q9a6 {
+} @media (max-width: 374px) { .calendar-input__calendarContainer_1f3u4 {
         width: 100%;
         min-width: 288px
 }
-    } .calendar-input__calendarResponsive_1q9a6 {
+    } .calendar-input__calendarResponsive_1f3u4 {
     width: var(--calendar-width);
-} .calendar-input__calendarIcon_1q9a6 {
+} .calendar-input__calendarIcon_1f3u4 {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
-} .calendar-input__calendarIcon_1q9a6:not(:only-child) {
+} .calendar-input__calendarIcon_1f3u4:not(:only-child) {
         margin-right: var(--gap-2xs);
-    } .calendar-input__nativeInput_1q9a6 {
+    } .calendar-input__nativeInput_1f3u4 {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -76,8 +76,8 @@
     height: 100%;
     appearance: none;
     z-index: 1
-} .calendar-input__nativeInput_1q9a6::-webkit-calendar-picker-indicator {
+} .calendar-input__nativeInput_1f3u4::-webkit-calendar-picker-indicator {
         display: none;
-    } .calendar-input__nativeInput_1q9a6::-webkit-inner-spin-button {
+    } .calendar-input__nativeInput_1f3u4::-webkit-inner-spin-button {
         display: none;
     }