@hh.ru/magritte-ui-date-picker 6.1.5 → 6.1.7

package/AsyncDataLoader.d.ts

@@ -4,4 +4,6 @@ import { FC, PropsWithChildren } from 'react';
  * В multi-лейауте каждый календарь должен быть обернут в свой лоадер,
  * чтобы календари с уже загруженными данными рендерили их, а не анимацию лоадера
  */
-export declare const AsyncDataLoader: FC<PropsWithChildren>;
+export declare const AsyncDataLoader: FC<PropsWithChildren<{
+    stretched?: boolean;
+}>>;

package/AsyncDataLoader.js

@@ -4,14 +4,14 @@ import { useContext, useState, useMemo } from 'react';
 import classnames from 'classnames';
 import { AsyncDataContext } from './AsyncDataContext.js';
 import { Loader } from '@hh.ru/magritte-ui-loader';
-import { s as styles } from './date-picker-QiutPQnb.js';
+import { s as styles } from './date-picker-Cb_rWJTY.js';
 
 /**
  * Отображает лоадер поверх контента во время загрузки асинхронных данных.
  * В multi-лейауте каждый календарь должен быть обернут в свой лоадер,
  * чтобы календари с уже загруженными данными рендерили их, а не анимацию лоадера
  */
-const AsyncDataLoader = ({ children }) => {
+const AsyncDataLoader = ({ children, stretched }) => {
     const asyncDataContext = useContext(AsyncDataContext);
     const [isLoading, setLoading] = useState(false);
     const value = useMemo(() => {
@@ -33,7 +33,10 @@ const AsyncDataLoader = ({ children }) => {
             },
         };
     }, [asyncDataContext, setLoading]);
-    return (jsxs("div", { className: classnames(styles.datePicker, { [styles.datePickerLoading]: isLoading }), "data-qa": "date-picker", children: [isLoading && (jsx("div", { className: styles.loader, children: jsx(Loader, {}) })), jsx("div", { className: classnames({ [styles.loading]: isLoading }), children: jsx(AsyncDataContext.Provider, { value: value, children: children }) })] }));
+    return (jsxs("div", { className: classnames(styles.datePicker, {
+            [styles.datePickerLoading]: isLoading,
+            [styles.stretched]: stretched,
+        }), "data-qa": "date-picker", children: [isLoading && (jsx("div", { className: styles.loader, children: jsx(Loader, {}) })), jsx("div", { className: classnames({ [styles.loading]: isLoading }), children: jsx(AsyncDataContext.Provider, { value: value, children: children }) })] }));
 };
 
 export { AsyncDataLoader };

package/AsyncDataLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsyncDataLoader.js","sources":["../src/AsyncDataLoader.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useContext, useMemo, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { AsyncDataContext, AsyncDataContextProps } from '@hh.ru/magritte-ui-date-picker/AsyncDataContext';\nimport { DateType } from '@hh.ru/magritte-ui-date-picker/types';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\n\nimport styles from './date-picker.less';\n\n/**\n * Отображает лоадер поверх контента во время загрузки асинхронных данных.\n * В multi-лейауте каждый календарь должен быть обернут в свой лоадер,\n * чтобы календари с уже загруженными данными рендерили их, а не анимацию лоадера\n */\nexport const AsyncDataLoader: FC<PropsWithChildren> = ({ children }) => {\n    const asyncDataContext = useContext(AsyncDataContext);\n    const [isLoading, setLoading] = useState(false);\n\n    const value = useMemo<AsyncDataContextProps | null>(() => {\n        if (!asyncDataContext) {\n            return null;\n        }\n\n        return {\n            ...asyncDataContext,\n            startAsyncLoading: (startDate: DateType, endDate: DateType) => {\n                setLoading(true);\n\n                void (async () => {\n                    try {\n                        await asyncDataContext.awaitAsyncLoading(startDate, endDate);\n                    } finally {\n                        setLoading(false);\n                    }\n                })();\n            },\n        };\n    }, [asyncDataContext, setLoading]);\n\n    return (\n        <div className={classnames(styles.datePicker, { [styles.datePickerLoading]: isLoading })} data-qa=\"date-picker\">\n            {isLoading && (\n                <div className={styles.loader}>\n                    <Loader />\n                </div>\n            )}\n            <div className={classnames({ [styles.loading]: isLoading })}>\n                <AsyncDataContext.Provider value={value}>{children}</AsyncDataContext.Provider>\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AASA;;;;AAIG;MACU,eAAe,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAI;AACnE,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACtD,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEhD,IAAA,MAAM,KAAK,GAAG,OAAO,CAA+B,MAAK;QACrD,IAAI,CAAC,gBAAgB,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC;SACf;QAED,OAAO;AACH,YAAA,GAAG,gBAAgB;AACnB,YAAA,iBAAiB,EAAE,CAAC,SAAmB,EAAE,OAAiB,KAAI;gBAC1D,UAAU,CAAC,IAAI,CAAC,CAAC;gBAEjB,KAAK,CAAC,YAAW;AACb,oBAAA,IAAI;wBACA,MAAM,gBAAgB,CAAC,iBAAiB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;qBAChE;4BAAS;wBACN,UAAU,CAAC,KAAK,CAAC,CAAC;qBACrB;iBACJ,GAAG,CAAC;aACR;SACJ,CAAC;AACN,KAAC,EAAE,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEnC,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,CAAC,iBAAiB,GAAG,SAAS,EAAE,CAAC,EAAU,SAAA,EAAA,aAAa,aAC1G,SAAS,KACNC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EACzB,QAAA,EAAAA,GAAA,CAAC,MAAM,EAAA,EAAA,CAAG,EACR,CAAA,CACT,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,GAAG,SAAS,EAAE,CAAC,EACvD,QAAA,EAAAA,GAAA,CAAC,gBAAgB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,KAAK,YAAG,QAAQ,EAAA,CAA6B,EAC7E,CAAA,CAAA,EAAA,CACJ,EACR;AACN;;;;"}
+{"version":3,"file":"AsyncDataLoader.js","sources":["../src/AsyncDataLoader.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useContext, useMemo, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { AsyncDataContext, AsyncDataContextProps } from '@hh.ru/magritte-ui-date-picker/AsyncDataContext';\nimport { DateType } from '@hh.ru/magritte-ui-date-picker/types';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\n\nimport styles from './date-picker.less';\n\n/**\n * Отображает лоадер поверх контента во время загрузки асинхронных данных.\n * В multi-лейауте каждый календарь должен быть обернут в свой лоадер,\n * чтобы календари с уже загруженными данными рендерили их, а не анимацию лоадера\n */\nexport const AsyncDataLoader: FC<PropsWithChildren<{ stretched?: boolean }>> = ({ children, stretched }) => {\n    const asyncDataContext = useContext(AsyncDataContext);\n    const [isLoading, setLoading] = useState(false);\n\n    const value = useMemo<AsyncDataContextProps | null>(() => {\n        if (!asyncDataContext) {\n            return null;\n        }\n\n        return {\n            ...asyncDataContext,\n            startAsyncLoading: (startDate: DateType, endDate: DateType) => {\n                setLoading(true);\n\n                void (async () => {\n                    try {\n                        await asyncDataContext.awaitAsyncLoading(startDate, endDate);\n                    } finally {\n                        setLoading(false);\n                    }\n                })();\n            },\n        };\n    }, [asyncDataContext, setLoading]);\n\n    return (\n        <div\n            className={classnames(styles.datePicker, {\n                [styles.datePickerLoading]: isLoading,\n                [styles.stretched]: stretched,\n            })}\n            data-qa=\"date-picker\"\n        >\n            {isLoading && (\n                <div className={styles.loader}>\n                    <Loader />\n                </div>\n            )}\n            <div className={classnames({ [styles.loading]: isLoading })}>\n                <AsyncDataContext.Provider value={value}>{children}</AsyncDataContext.Provider>\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AASA;;;;AAIG;AACU,MAAA,eAAe,GAAmD,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAI;AACvG,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACtD,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEhD,IAAA,MAAM,KAAK,GAAG,OAAO,CAA+B,MAAK;QACrD,IAAI,CAAC,gBAAgB,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC;SACf;QAED,OAAO;AACH,YAAA,GAAG,gBAAgB;AACnB,YAAA,iBAAiB,EAAE,CAAC,SAAmB,EAAE,OAAiB,KAAI;gBAC1D,UAAU,CAAC,IAAI,CAAC,CAAC;gBAEjB,KAAK,CAAC,YAAW;AACb,oBAAA,IAAI;wBACA,MAAM,gBAAgB,CAAC,iBAAiB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;qBAChE;4BAAS;wBACN,UAAU,CAAC,KAAK,CAAC,CAAC;qBACrB;iBACJ,GAAG,CAAC;aACR;SACJ,CAAC;AACN,KAAC,EAAE,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,QACIA,cACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,UAAU,EAAE;AACrC,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,SAAS;AACrC,YAAA,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS;SAChC,CAAC,EAAA,SAAA,EACM,aAAa,EAEpB,QAAA,EAAA,CAAA,SAAS,KACNC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EACzB,QAAA,EAAAA,GAAA,CAAC,MAAM,EAAG,EAAA,CAAA,EAAA,CACR,CACT,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,GAAG,SAAS,EAAE,CAAC,EAAA,QAAA,EACvDA,GAAC,CAAA,gBAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAG,QAAQ,EAA6B,CAAA,EAAA,CAC7E,CACJ,EAAA,CAAA,EACR;AACN;;;;"}

package/DatePicker/DatePicker.js

@@ -1,6 +1,7 @@
 import './../index.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import classnames from 'classnames';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { AsyncDataLoader } from '../AsyncDataLoader.js';
 import { AsyncDataStore } from '../AsyncDataStore.js';
@@ -15,8 +16,7 @@ import { useDatePickerControls } from '../useDatePickerControls.js';
 import { useModifierDates } from '../useModifierDates.js';
 import { useDisplayDate } from '../utils.js';
 import { Divider } from '@hh.ru/magritte-ui-divider';
-import { s as styles } from '../date-picker-QiutPQnb.js';
-import 'classnames';
+import { s as styles } from '../date-picker-Cb_rWJTY.js';
 import '../AsyncDataContext.js';
 import '@hh.ru/magritte-ui-loader';
 import 'date-fns';
@@ -41,7 +41,7 @@ const DatePickerRenderFunc = forwardRef((props, ref) => {
     // колбеки
     onDisplayDateChange, onDateSelect, 
     // настройки внешнего вида
-    activeHeader, alignHeader, headerMonthFormat, locale, showAdjacentDays = true, showControls, showHeader = true, showHeaderDate, showDivider = true, showWeekdays = true, fixedWeeks, mobileScrollHorizontal, paddingsHorizontalDesktop, renderDay, } = props;
+    stretched, activeHeader, alignHeader, headerMonthFormat, locale, showAdjacentDays = true, showControls, showHeader = true, showHeaderDate, showDivider = true, showWeekdays = true, fixedWeeks, mobileScrollHorizontal, paddingsHorizontalDesktop, renderDay, } = props;
     const displayDate = useDisplayDate(_displayDate, selectedDate);
     const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } = useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);
     const { isMobile } = useBreakpoint();
@@ -49,11 +49,11 @@ const DatePickerRenderFunc = forwardRef((props, ref) => {
     if (isMobile && mobileScrollHorizontal) {
         return (jsx(MobileDatePickerWithScroll, { ...props, displayDate: displayDate, modifierDatesMap: modifierDatesMap, ref: ref }));
     }
-    return (jsx("div", { className: styles.layout, ref: ref, style: {
+    return (jsx("div", { className: classnames(styles.layout, { [styles.stretched]: stretched }), ref: ref, style: {
             ...(!isMobile && typeof paddingsHorizontalDesktop !== 'undefined'
                 ? { '--magritte-date-picker-padding-horizontal': `${paddingsHorizontalDesktop}px` }
                 : {}),
-        }, children: jsx(AsyncDataStore, { modifierDatesFunc: modifierDatesFunc, children: jsxs(AsyncDataLoader, { children: [showHeader && (jsx(Header, { calendar: calendar, displayDate: displayDate, activeHeader: activeHeader, alignHeader: alignHeader, goToNextPeriod: goToNextPeriod, goToPrevPeriod: goToPrevPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, switchCalendar: switchCalendar })), showWeekdays && calendar === 'day' && jsx(Weekdays, { locale: locale }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), calendar === 'day' && (jsx(DayPicker, { displayDate: displayDate, selectedDate: selectedDate, onDateSelect: onDateSelect, showAdjacentDays: showAdjacentDays, minDate: minDate, maxDate: maxDate, fixedWeeks: fixedWeeks, modifierDatesMap: modifierDatesMap, renderDay: renderDay })), calendar === 'month' && (jsx(MonthPicker, { locale: locale, displayDate: displayDate, selectedDate: selectedDate, onDateSelect: enabledCalendars.startsWith('dd') ? zoomIntoMonth : onDateSelect })), calendar === 'year' && (jsx(YearPicker, { displayDate: displayDate, selectedDate: selectedDate, onDateSelect: zoomIntoYear }))] }) }) }));
+        }, children: jsx(AsyncDataStore, { modifierDatesFunc: modifierDatesFunc, children: jsxs(AsyncDataLoader, { stretched: stretched, children: [showHeader && (jsx(Header, { calendar: calendar, displayDate: displayDate, stretched: stretched, activeHeader: activeHeader, alignHeader: alignHeader, goToNextPeriod: goToNextPeriod, goToPrevPeriod: goToPrevPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, switchCalendar: switchCalendar })), showWeekdays && calendar === 'day' && jsx(Weekdays, { locale: locale, stretched: stretched }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), calendar === 'day' && (jsx(DayPicker, { displayDate: displayDate, selectedDate: selectedDate, onDateSelect: onDateSelect, showAdjacentDays: showAdjacentDays, minDate: minDate, maxDate: maxDate, stretched: stretched, fixedWeeks: fixedWeeks, modifierDatesMap: modifierDatesMap, renderDay: renderDay })), calendar === 'month' && (jsx(MonthPicker, { locale: locale, displayDate: displayDate, selectedDate: selectedDate, stretched: stretched, onDateSelect: enabledCalendars.startsWith('dd') ? zoomIntoMonth : onDateSelect })), calendar === 'year' && (jsx(YearPicker, { displayDate: displayDate, selectedDate: selectedDate, stretched: stretched, onDateSelect: zoomIntoYear }))] }) }) }));
 });
 DatePickerRenderFunc.displayName = 'DatePickerRenderFunc';
 const DatePicker = WithArrowNavigationHOC(DatePickerRenderFunc);

package/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { CSSProperties, forwardRef } from 'react';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { AsyncDataLoader } from '@hh.ru/magritte-ui-date-picker/AsyncDataLoader';\nimport { AsyncDataStore } from '@hh.ru/magritte-ui-date-picker/AsyncDataStore';\nimport { DayPicker } from '@hh.ru/magritte-ui-date-picker/DatePicker/DayPicker';\nimport MobileDatePickerWithScroll from '@hh.ru/magritte-ui-date-picker/DatePicker/MobileDatePickerWithScroll';\nimport { Header } from '@hh.ru/magritte-ui-date-picker/Header';\nimport { MonthPicker } from '@hh.ru/magritte-ui-date-picker/MonthPicker';\nimport { Weekdays } from '@hh.ru/magritte-ui-date-picker/Weekdays';\nimport { WithArrowNavigationHOC } from '@hh.ru/magritte-ui-date-picker/WithArrowNavigationHOC';\nimport { YearPicker } from '@hh.ru/magritte-ui-date-picker/YearPicker';\nimport { DatePickerProps } from '@hh.ru/magritte-ui-date-picker/types';\nimport { useDatePickerControls } from '@hh.ru/magritte-ui-date-picker/useDatePickerControls';\nimport { useModifierDates } from '@hh.ru/magritte-ui-date-picker/useModifierDates';\nimport { useDisplayDate } from '@hh.ru/magritte-ui-date-picker/utils';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\n\nimport styles from '../date-picker.less';\n\nconst DatePickerRenderFunc = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {\n    const {\n        // настройки функциональности\n        modifierDates,\n        modifierDatesFunc,\n        displayDate: _displayDate,\n        enabledCalendars,\n        minDate,\n        maxDate,\n        selectedDate,\n        // колбеки\n        onDisplayDateChange,\n        onDateSelect,\n        // настройки внешнего вида\n        activeHeader,\n        alignHeader,\n        headerMonthFormat,\n        locale,\n        showAdjacentDays = true,\n        showControls,\n        showHeader = true,\n        showHeaderDate,\n        showDivider = true,\n        showWeekdays = true,\n        fixedWeeks,\n        mobileScrollHorizontal,\n        paddingsHorizontalDesktop,\n        renderDay,\n    } = props;\n    const displayDate = useDisplayDate(_displayDate, selectedDate);\n    const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } =\n        useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);\n    const { isMobile } = useBreakpoint();\n\n    const modifierDatesMap = useModifierDates(modifierDates);\n\n    if (isMobile && mobileScrollHorizontal) {\n        return (\n            <MobileDatePickerWithScroll\n                {...props}\n                displayDate={displayDate}\n                modifierDatesMap={modifierDatesMap}\n                ref={ref}\n            />\n        );\n    }\n\n    return (\n        <div\n            className={styles.layout}\n            ref={ref}\n            style={\n                {\n                    ...(!isMobile && typeof paddingsHorizontalDesktop !== 'undefined'\n                        ? { '--magritte-date-picker-padding-horizontal': `${paddingsHorizontalDesktop}px` }\n                        : {}),\n                } as CSSProperties\n            }\n        >\n            <AsyncDataStore modifierDatesFunc={modifierDatesFunc}>\n                <AsyncDataLoader>\n                    {showHeader && (\n                        <Header\n                            calendar={calendar}\n                            displayDate={displayDate}\n                            activeHeader={activeHeader}\n                            alignHeader={alignHeader}\n                            goToNextPeriod={goToNextPeriod}\n                            goToPrevPeriod={goToPrevPeriod}\n                            headerMonthFormat={headerMonthFormat}\n                            locale={locale}\n                            showControls={showControls}\n                            showHeaderDate={showHeaderDate}\n                            switchCalendar={switchCalendar}\n                        />\n                    )}\n                    {showWeekdays && calendar === 'day' && <Weekdays locale={locale} />}\n                    {showDivider && (showHeader || showWeekdays) && <Divider />}\n                    {calendar === 'day' && (\n                        <DayPicker\n                            displayDate={displayDate}\n                            selectedDate={selectedDate}\n                            onDateSelect={onDateSelect}\n                            showAdjacentDays={showAdjacentDays}\n                            minDate={minDate}\n                            maxDate={maxDate}\n                            fixedWeeks={fixedWeeks}\n                            modifierDatesMap={modifierDatesMap}\n                            renderDay={renderDay}\n                        />\n                    )}\n                    {calendar === 'month' && (\n                        <MonthPicker\n                            locale={locale}\n                            displayDate={displayDate}\n                            selectedDate={selectedDate}\n                            onDateSelect={enabledCalendars.startsWith('dd') ? zoomIntoMonth : onDateSelect}\n                        />\n                    )}\n                    {calendar === 'year' && (\n                        <YearPicker displayDate={displayDate} selectedDate={selectedDate} onDateSelect={zoomIntoYear} />\n                    )}\n                </AsyncDataLoader>\n            </AsyncDataStore>\n        </div>\n    );\n});\n\nDatePickerRenderFunc.displayName = 'DatePickerRenderFunc';\n\nexport const DatePicker = WithArrowNavigationHOC(DatePickerRenderFunc);\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { CSSProperties, forwardRef } from 'react';\nimport classnames from 'classnames';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { AsyncDataLoader } from '@hh.ru/magritte-ui-date-picker/AsyncDataLoader';\nimport { AsyncDataStore } from '@hh.ru/magritte-ui-date-picker/AsyncDataStore';\nimport { DayPicker } from '@hh.ru/magritte-ui-date-picker/DatePicker/DayPicker';\nimport MobileDatePickerWithScroll from '@hh.ru/magritte-ui-date-picker/DatePicker/MobileDatePickerWithScroll';\nimport { Header } from '@hh.ru/magritte-ui-date-picker/Header';\nimport { MonthPicker } from '@hh.ru/magritte-ui-date-picker/MonthPicker';\nimport { Weekdays } from '@hh.ru/magritte-ui-date-picker/Weekdays';\nimport { WithArrowNavigationHOC } from '@hh.ru/magritte-ui-date-picker/WithArrowNavigationHOC';\nimport { YearPicker } from '@hh.ru/magritte-ui-date-picker/YearPicker';\nimport { DatePickerProps } from '@hh.ru/magritte-ui-date-picker/types';\nimport { useDatePickerControls } from '@hh.ru/magritte-ui-date-picker/useDatePickerControls';\nimport { useModifierDates } from '@hh.ru/magritte-ui-date-picker/useModifierDates';\nimport { useDisplayDate } from '@hh.ru/magritte-ui-date-picker/utils';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\n\nimport styles from '../date-picker.less';\n\nconst DatePickerRenderFunc = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {\n    const {\n        // настройки функциональности\n        modifierDates,\n        modifierDatesFunc,\n        displayDate: _displayDate,\n        enabledCalendars,\n        minDate,\n        maxDate,\n        selectedDate,\n        // колбеки\n        onDisplayDateChange,\n        onDateSelect,\n        // настройки внешнего вида\n        stretched,\n        activeHeader,\n        alignHeader,\n        headerMonthFormat,\n        locale,\n        showAdjacentDays = true,\n        showControls,\n        showHeader = true,\n        showHeaderDate,\n        showDivider = true,\n        showWeekdays = true,\n        fixedWeeks,\n        mobileScrollHorizontal,\n        paddingsHorizontalDesktop,\n        renderDay,\n    } = props;\n    const displayDate = useDisplayDate(_displayDate, selectedDate);\n    const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } =\n        useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);\n    const { isMobile } = useBreakpoint();\n\n    const modifierDatesMap = useModifierDates(modifierDates);\n\n    if (isMobile && mobileScrollHorizontal) {\n        return (\n            <MobileDatePickerWithScroll\n                {...props}\n                displayDate={displayDate}\n                modifierDatesMap={modifierDatesMap}\n                ref={ref}\n            />\n        );\n    }\n\n    return (\n        <div\n            className={classnames(styles.layout, { [styles.stretched]: stretched })}\n            ref={ref}\n            style={\n                {\n                    ...(!isMobile && typeof paddingsHorizontalDesktop !== 'undefined'\n                        ? { '--magritte-date-picker-padding-horizontal': `${paddingsHorizontalDesktop}px` }\n                        : {}),\n                } as CSSProperties\n            }\n        >\n            <AsyncDataStore modifierDatesFunc={modifierDatesFunc}>\n                <AsyncDataLoader stretched={stretched}>\n                    {showHeader && (\n                        <Header\n                            calendar={calendar}\n                            displayDate={displayDate}\n                            stretched={stretched}\n                            activeHeader={activeHeader}\n                            alignHeader={alignHeader}\n                            goToNextPeriod={goToNextPeriod}\n                            goToPrevPeriod={goToPrevPeriod}\n                            headerMonthFormat={headerMonthFormat}\n                            locale={locale}\n                            showControls={showControls}\n                            showHeaderDate={showHeaderDate}\n                            switchCalendar={switchCalendar}\n                        />\n                    )}\n                    {showWeekdays && calendar === 'day' && <Weekdays locale={locale} stretched={stretched} />}\n                    {showDivider && (showHeader || showWeekdays) && <Divider />}\n                    {calendar === 'day' && (\n                        <DayPicker\n                            displayDate={displayDate}\n                            selectedDate={selectedDate}\n                            onDateSelect={onDateSelect}\n                            showAdjacentDays={showAdjacentDays}\n                            minDate={minDate}\n                            maxDate={maxDate}\n                            stretched={stretched}\n                            fixedWeeks={fixedWeeks}\n                            modifierDatesMap={modifierDatesMap}\n                            renderDay={renderDay}\n                        />\n                    )}\n                    {calendar === 'month' && (\n                        <MonthPicker\n                            locale={locale}\n                            displayDate={displayDate}\n                            selectedDate={selectedDate}\n                            stretched={stretched}\n                            onDateSelect={enabledCalendars.startsWith('dd') ? zoomIntoMonth : onDateSelect}\n                        />\n                    )}\n                    {calendar === 'year' && (\n                        <YearPicker\n                            displayDate={displayDate}\n                            selectedDate={selectedDate}\n                            stretched={stretched}\n                            onDateSelect={zoomIntoYear}\n                        />\n                    )}\n                </AsyncDataLoader>\n            </AsyncDataStore>\n        </div>\n    );\n});\n\nDatePickerRenderFunc.displayName = 'DatePickerRenderFunc';\n\nexport const DatePicker = WithArrowNavigationHOC(DatePickerRenderFunc);\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/DatePicker/DayPicker.js

@@ -6,7 +6,7 @@ import { isToday, format, isSameMonth, isSameDay } from 'date-fns';
 import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
 import { useModifierDatesFunc } from '../useModifierDatesFunc.js';
 import { useDayPickerDates } from '../utils.js';
-import { s as styles } from '../date-picker-QiutPQnb.js';
+import { s as styles } from '../date-picker-Cb_rWJTY.js';
 import '../AsyncDataContext.js';
 import '../useModifierDates.js';
 import 'date-fns/constants';
@@ -27,7 +27,7 @@ const DayDefault = forwardRef((props, ref) => {
 });
 DayDefault.displayName = 'DayDefault';
 const renderDayDefault = (props) => jsx(DayDefault, { ...props });
-const DayPicker = ({ minDate, maxDate, displayDate, selectedDate, showAdjacentDays, onDateSelect, fixedWeeks, isFocusAvailable = true, modifierDatesMap, renderDay = renderDayDefault, }) => {
+const DayPicker = ({ minDate, maxDate, displayDate, selectedDate, showAdjacentDays, onDateSelect, fixedWeeks, stretched, isFocusAvailable = true, modifierDatesMap, renderDay = renderDayDefault, }) => {
     const dates = useDayPickerDates(displayDate, fixedWeeks);
     const { disabledDatesFunc, indicatorCountFunc, additionalFunc } = useModifierDatesFunc({
         startDate: dates[0],
@@ -42,7 +42,7 @@ const DayPicker = ({ minDate, maxDate, displayDate, selectedDate, showAdjacentDa
             return () => onDateSelect?.(date);
         });
     }, [dates, onDateSelect]);
-    return (jsx("div", { className: classnames(styles.calendar, styles.calendarDays), "data-qa": "date-picker-days", children: dates.map((date, index) => {
+    return (jsx("div", { className: classnames(styles.calendar, styles.calendarDays, { [styles.stretched]: stretched }), "data-qa": "date-picker-days", children: dates.map((date, index) => {
             const isAdjacent = !isSameMonth(date, displayDate);
             const isDisabled = forceDisabled || disabledDatesFunc(date);
             const isSelected = !!selectedDate && isSameDay(date, selectedDate);

package/DatePicker/DayPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DayPicker.js","sources":["../../src/DatePicker/DayPicker.tsx"],"sourcesContent":["import { FC, useMemo, forwardRef, ForwardedRef, ReactNode } from 'react';\nimport classnames from 'classnames';\nimport { format, isSameDay, isSameMonth, isToday } from 'date-fns';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { DayPickerProps, DayProps } from '@hh.ru/magritte-ui-date-picker/types';\nimport { useModifierDatesFunc } from '@hh.ru/magritte-ui-date-picker/useModifierDatesFunc';\nimport { useDayPickerDates } from '@hh.ru/magritte-ui-date-picker/utils';\n\nimport styles from '../date-picker.less';\n\nexport const DayDefault = forwardRef((props: DayProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const {\n        date,\n        disabled,\n        indicatorCount,\n        isFocusAvailable,\n        isAdjacent,\n        selected,\n        children,\n        additional: _,\n        ...rest\n    } = props;\n    const isDisabled = isAdjacent || disabled;\n\n    return (\n        <button\n            {...rest}\n            ref={ref}\n            type=\"button\"\n            className={classnames(styles.text, {\n                [styles.textDisabled]: isDisabled,\n                [styles.textSelected]: selected,\n                [styles.textToday]: isToday(date),\n                [styles.textUnselected]: !isDisabled && !selected,\n            })}\n            tabIndex={isFocusAvailable ? undefined : -1}\n            disabled={isDisabled || selected}\n            data-date={format(date, 'yyyy-MM-dd')}\n            data-qa={classnames('date-picker-day', {\n                'date-picker-day-disabled': isDisabled,\n                'date-picker-day-selected': selected,\n                'date-picker-day-today': isToday(date),\n            })}\n        >\n            {children}\n            {indicatorCount && (\n                <div className={styles.indicatorContainer}>\n                    {[...Array(Math.min(indicatorCount, 3)).keys()].map((i) => (\n                        <div key={i} className={styles.indicator} />\n                    ))}\n                </div>\n            )}\n        </button>\n    );\n});\n\nDayDefault.displayName = 'DayDefault';\n\nconst renderDayDefault = (props: DayProps): ReactNode => <DayDefault {...props} />;\n\nexport const DayPicker: FC<DayPickerProps> = ({\n    minDate,\n    maxDate,\n    displayDate,\n    selectedDate,\n    showAdjacentDays,\n    onDateSelect,\n    fixedWeeks,\n    isFocusAvailable = true,\n    modifierDatesMap,\n    renderDay = renderDayDefault,\n}) => {\n    const dates = useDayPickerDates(displayDate, fixedWeeks);\n    const { disabledDatesFunc, indicatorCountFunc, additionalFunc } = useModifierDatesFunc({\n        startDate: dates[0],\n        endDate: dates[dates.length - 1],\n        modifierDatesMap,\n        minDate,\n        maxDate,\n    });\n    const forceDisabled = useDisabled();\n\n    const onClickHandlers = useMemo(() => {\n        return dates.map((date) => {\n            return () => onDateSelect?.(date);\n        });\n    }, [dates, onDateSelect]);\n\n    return (\n        <div className={classnames(styles.calendar, styles.calendarDays)} data-qa=\"date-picker-days\">\n            {dates.map((date, index) => {\n                const isAdjacent = !isSameMonth(date, displayDate);\n                const isDisabled = forceDisabled || disabledDatesFunc(date);\n                const isSelected = !!selectedDate && isSameDay(date, selectedDate);\n                const display = !isAdjacent || showAdjacentDays;\n                const indicatorCount = indicatorCountFunc(date);\n\n                return (\n                    <div className={styles.item} key={`${date}`}>\n                        {display ? (\n                            renderDay({\n                                date,\n                                isFocusAvailable,\n                                isAdjacent,\n                                indicatorCount,\n                                disabled: isDisabled,\n                                selected: isSelected,\n                                onClick: onClickHandlers[index],\n                                children: format(date, 'd'),\n                                additional: additionalFunc(date),\n                            })\n                        ) : (\n                            <div className={styles.textEmpty} />\n                        )}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"DayPicker.js","sources":["../../src/DatePicker/DayPicker.tsx"],"sourcesContent":["import { FC, useMemo, forwardRef, ForwardedRef, ReactNode } from 'react';\nimport classnames from 'classnames';\nimport { format, isSameDay, isSameMonth, isToday } from 'date-fns';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { DayPickerProps, DayProps } from '@hh.ru/magritte-ui-date-picker/types';\nimport { useModifierDatesFunc } from '@hh.ru/magritte-ui-date-picker/useModifierDatesFunc';\nimport { useDayPickerDates } from '@hh.ru/magritte-ui-date-picker/utils';\n\nimport styles from '../date-picker.less';\n\nexport const DayDefault = forwardRef((props: DayProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const {\n        date,\n        disabled,\n        indicatorCount,\n        isFocusAvailable,\n        isAdjacent,\n        selected,\n        children,\n        additional: _,\n        ...rest\n    } = props;\n    const isDisabled = isAdjacent || disabled;\n\n    return (\n        <button\n            {...rest}\n            ref={ref}\n            type=\"button\"\n            className={classnames(styles.text, {\n                [styles.textDisabled]: isDisabled,\n                [styles.textSelected]: selected,\n                [styles.textToday]: isToday(date),\n                [styles.textUnselected]: !isDisabled && !selected,\n            })}\n            tabIndex={isFocusAvailable ? undefined : -1}\n            disabled={isDisabled || selected}\n            data-date={format(date, 'yyyy-MM-dd')}\n            data-qa={classnames('date-picker-day', {\n                'date-picker-day-disabled': isDisabled,\n                'date-picker-day-selected': selected,\n                'date-picker-day-today': isToday(date),\n            })}\n        >\n            {children}\n            {indicatorCount && (\n                <div className={styles.indicatorContainer}>\n                    {[...Array(Math.min(indicatorCount, 3)).keys()].map((i) => (\n                        <div key={i} className={styles.indicator} />\n                    ))}\n                </div>\n            )}\n        </button>\n    );\n});\n\nDayDefault.displayName = 'DayDefault';\n\nconst renderDayDefault = (props: DayProps): ReactNode => <DayDefault {...props} />;\n\nexport const DayPicker: FC<DayPickerProps> = ({\n    minDate,\n    maxDate,\n    displayDate,\n    selectedDate,\n    showAdjacentDays,\n    onDateSelect,\n    fixedWeeks,\n    stretched,\n    isFocusAvailable = true,\n    modifierDatesMap,\n    renderDay = renderDayDefault,\n}) => {\n    const dates = useDayPickerDates(displayDate, fixedWeeks);\n    const { disabledDatesFunc, indicatorCountFunc, additionalFunc } = useModifierDatesFunc({\n        startDate: dates[0],\n        endDate: dates[dates.length - 1],\n        modifierDatesMap,\n        minDate,\n        maxDate,\n    });\n    const forceDisabled = useDisabled();\n\n    const onClickHandlers = useMemo(() => {\n        return dates.map((date) => {\n            return () => onDateSelect?.(date);\n        });\n    }, [dates, onDateSelect]);\n\n    return (\n        <div\n            className={classnames(styles.calendar, styles.calendarDays, { [styles.stretched]: stretched })}\n            data-qa=\"date-picker-days\"\n        >\n            {dates.map((date, index) => {\n                const isAdjacent = !isSameMonth(date, displayDate);\n                const isDisabled = forceDisabled || disabledDatesFunc(date);\n                const isSelected = !!selectedDate && isSameDay(date, selectedDate);\n                const display = !isAdjacent || showAdjacentDays;\n                const indicatorCount = indicatorCountFunc(date);\n\n                return (\n                    <div className={styles.item} key={`${date}`}>\n                        {display ? (\n                            renderDay({\n                                date,\n                                isFocusAvailable,\n                                isAdjacent,\n                                indicatorCount,\n                                disabled: isDisabled,\n                                selected: isSelected,\n                                onClick: onClickHandlers[index],\n                                children: format(date, 'd'),\n                                additional: additionalFunc(date),\n                            })\n                        ) : (\n                            <div className={styles.textEmpty} />\n                        )}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/DatePicker/MobileDatePickerWithScroll.js

@@ -13,7 +13,7 @@ import { YearPicker } from '../YearPicker.js';
 import { useDatePickerControls } from '../useDatePickerControls.js';
 import { useMobileHorizontalScroll } from '../useMobileHorizontalScroll.js';
 import { Divider } from '@hh.ru/magritte-ui-divider';
-import { s as styles } from '../date-picker-QiutPQnb.js';
+import { s as styles } from '../date-picker-Cb_rWJTY.js';
 import 'classnames';
 import '../AsyncDataContext.js';
 import '@hh.ru/magritte-ui-loader';

package/DatePicker/UncontrolledDatePicker.js

@@ -5,12 +5,12 @@ import { useDisplayDate } from '../utils.js';
 import { DatePicker } from './DatePicker.js';
 import 'date-fns';
 import 'date-fns/constants';
+import 'classnames';
 import '@hh.ru/magritte-ui-breakpoint';
 import '../AsyncDataLoader.js';
-import 'classnames';
 import '../AsyncDataContext.js';
 import '@hh.ru/magritte-ui-loader';
-import '../date-picker-QiutPQnb.js';
+import '../date-picker-Cb_rWJTY.js';
 import '../AsyncDataStore.js';
 import '../useModifierDates.js';
 import './DayPicker.js';

package/Header.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { DateType, Calendar, BaseDatePickerProps } from '@hh.ru/magritte-ui-date-picker/types';
-export declare const Header: FC<Pick<BaseDatePickerProps, 'activeHeader' | 'alignHeader' | 'headerMonthFormat' | 'locale' | 'showControls' | 'showHeaderDate'> & {
+export declare const Header: FC<Pick<BaseDatePickerProps, 'stretched' | 'activeHeader' | 'alignHeader' | 'headerMonthFormat' | 'locale' | 'showControls' | 'showHeaderDate'> & {
     calendar: Calendar;
     displayDate: DateType;
     goToNextPeriod?: VoidFunction;

package/Header.js

@@ -8,16 +8,16 @@ import { makeYearsInterval } from './utils.js';
 import { IconDynamic } from '@hh.ru/magritte-ui-icon';
 import { ChevronLeftOutlinedSize24, ChevronDownOutlinedSize16, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './date-picker-QiutPQnb.js';
+import { s as styles } from './date-picker-Cb_rWJTY.js';
 import 'date-fns/constants';
 
-const Header = ({ calendar, displayDate, activeHeader: _activeHeader = true, alignHeader = 'center', goToNextPeriod, goToPrevPeriod, headerMonthFormat = 'mm', locale, showControls = true, showHeaderDate = true, showNextControl = true, showPrevControl = true, switchCalendar, }) => {
+const Header = ({ calendar, displayDate, stretched, activeHeader: _activeHeader = true, alignHeader = 'center', goToNextPeriod, goToPrevPeriod, headerMonthFormat = 'mm', locale, showControls = true, showHeaderDate = true, showNextControl = true, showPrevControl = true, switchCalendar, }) => {
     const forceDisabled = useDisabled();
     const activeHeader = _activeHeader && !forceDisabled;
     if (!showControls && !showHeaderDate) {
         return null;
     }
-    return (jsx("div", { className: styles.headerWrapper, children: jsxs("div", { className: styles.header, "data-qa": "date-picker-header", children: [showControls && (jsx("div", { className: styles.control, children: showPrevControl && goToPrevPeriod && (jsx(ChevronLeftOutlinedSize24, { padding: 8, onClick: goToPrevPeriod, initialColor: "secondary", "data-qa": "date-picker-prev-control", borderRadius: "halfHeight" })) })), jsx("div", { className: classnames({
+    return (jsx("div", { className: classnames(styles.headerWrapper, { [styles.stretched]: stretched }), children: jsxs("div", { className: styles.header, "data-qa": "date-picker-header", children: [showControls && (jsx("div", { className: styles.control, children: showPrevControl && goToPrevPeriod && (jsx(ChevronLeftOutlinedSize24, { padding: 8, onClick: goToPrevPeriod, initialColor: "secondary", "data-qa": "date-picker-prev-control", borderRadius: "halfHeight" })) })), jsx("div", { className: classnames({
                         [styles.headerDateWrapperCenter]: alignHeader === 'center',
                         [styles.headerDateWrapperLeft]: alignHeader === 'left',
                     }), children: showHeaderDate && (jsx(IconDynamic, { children: jsxs("button", { className: classnames(styles.headerDate, { [styles.headerDateActive]: activeHeader }), "data-qa": "date-picker-header-date", disabled: !activeHeader, onClick: switchCalendar, children: [jsxs(Text, { Element: 'span', typography: "subtitle-1-semibold", transform: "capitalize", children: [calendar === 'day' &&

package/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../src/Header.tsx"],"sourcesContent":["import { FC, Fragment } from 'react';\nimport classnames from 'classnames';\nimport { format } from 'date-fns';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { DateType, Calendar, BaseDatePickerProps } from '@hh.ru/magritte-ui-date-picker/types';\nimport { makeYearsInterval } from '@hh.ru/magritte-ui-date-picker/utils';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport {\n    ChevronLeftOutlinedSize24,\n    ChevronRightOutlinedSize24,\n    ChevronDownOutlinedSize16,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './date-picker.less';\n\nexport const Header: FC<\n    Pick<\n        BaseDatePickerProps,\n        'activeHeader' | 'alignHeader' | 'headerMonthFormat' | 'locale' | 'showControls' | 'showHeaderDate'\n    > & {\n        calendar: Calendar;\n        displayDate: DateType;\n        goToNextPeriod?: VoidFunction;\n        goToPrevPeriod?: VoidFunction;\n        showNextControl?: boolean;\n        showPrevControl?: boolean;\n        switchCalendar?: VoidFunction;\n    }\n> = ({\n    calendar,\n    displayDate,\n    activeHeader: _activeHeader = true,\n    alignHeader = 'center',\n    goToNextPeriod,\n    goToPrevPeriod,\n    headerMonthFormat = 'mm',\n    locale,\n    showControls = true,\n    showHeaderDate = true,\n    showNextControl = true,\n    showPrevControl = true,\n    switchCalendar,\n}) => {\n    const forceDisabled = useDisabled();\n    const activeHeader = _activeHeader && !forceDisabled;\n\n    if (!showControls && !showHeaderDate) {\n        return null;\n    }\n\n    return (\n        <div className={styles.headerWrapper}>\n            <div className={styles.header} data-qa=\"date-picker-header\">\n                {showControls && (\n                    <div className={styles.control}>\n                        {showPrevControl && goToPrevPeriod && (\n                            <ChevronLeftOutlinedSize24\n                                padding={8}\n                                onClick={goToPrevPeriod}\n                                initialColor=\"secondary\"\n                                data-qa=\"date-picker-prev-control\"\n                                borderRadius=\"halfHeight\"\n                            />\n                        )}\n                    </div>\n                )}\n                <div\n                    className={classnames({\n                        [styles.headerDateWrapperCenter]: alignHeader === 'center',\n                        [styles.headerDateWrapperLeft]: alignHeader === 'left',\n                    })}\n                >\n                    {showHeaderDate && (\n                        <IconDynamic>\n                            <button\n                                className={classnames(styles.headerDate, { [styles.headerDateActive]: activeHeader })}\n                                data-qa=\"date-picker-header-date\"\n                                disabled={!activeHeader}\n                                onClick={switchCalendar}\n                            >\n                                <Text Element={'span'} typography=\"subtitle-1-semibold\" transform=\"capitalize\">\n                                    {calendar === 'day' &&\n                                        format(displayDate, headerMonthFormat.endsWith('yyyy') ? 'LLLL yyyy' : 'LLLL', {\n                                            locale,\n                                        })}\n                                    {calendar === 'month' && format(displayDate, 'yyyy', { locale })}\n                                    {calendar === 'year' && (\n                                        <Fragment>\n                                            {format(makeYearsInterval(displayDate).start, 'yyyy', { locale })}\n                                            {` – `}\n                                            {format(makeYearsInterval(displayDate).end, 'yyyy', { locale })}\n                                        </Fragment>\n                                    )}\n                                </Text>\n                                {activeHeader && (\n                                    <ChevronDownOutlinedSize16 initialColor=\"primary\" highlightedColor={'primary'} />\n                                )}\n                            </button>\n                        </IconDynamic>\n                    )}\n                </div>\n                {showControls && (\n                    <div className={styles.control}>\n                        {showNextControl && goToNextPeriod && (\n                            <ChevronRightOutlinedSize24\n                                padding={8}\n                                initialColor=\"secondary\"\n                                onClick={goToNextPeriod}\n                                data-qa=\"date-picker-next-control\"\n                                borderRadius=\"halfHeight\"\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../src/Header.tsx"],"sourcesContent":["import { FC, Fragment } from 'react';\nimport classnames from 'classnames';\nimport { format } from 'date-fns';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { DateType, Calendar, BaseDatePickerProps } from '@hh.ru/magritte-ui-date-picker/types';\nimport { makeYearsInterval } from '@hh.ru/magritte-ui-date-picker/utils';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport {\n    ChevronLeftOutlinedSize24,\n    ChevronRightOutlinedSize24,\n    ChevronDownOutlinedSize16,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './date-picker.less';\n\nexport const Header: FC<\n    Pick<\n        BaseDatePickerProps,\n        | 'stretched'\n        | 'activeHeader'\n        | 'alignHeader'\n        | 'headerMonthFormat'\n        | 'locale'\n        | 'showControls'\n        | 'showHeaderDate'\n    > & {\n        calendar: Calendar;\n        displayDate: DateType;\n        goToNextPeriod?: VoidFunction;\n        goToPrevPeriod?: VoidFunction;\n        showNextControl?: boolean;\n        showPrevControl?: boolean;\n        switchCalendar?: VoidFunction;\n    }\n> = ({\n    calendar,\n    displayDate,\n    stretched,\n    activeHeader: _activeHeader = true,\n    alignHeader = 'center',\n    goToNextPeriod,\n    goToPrevPeriod,\n    headerMonthFormat = 'mm',\n    locale,\n    showControls = true,\n    showHeaderDate = true,\n    showNextControl = true,\n    showPrevControl = true,\n    switchCalendar,\n}) => {\n    const forceDisabled = useDisabled();\n    const activeHeader = _activeHeader && !forceDisabled;\n\n    if (!showControls && !showHeaderDate) {\n        return null;\n    }\n\n    return (\n        <div className={classnames(styles.headerWrapper, { [styles.stretched]: stretched })}>\n            <div className={styles.header} data-qa=\"date-picker-header\">\n                {showControls && (\n                    <div className={styles.control}>\n                        {showPrevControl && goToPrevPeriod && (\n                            <ChevronLeftOutlinedSize24\n                                padding={8}\n                                onClick={goToPrevPeriod}\n                                initialColor=\"secondary\"\n                                data-qa=\"date-picker-prev-control\"\n                                borderRadius=\"halfHeight\"\n                            />\n                        )}\n                    </div>\n                )}\n                <div\n                    className={classnames({\n                        [styles.headerDateWrapperCenter]: alignHeader === 'center',\n                        [styles.headerDateWrapperLeft]: alignHeader === 'left',\n                    })}\n                >\n                    {showHeaderDate && (\n                        <IconDynamic>\n                            <button\n                                className={classnames(styles.headerDate, { [styles.headerDateActive]: activeHeader })}\n                                data-qa=\"date-picker-header-date\"\n                                disabled={!activeHeader}\n                                onClick={switchCalendar}\n                            >\n                                <Text Element={'span'} typography=\"subtitle-1-semibold\" transform=\"capitalize\">\n                                    {calendar === 'day' &&\n                                        format(displayDate, headerMonthFormat.endsWith('yyyy') ? 'LLLL yyyy' : 'LLLL', {\n                                            locale,\n                                        })}\n                                    {calendar === 'month' && format(displayDate, 'yyyy', { locale })}\n                                    {calendar === 'year' && (\n                                        <Fragment>\n                                            {format(makeYearsInterval(displayDate).start, 'yyyy', { locale })}\n                                            {` – `}\n                                            {format(makeYearsInterval(displayDate).end, 'yyyy', { locale })}\n                                        </Fragment>\n                                    )}\n                                </Text>\n                                {activeHeader && (\n                                    <ChevronDownOutlinedSize16 initialColor=\"primary\" highlightedColor={'primary'} />\n                                )}\n                            </button>\n                        </IconDynamic>\n                    )}\n                </div>\n                {showControls && (\n                    <div className={styles.control}>\n                        {showNextControl && goToNextPeriod && (\n                            <ChevronRightOutlinedSize24\n                                padding={8}\n                                initialColor=\"secondary\"\n                                onClick={goToNextPeriod}\n                                data-qa=\"date-picker-next-control\"\n                                borderRadius=\"halfHeight\"\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/InfiniteScroll.js

@@ -4,7 +4,7 @@ import { useRef, useState, useContext, useMemo, useCallback, useLayoutEffect, us
 import { debounce } from '@hh.ru/magritte-common-func-utils';
 import { initScrollHandlers } from '@hh.ru/magritte-internal-custom-scroll';
 import { AsyncDataContext } from './AsyncDataContext.js';
-import { s as styles } from './date-picker-QiutPQnb.js';
+import { s as styles } from './date-picker-Cb_rWJTY.js';
 
 const InfiniteScroll = ({ initialRenderedItems, invisibleThreshold, visibleThreshold, makeItemFunc, renderItemFunc, onVisibleItemChange, axis = 'vertical', onTouchEnd, }) => {
     const stateRef = useRef({

package/InfoDatePicker/InfoDatePicker.js

@@ -1,5 +1,6 @@
 import './../index.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import classnames from 'classnames';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { AsyncDataLoader } from '../AsyncDataLoader.js';
 import { AsyncDataStore } from '../AsyncDataStore.js';
@@ -13,9 +14,8 @@ import { useDatePickerControls } from '../useDatePickerControls.js';
 import { useModifierDates } from '../useModifierDates.js';
 import { useDisplayDate } from '../utils.js';
 import { Divider } from '@hh.ru/magritte-ui-divider';
-import { s as styles } from '../date-picker-QiutPQnb.js';
+import { s as styles } from '../date-picker-Cb_rWJTY.js';
 import 'react';
-import 'classnames';
 import '../AsyncDataContext.js';
 import '@hh.ru/magritte-ui-loader';
 import 'date-fns';
@@ -38,7 +38,7 @@ const InfoDatePicker = (props) => {
     // колбеки
     onDisplayDateChange, 
     // настройки внешнего вида
-    activeHeader, alignHeader, headerMonthFormat, locale, showControls, showDivider = true, showHeader = true, showHeaderDate, showWeekdays = true, fixedWeeks, mobileScrollHorizontal, paddingsHorizontalDesktop, modifierDates, modifierDatesFunc, showAdjacentDays, renderDay, } = props;
+    stretched, activeHeader, alignHeader, headerMonthFormat, locale, showControls, showDivider = true, showHeader = true, showHeaderDate, showWeekdays = true, fixedWeeks, mobileScrollHorizontal, paddingsHorizontalDesktop, modifierDates, modifierDatesFunc, showAdjacentDays, renderDay, } = props;
     const displayDate = useDisplayDate(_displayDate);
     const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } = useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);
     const { isMobile } = useBreakpoint();
@@ -46,11 +46,11 @@ const InfoDatePicker = (props) => {
     if (isMobile && mobileScrollHorizontal) {
         return (jsx(MobileInfoDatePickerWithScroll, { ...props, displayDate: displayDate, modifierDatesMap: modifierDatesMap }));
     }
-    return (jsx("div", { className: styles.layout, style: {
+    return (jsx("div", { className: classnames(styles.layout, { [styles.stretched]: stretched }), style: {
             ...(!isMobile && typeof paddingsHorizontalDesktop !== 'undefined'
                 ? { '--magritte-date-picker-padding-horizontal': `${paddingsHorizontalDesktop}px` }
                 : {}),
-        }, children: jsx(AsyncDataStore, { modifierDatesFunc: modifierDatesFunc, children: jsxs(AsyncDataLoader, { children: [showHeader && (jsx(Header, { calendar: calendar, displayDate: displayDate, activeHeader: activeHeader, alignHeader: alignHeader, goToNextPeriod: goToNextPeriod, goToPrevPeriod: goToPrevPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, switchCalendar: switchCalendar })), showWeekdays && calendar === 'day' && jsx(Weekdays, { locale: locale }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), calendar === 'day' && (jsx(InfoDayPicker, { displayDate: displayDate, fixedWeeks: fixedWeeks, modifierDatesMap: modifierDatesMap, renderDay: renderDay, showAdjacentDays: showAdjacentDays })), calendar === 'month' && (jsx(MonthPicker, { locale: locale, displayDate: displayDate, onDateSelect: zoomIntoMonth })), calendar === 'year' && jsx(YearPicker, { displayDate: displayDate, onDateSelect: zoomIntoYear })] }) }) }));
+        }, children: jsx(AsyncDataStore, { modifierDatesFunc: modifierDatesFunc, children: jsxs(AsyncDataLoader, { stretched: stretched, children: [showHeader && (jsx(Header, { calendar: calendar, displayDate: displayDate, stretched: stretched, activeHeader: activeHeader, alignHeader: alignHeader, goToNextPeriod: goToNextPeriod, goToPrevPeriod: goToPrevPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, switchCalendar: switchCalendar })), showWeekdays && calendar === 'day' && jsx(Weekdays, { locale: locale, stretched: stretched }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), calendar === 'day' && (jsx(InfoDayPicker, { displayDate: displayDate, fixedWeeks: fixedWeeks, stretched: stretched, modifierDatesMap: modifierDatesMap, renderDay: renderDay, showAdjacentDays: showAdjacentDays })), calendar === 'month' && (jsx(MonthPicker, { locale: locale, displayDate: displayDate, stretched: stretched, onDateSelect: zoomIntoMonth })), calendar === 'year' && (jsx(YearPicker, { displayDate: displayDate, stretched: stretched, onDateSelect: zoomIntoYear }))] }) }) }));
 };
 
 export { InfoDatePicker };

package/InfoDatePicker/InfoDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoDatePicker.js","sources":["../../src/InfoDatePicker/InfoDatePicker.tsx"],"sourcesContent":["import { CSSProperties, FC } from 'react';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { InfoDatePickerProps } from '@hh.ru/magritte-ui-date-picker';\nimport { AsyncDataLoader } from '@hh.ru/magritte-ui-date-picker/AsyncDataLoader';\nimport { AsyncDataStore } from '@hh.ru/magritte-ui-date-picker/AsyncDataStore';\nimport { Header } from '@hh.ru/magritte-ui-date-picker/Header';\nimport { InfoDayPicker } from '@hh.ru/magritte-ui-date-picker/InfoDatePicker/InfoDayPicker';\nimport { MobileInfoDatePickerWithScroll } from '@hh.ru/magritte-ui-date-picker/InfoDatePicker/MobileInfoDatePickerWithScroll';\nimport { MonthPicker } from '@hh.ru/magritte-ui-date-picker/MonthPicker';\nimport { Weekdays } from '@hh.ru/magritte-ui-date-picker/Weekdays';\nimport { YearPicker } from '@hh.ru/magritte-ui-date-picker/YearPicker';\nimport { useDatePickerControls } from '@hh.ru/magritte-ui-date-picker/useDatePickerControls';\nimport { useModifierDates } from '@hh.ru/magritte-ui-date-picker/useModifierDates';\nimport { useDisplayDate } from '@hh.ru/magritte-ui-date-picker/utils';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\n\nimport styles from '../date-picker.less';\n\nexport const InfoDatePicker: FC<InfoDatePickerProps> = (props) => {\n    const {\n        // настройки функциональности\n        displayDate: _displayDate,\n        enabledCalendars,\n        // колбеки\n        onDisplayDateChange,\n        // настройки внешнего вида\n        activeHeader,\n        alignHeader,\n        headerMonthFormat,\n        locale,\n        showControls,\n        showDivider = true,\n        showHeader = true,\n        showHeaderDate,\n        showWeekdays = true,\n        fixedWeeks,\n        mobileScrollHorizontal,\n        paddingsHorizontalDesktop,\n        modifierDates,\n        modifierDatesFunc,\n        showAdjacentDays,\n        renderDay,\n    } = props;\n    const displayDate = useDisplayDate(_displayDate);\n    const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } =\n        useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);\n    const { isMobile } = useBreakpoint();\n\n    const modifierDatesMap = useModifierDates(modifierDates);\n\n    if (isMobile && mobileScrollHorizontal) {\n        return (\n            <MobileInfoDatePickerWithScroll {...props} displayDate={displayDate} modifierDatesMap={modifierDatesMap} />\n        );\n    }\n\n    return (\n        <div\n            className={styles.layout}\n            style={\n                {\n                    ...(!isMobile && typeof paddingsHorizontalDesktop !== 'undefined'\n                        ? { '--magritte-date-picker-padding-horizontal': `${paddingsHorizontalDesktop}px` }\n                        : {}),\n                } as CSSProperties\n            }\n        >\n            <AsyncDataStore modifierDatesFunc={modifierDatesFunc}>\n                <AsyncDataLoader>\n                    {showHeader && (\n                        <Header\n                            calendar={calendar}\n                            displayDate={displayDate}\n                            activeHeader={activeHeader}\n                            alignHeader={alignHeader}\n                            goToNextPeriod={goToNextPeriod}\n                            goToPrevPeriod={goToPrevPeriod}\n                            headerMonthFormat={headerMonthFormat}\n                            locale={locale}\n                            showControls={showControls}\n                            showHeaderDate={showHeaderDate}\n                            switchCalendar={switchCalendar}\n                        />\n                    )}\n                    {showWeekdays && calendar === 'day' && <Weekdays locale={locale} />}\n                    {showDivider && (showHeader || showWeekdays) && <Divider />}\n                    {calendar === 'day' && (\n                        <InfoDayPicker\n                            displayDate={displayDate}\n                            fixedWeeks={fixedWeeks}\n                            modifierDatesMap={modifierDatesMap}\n                            renderDay={renderDay}\n                            showAdjacentDays={showAdjacentDays}\n                        />\n                    )}\n                    {calendar === 'month' && (\n                        <MonthPicker locale={locale} displayDate={displayDate} onDateSelect={zoomIntoMonth} />\n                    )}\n                    {calendar === 'year' && <YearPicker displayDate={displayDate} onDateSelect={zoomIntoYear} />}\n                </AsyncDataLoader>\n            </AsyncDataStore>\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBa,MAAA,cAAc,GAA4B,CAAC,KAAK,KAAI;IAC7D,MAAM;;IAEF,WAAW,EAAE,YAAY,EACzB,gBAAgB;;IAEhB,mBAAmB;;AAEnB,IAAA,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,MAAM,EACN,YAAY,EACZ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,IAAI,EACjB,cAAc,EACd,YAAY,GAAG,IAAI,EACnB,UAAU,EACV,sBAAsB,EACtB,yBAAyB,EACzB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,SAAS,GACZ,GAAG,KAAK,CAAC;AACV,IAAA,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,GAC3F,qBAAqB,CAAC,gBAAgB,EAAE,WAAW,EAAE,mBAAmB,CAAC,CAAC;AAC9E,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;AAErC,IAAA,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;AAEzD,IAAA,IAAI,QAAQ,IAAI,sBAAsB,EAAE;AACpC,QAAA,QACIA,GAAA,CAAC,8BAA8B,EAAA,EAAA,GAAK,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAA,CAAI,EAC7G;KACL;IAED,QACIA,aACI,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,KAAK,EACD;AACI,YAAA,IAAI,CAAC,QAAQ,IAAI,OAAO,yBAAyB,KAAK,WAAW;AAC7D,kBAAE,EAAE,2CAA2C,EAAE,CAAG,EAAA,yBAAyB,IAAI,EAAE;kBACjF,EAAE;AACM,SAAA,EAAA,QAAA,EAGtBA,IAAC,cAAc,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAChD,QAAA,EAAAC,IAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EAAA,CACX,UAAU,KACPD,GAAC,CAAA,MAAM,IACH,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAAA,CAChC,CACL,EACA,YAAY,IAAI,QAAQ,KAAK,KAAK,IAAIA,GAAC,CAAA,QAAQ,IAAC,MAAM,EAAE,MAAM,EAAI,CAAA,EAClE,WAAW,KAAK,UAAU,IAAI,YAAY,CAAC,IAAIA,GAAC,CAAA,OAAO,KAAG,EAC1D,QAAQ,KAAK,KAAK,KACfA,GAAA,CAAC,aAAa,EAAA,EACV,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EACpC,CAAA,CACL,EACA,QAAQ,KAAK,OAAO,KACjBA,GAAC,CAAA,WAAW,EAAC,EAAA,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,GAAI,CACzF,EACA,QAAQ,KAAK,MAAM,IAAIA,GAAA,CAAC,UAAU,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAA,CAAI,IAC9E,EACL,CAAA,EAAA,CACf,EACR;AACN;;;;"}
+{"version":3,"file":"InfoDatePicker.js","sources":["../../src/InfoDatePicker/InfoDatePicker.tsx"],"sourcesContent":["import { CSSProperties, FC } from 'react';\nimport classnames from 'classnames';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { InfoDatePickerProps } from '@hh.ru/magritte-ui-date-picker';\nimport { AsyncDataLoader } from '@hh.ru/magritte-ui-date-picker/AsyncDataLoader';\nimport { AsyncDataStore } from '@hh.ru/magritte-ui-date-picker/AsyncDataStore';\nimport { Header } from '@hh.ru/magritte-ui-date-picker/Header';\nimport { InfoDayPicker } from '@hh.ru/magritte-ui-date-picker/InfoDatePicker/InfoDayPicker';\nimport { MobileInfoDatePickerWithScroll } from '@hh.ru/magritte-ui-date-picker/InfoDatePicker/MobileInfoDatePickerWithScroll';\nimport { MonthPicker } from '@hh.ru/magritte-ui-date-picker/MonthPicker';\nimport { Weekdays } from '@hh.ru/magritte-ui-date-picker/Weekdays';\nimport { YearPicker } from '@hh.ru/magritte-ui-date-picker/YearPicker';\nimport { useDatePickerControls } from '@hh.ru/magritte-ui-date-picker/useDatePickerControls';\nimport { useModifierDates } from '@hh.ru/magritte-ui-date-picker/useModifierDates';\nimport { useDisplayDate } from '@hh.ru/magritte-ui-date-picker/utils';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\n\nimport styles from '../date-picker.less';\n\nexport const InfoDatePicker: FC<InfoDatePickerProps> = (props) => {\n    const {\n        // настройки функциональности\n        displayDate: _displayDate,\n        enabledCalendars,\n        // колбеки\n        onDisplayDateChange,\n        // настройки внешнего вида\n        stretched,\n        activeHeader,\n        alignHeader,\n        headerMonthFormat,\n        locale,\n        showControls,\n        showDivider = true,\n        showHeader = true,\n        showHeaderDate,\n        showWeekdays = true,\n        fixedWeeks,\n        mobileScrollHorizontal,\n        paddingsHorizontalDesktop,\n        modifierDates,\n        modifierDatesFunc,\n        showAdjacentDays,\n        renderDay,\n    } = props;\n    const displayDate = useDisplayDate(_displayDate);\n    const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } =\n        useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);\n    const { isMobile } = useBreakpoint();\n\n    const modifierDatesMap = useModifierDates(modifierDates);\n\n    if (isMobile && mobileScrollHorizontal) {\n        return (\n            <MobileInfoDatePickerWithScroll {...props} displayDate={displayDate} modifierDatesMap={modifierDatesMap} />\n        );\n    }\n\n    return (\n        <div\n            className={classnames(styles.layout, { [styles.stretched]: stretched })}\n            style={\n                {\n                    ...(!isMobile && typeof paddingsHorizontalDesktop !== 'undefined'\n                        ? { '--magritte-date-picker-padding-horizontal': `${paddingsHorizontalDesktop}px` }\n                        : {}),\n                } as CSSProperties\n            }\n        >\n            <AsyncDataStore modifierDatesFunc={modifierDatesFunc}>\n                <AsyncDataLoader stretched={stretched}>\n                    {showHeader && (\n                        <Header\n                            calendar={calendar}\n                            displayDate={displayDate}\n                            stretched={stretched}\n                            activeHeader={activeHeader}\n                            alignHeader={alignHeader}\n                            goToNextPeriod={goToNextPeriod}\n                            goToPrevPeriod={goToPrevPeriod}\n                            headerMonthFormat={headerMonthFormat}\n                            locale={locale}\n                            showControls={showControls}\n                            showHeaderDate={showHeaderDate}\n                            switchCalendar={switchCalendar}\n                        />\n                    )}\n                    {showWeekdays && calendar === 'day' && <Weekdays locale={locale} stretched={stretched} />}\n                    {showDivider && (showHeader || showWeekdays) && <Divider />}\n                    {calendar === 'day' && (\n                        <InfoDayPicker\n                            displayDate={displayDate}\n                            fixedWeeks={fixedWeeks}\n                            stretched={stretched}\n                            modifierDatesMap={modifierDatesMap}\n                            renderDay={renderDay}\n                            showAdjacentDays={showAdjacentDays}\n                        />\n                    )}\n                    {calendar === 'month' && (\n                        <MonthPicker\n                            locale={locale}\n                            displayDate={displayDate}\n                            stretched={stretched}\n                            onDateSelect={zoomIntoMonth}\n                        />\n                    )}\n                    {calendar === 'year' && (\n                        <YearPicker displayDate={displayDate} stretched={stretched} onDateSelect={zoomIntoYear} />\n                    )}\n                </AsyncDataLoader>\n            </AsyncDataStore>\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/InfoDatePicker/InfoDayPicker.js

@@ -2,11 +2,11 @@ import './../index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, Fragment } from 'react';
 import classnames from 'classnames';
-import { format, isToday, isSameMonth } from 'date-fns';
+import { isToday, format, isSameMonth } from 'date-fns';
 import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
 import { useModifierDatesFunc } from '../useModifierDatesFunc.js';
 import { useDayPickerDates } from '../utils.js';
-import { s as styles } from '../date-picker-QiutPQnb.js';
+import { s as styles } from '../date-picker-Cb_rWJTY.js';
 import '../AsyncDataContext.js';
 import '../useModifierDates.js';
 import 'date-fns/constants';
@@ -22,6 +22,7 @@ const InfoDayDefault = forwardRef((props, ref) => {
                     [styles.textWorkday]: isWorkDay,
                     [styles.textDisabled]: isDisabled,
                     [styles.textActive]: isActive && !isDisabled,
+                    [styles.textToday]: isToday(date),
                 }), tabIndex: isFocusAvailable ? undefined : -1, disabled: isDisabled || !isActive, "data-date": format(date, 'yyyy-MM-dd'), "data-qa": classnames('date-picker-day', {
                     'date-picker-day-workday': isWorkDay,
                     'date-picker-day-short-workday': mode === 'shortWorkday',
@@ -31,7 +32,7 @@ const InfoDayDefault = forwardRef((props, ref) => {
 });
 InfoDayDefault.displayName = 'InfoDayDefault';
 const renderDayDefault = (props) => jsx(InfoDayDefault, { ...props });
-const InfoDayPicker = ({ displayDate, fixedWeeks, isFocusAvailable = true, modifierDatesMap, renderDay = renderDayDefault, showAdjacentDays, }) => {
+const InfoDayPicker = ({ displayDate, fixedWeeks, stretched, isFocusAvailable = true, modifierDatesMap, renderDay = renderDayDefault, showAdjacentDays, }) => {
     const dates = useDayPickerDates(displayDate, fixedWeeks);
     const forceDisabled = useDisabled();
     const { disabledDatesFunc, modeDateFunc, indicatorCountFunc, additionalFunc, handlersFunc } = useModifierDatesFunc({
@@ -39,7 +40,7 @@ const InfoDayPicker = ({ displayDate, fixedWeeks, isFocusAvailable = true, modif
         endDate: dates[dates.length - 1],
         modifierDatesMap,
     });
-    return (jsx("div", { className: classnames(styles.calendar, styles.calendarDays), "data-qa": "date-picker-days", children: dates.map((date) => {
+    return (jsx("div", { className: classnames(styles.calendar, styles.calendarDays, { [styles.stretched]: stretched }), "data-qa": "date-picker-days", children: dates.map((date) => {
             const isAdjacent = !isSameMonth(date, displayDate);
             const mode = modeDateFunc(date);
             const display = !isAdjacent || showAdjacentDays;

package/InfoDatePicker/InfoDayPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoDayPicker.js","sources":["../../src/InfoDatePicker/InfoDayPicker.tsx"],"sourcesContent":["import { FC, ForwardedRef, forwardRef, Fragment, ReactNode } from 'react';\nimport classnames from 'classnames';\nimport { format, isSameMonth, isToday } from 'date-fns';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { InfoDayPickerProps, InfoDayProps, InfoModifierItemMode } from '@hh.ru/magritte-ui-date-picker';\nimport { useModifierDatesFunc } from '@hh.ru/magritte-ui-date-picker/useModifierDatesFunc';\nimport { useDayPickerDates } from '@hh.ru/magritte-ui-date-picker/utils';\n\nimport styles from '../date-picker.less';\n\nexport const InfoDayDefault = forwardRef((props: InfoDayProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const {\n        date,\n        mode = 'working',\n        disabled,\n        indicatorCount,\n        isFocusAvailable,\n        isAdjacent,\n        children,\n        additional: _,\n        ...rest\n    } = props;\n    const isWorkDay = mode === 'working';\n    const isActive = !!props.onClick || !!props.onMouseEnter;\n    const isDisabled = disabled || isAdjacent;\n\n    return (\n        <Fragment>\n            <button\n                {...rest}\n                ref={ref}\n                type=\"button\"\n                className={classnames(styles.text, {\n                    [styles.textHoliday]: mode === 'holiday',\n                    [styles.textShortWorkday]: mode === 'shortWorkday',\n                    [styles.textWorkday]: isWorkDay,\n                    [styles.textDisabled]: isDisabled,\n                    [styles.textActive]: isActive && !isDisabled,\n                })}\n                tabIndex={isFocusAvailable ? undefined : -1}\n                disabled={isDisabled || !isActive}\n                data-date={format(date, 'yyyy-MM-dd')}\n                data-qa={classnames('date-picker-day', {\n                    'date-picker-day-workday': isWorkDay,\n                    'date-picker-day-short-workday': mode === 'shortWorkday',\n                    'date-picker-day-holyday': mode === 'holiday',\n                    'date-picker-day-today': isToday(date),\n                })}\n            >\n                {children}\n                {indicatorCount && (\n                    <div className={styles.indicatorContainer}>\n                        {[...Array(Math.min(indicatorCount, 3)).keys()].map((i) => (\n                            <div key={i} className={styles.indicator} />\n                        ))}\n                    </div>\n                )}\n            </button>\n            <div className={styles.substrate} />\n        </Fragment>\n    );\n});\n\nInfoDayDefault.displayName = 'InfoDayDefault';\n\nconst renderDayDefault = (props: InfoDayProps): ReactNode => <InfoDayDefault {...props} />;\n\nexport const InfoDayPicker: FC<InfoDayPickerProps> = ({\n    displayDate,\n    fixedWeeks,\n    isFocusAvailable = true,\n    modifierDatesMap,\n    renderDay = renderDayDefault,\n    showAdjacentDays,\n}) => {\n    const dates = useDayPickerDates(displayDate, fixedWeeks);\n    const forceDisabled = useDisabled();\n\n    const { disabledDatesFunc, modeDateFunc, indicatorCountFunc, additionalFunc, handlersFunc } = useModifierDatesFunc({\n        startDate: dates[0],\n        endDate: dates[dates.length - 1],\n        modifierDatesMap,\n    });\n\n    return (\n        <div className={classnames(styles.calendar, styles.calendarDays)} data-qa=\"date-picker-days\">\n            {dates.map((date) => {\n                const isAdjacent = !isSameMonth(date, displayDate);\n                const mode = modeDateFunc(date) as InfoModifierItemMode | undefined;\n                const display = !isAdjacent || showAdjacentDays;\n                const indicatorCount = indicatorCountFunc(date);\n\n                return (\n                    <div className={styles.item} key={`${date}`}>\n                        {display ? (\n                            renderDay({\n                                mode,\n                                date,\n                                disabled: forceDisabled || disabledDatesFunc(date),\n                                indicatorCount,\n                                isFocusAvailable,\n                                isAdjacent,\n                                additional: additionalFunc(date),\n                                children: format(date, 'd'),\n                                ...handlersFunc(date),\n                            })\n                        ) : (\n                            <div className={styles.textEmpty} />\n                        )}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"InfoDayPicker.js","sources":["../../src/InfoDatePicker/InfoDayPicker.tsx"],"sourcesContent":["import { FC, ForwardedRef, forwardRef, Fragment, ReactNode } from 'react';\nimport classnames from 'classnames';\nimport { format, isSameMonth, isToday } from 'date-fns';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { InfoDayPickerProps, InfoDayProps, InfoModifierItemMode } from '@hh.ru/magritte-ui-date-picker';\nimport { useModifierDatesFunc } from '@hh.ru/magritte-ui-date-picker/useModifierDatesFunc';\nimport { useDayPickerDates } from '@hh.ru/magritte-ui-date-picker/utils';\n\nimport styles from '../date-picker.less';\n\nexport const InfoDayDefault = forwardRef((props: InfoDayProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const {\n        date,\n        mode = 'working',\n        disabled,\n        indicatorCount,\n        isFocusAvailable,\n        isAdjacent,\n        children,\n        additional: _,\n        ...rest\n    } = props;\n    const isWorkDay = mode === 'working';\n    const isActive = !!props.onClick || !!props.onMouseEnter;\n    const isDisabled = disabled || isAdjacent;\n\n    return (\n        <Fragment>\n            <button\n                {...rest}\n                ref={ref}\n                type=\"button\"\n                className={classnames(styles.text, {\n                    [styles.textHoliday]: mode === 'holiday',\n                    [styles.textShortWorkday]: mode === 'shortWorkday',\n                    [styles.textWorkday]: isWorkDay,\n                    [styles.textDisabled]: isDisabled,\n                    [styles.textActive]: isActive && !isDisabled,\n                    [styles.textToday]: isToday(date),\n                })}\n                tabIndex={isFocusAvailable ? undefined : -1}\n                disabled={isDisabled || !isActive}\n                data-date={format(date, 'yyyy-MM-dd')}\n                data-qa={classnames('date-picker-day', {\n                    'date-picker-day-workday': isWorkDay,\n                    'date-picker-day-short-workday': mode === 'shortWorkday',\n                    'date-picker-day-holyday': mode === 'holiday',\n                    'date-picker-day-today': isToday(date),\n                })}\n            >\n                {children}\n                {indicatorCount && (\n                    <div className={styles.indicatorContainer}>\n                        {[...Array(Math.min(indicatorCount, 3)).keys()].map((i) => (\n                            <div key={i} className={styles.indicator} />\n                        ))}\n                    </div>\n                )}\n            </button>\n            <div className={styles.substrate} />\n        </Fragment>\n    );\n});\n\nInfoDayDefault.displayName = 'InfoDayDefault';\n\nconst renderDayDefault = (props: InfoDayProps): ReactNode => <InfoDayDefault {...props} />;\n\nexport const InfoDayPicker: FC<InfoDayPickerProps> = ({\n    displayDate,\n    fixedWeeks,\n    stretched,\n    isFocusAvailable = true,\n    modifierDatesMap,\n    renderDay = renderDayDefault,\n    showAdjacentDays,\n}) => {\n    const dates = useDayPickerDates(displayDate, fixedWeeks);\n    const forceDisabled = useDisabled();\n\n    const { disabledDatesFunc, modeDateFunc, indicatorCountFunc, additionalFunc, handlersFunc } = useModifierDatesFunc({\n        startDate: dates[0],\n        endDate: dates[dates.length - 1],\n        modifierDatesMap,\n    });\n\n    return (\n        <div\n            className={classnames(styles.calendar, styles.calendarDays, { [styles.stretched]: stretched })}\n            data-qa=\"date-picker-days\"\n        >\n            {dates.map((date) => {\n                const isAdjacent = !isSameMonth(date, displayDate);\n                const mode = modeDateFunc(date) as InfoModifierItemMode | undefined;\n                const display = !isAdjacent || showAdjacentDays;\n                const indicatorCount = indicatorCountFunc(date);\n\n                return (\n                    <div className={styles.item} key={`${date}`}>\n                        {display ? (\n                            renderDay({\n                                mode,\n                                date,\n                                disabled: forceDisabled || disabledDatesFunc(date),\n                                indicatorCount,\n                                isFocusAvailable,\n                                isAdjacent,\n                                additional: additionalFunc(date),\n                                children: format(date, 'd'),\n                                ...handlersFunc(date),\n                            })\n                        ) : (\n                            <div className={styles.textEmpty} />\n                        )}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/InfoDatePicker/MobileInfoDatePickerWithScroll.js

@@ -13,7 +13,7 @@ import { YearPicker } from '../YearPicker.js';
 import { useDatePickerControls } from '../useDatePickerControls.js';
 import { useMobileHorizontalScroll } from '../useMobileHorizontalScroll.js';
 import { Divider } from '@hh.ru/magritte-ui-divider';
-import { s as styles } from '../date-picker-QiutPQnb.js';
+import { s as styles } from '../date-picker-Cb_rWJTY.js';
 import 'classnames';
 import '../AsyncDataContext.js';
 import '@hh.ru/magritte-ui-loader';

package/InfoDatePicker/UncontrolledInfoDatePicker.js

@@ -5,12 +5,12 @@ import { useDisplayDate } from '../utils.js';
 import { InfoDatePicker } from './InfoDatePicker.js';
 import 'date-fns';
 import 'date-fns/constants';
+import 'classnames';
 import '@hh.ru/magritte-ui-breakpoint';
 import '../AsyncDataLoader.js';
-import 'classnames';
 import '../AsyncDataContext.js';
 import '@hh.ru/magritte-ui-loader';
-import '../date-picker-QiutPQnb.js';
+import '../date-picker-Cb_rWJTY.js';
 import '../AsyncDataStore.js';
 import '../useModifierDates.js';
 import '../Header.js';

package/IntervalDatePicker/DesktopMultiLayoutIntervalDatePicker.js

@@ -1,6 +1,7 @@
 import './../index.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useMemo, useState } from 'react';
+import classnames from 'classnames';
 import { add } from 'date-fns';
 import { AsyncDataLoader } from '../AsyncDataLoader.js';
 import { AsyncDataStore } from '../AsyncDataStore.js';
@@ -12,8 +13,7 @@ import { useDatePickerControls } from '../useDatePickerControls.js';
 import { useModifierDates } from '../useModifierDates.js';
 import { useDisplayDate } from '../utils.js';
 import { Divider } from '@hh.ru/magritte-ui-divider';
-import { s as styles } from '../date-picker-QiutPQnb.js';
-import 'classnames';
+import { s as styles } from '../date-picker-Cb_rWJTY.js';
 import '../AsyncDataContext.js';
 import '@hh.ru/magritte-ui-loader';
 import '@hh.ru/magritte-common-use-disabled';
@@ -32,18 +32,18 @@ displayDate, enabledCalendars, selectionStart, selectionEnd, minDate, maxDate,
 // колбеки
 onDisplayDateChange, onStartSelect, onEndSelect, 
 // настройки внешнего вида
-headerMonthFormat, locale, showControls, showDivider = true, showHeader = true, showHeaderDate, showWeekdays = true, fixedWeeks, paddingsHorizontalDesktop, modifierDates, modifierDatesFunc, renderDay, }, ref) => {
+stretched, headerMonthFormat, locale, showControls, showDivider = true, showHeader = true, showHeaderDate, showWeekdays = true, fixedWeeks, paddingsHorizontalDesktop, modifierDates, modifierDatesFunc, renderDay, }, ref) => {
     const leftDisplayDate = useDisplayDate(displayDate, selectionStart);
     const rightDisplayDate = useMemo(() => add(leftDisplayDate, { months: 1 }), [leftDisplayDate]);
     const [hoveredDate, setHoveredDate] = useState(null);
     const [dragState, setDragState] = useState(null);
     const { goToNextPeriod, goToPrevPeriod } = useDatePickerControls(enabledCalendars, leftDisplayDate, onDisplayDateChange);
     const modifierDatesMap = useModifierDates(modifierDates);
-    return (jsx("div", { className: styles.layoutHorizontal, ref: ref, style: {
+    return (jsx("div", { className: classnames(styles.layoutHorizontal, { [styles.stretched]: stretched }), ref: ref, style: {
             ...(typeof paddingsHorizontalDesktop !== 'undefined'
                 ? { '--magritte-date-picker-padding-horizontal': `${paddingsHorizontalDesktop}px` }
                 : {}),
-        }, children: jsxs(AsyncDataStore, { modifierDatesFunc: modifierDatesFunc, children: [jsxs(AsyncDataLoader, { children: [showHeader && (jsx(Header, { calendar: "day", displayDate: leftDisplayDate, activeHeader: false, alignHeader: "center", goToPrevPeriod: goToPrevPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, showNextControl: false })), showWeekdays && jsx(Weekdays, { locale: locale }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), jsx(IntervalDayPicker, { displayDate: leftDisplayDate, selectionStart: selectionStart, selectionEnd: selectionEnd, hoveredDate: hoveredDate, dragState: dragState, onStartSelect: onStartSelect, onEndSelect: onEndSelect, onDateHover: setHoveredDate, onDateDrag: setDragState, showAdjacentDays: false, minDate: minDate, maxDate: maxDate, fixedWeeks: fixedWeeks, modifierDatesMap: modifierDatesMap, renderDay: renderDay })] }), jsxs(AsyncDataLoader, { children: [showHeader && (jsx(Header, { calendar: "day", displayDate: rightDisplayDate, activeHeader: false, alignHeader: "center", goToNextPeriod: goToNextPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, showPrevControl: false })), showWeekdays && jsx(Weekdays, { locale: locale }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), jsx(IntervalDayPicker, { displayDate: rightDisplayDate, selectionStart: selectionStart, selectionEnd: selectionEnd, hoveredDate: hoveredDate, dragState: dragState, onStartSelect: onStartSelect, onEndSelect: onEndSelect, onDateHover: setHoveredDate, onDateDrag: setDragState, showAdjacentDays: false, minDate: minDate, maxDate: maxDate, modifierDatesMap: modifierDatesMap, renderDay: renderDay })] })] }) }));
+        }, children: jsxs(AsyncDataStore, { modifierDatesFunc: modifierDatesFunc, children: [jsxs(AsyncDataLoader, { stretched: stretched, children: [showHeader && (jsx(Header, { calendar: "day", displayDate: leftDisplayDate, stretched: stretched, activeHeader: false, alignHeader: "center", goToPrevPeriod: goToPrevPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, showNextControl: false })), showWeekdays && jsx(Weekdays, { locale: locale, stretched: stretched }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), jsx(IntervalDayPicker, { displayDate: leftDisplayDate, stretched: stretched, selectionStart: selectionStart, selectionEnd: selectionEnd, hoveredDate: hoveredDate, dragState: dragState, onStartSelect: onStartSelect, onEndSelect: onEndSelect, onDateHover: setHoveredDate, onDateDrag: setDragState, showAdjacentDays: false, minDate: minDate, maxDate: maxDate, fixedWeeks: fixedWeeks, modifierDatesMap: modifierDatesMap, renderDay: renderDay })] }), jsxs(AsyncDataLoader, { stretched: stretched, children: [showHeader && (jsx(Header, { calendar: "day", displayDate: rightDisplayDate, stretched: stretched, activeHeader: false, alignHeader: "center", goToNextPeriod: goToNextPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, showPrevControl: false })), showWeekdays && jsx(Weekdays, { locale: locale, stretched: stretched }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), jsx(IntervalDayPicker, { displayDate: rightDisplayDate, stretched: stretched, selectionStart: selectionStart, selectionEnd: selectionEnd, hoveredDate: hoveredDate, dragState: dragState, onStartSelect: onStartSelect, onEndSelect: onEndSelect, onDateHover: setHoveredDate, onDateDrag: setDragState, showAdjacentDays: false, minDate: minDate, maxDate: maxDate, modifierDatesMap: modifierDatesMap, renderDay: renderDay })] })] }) }));
 });
 DesktopMultiLayoutIntervalDatePickerRenderFunc.displayName = 'DesktopMultiLayoutIntervalDatePickerRenderFunc';
 const DesktopMultiLayoutIntervalDatePicker = WithArrowNavigationHOC(DesktopMultiLayoutIntervalDatePickerRenderFunc);