@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3cc4f2ce5f

package/components/DatePicker/MobilePicker/MobilePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useLayoutEffect","useRef","useState","Calendar","getMonthInHumanFormat","getTodayDate","ThemeContext","MobilePopup","DateInput","Button","useLocaleForControl","useEffectWithoutInitCall","DatePickerLocaleHelper","styles","getMobilePickerTheme","MobilePickerDataTids","input","today","MobilePicker","props","locale","theme","onValueChange","date","onCloseRequest","inputRef","current","focus","calendarRef","_useState","_useState$","monthNative","month","year","onTodayClick","scrollToMonth","value","substring","createElement","Provider","opened","headerChildComponent","width","withIcon","ref","minDate","maxDate","size","warning","error","footerChildComponent","enableTodayLink","onClick","className","calendarRoot","isHoliday","renderDay","onMonthChange"],"sources":["MobilePicker.tsx"],"sourcesContent":["import React, { useContext, useLayoutEffect, useRef, useState } from 'react';\n\nimport { Calendar } from '../Calendar';\nimport { getMonthInHumanFormat, getTodayDate } from '../Calendar/CalendarUtils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { MobilePopup } from '../../internal/MobilePopup';\nimport { DateInput } from '../DateInput';\nimport { Button } from '../Button';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { useEffectWithoutInitCall } from '../../hooks/useEffectWithoutInitCall';\n\nimport { DatePickerProps } from './DatePicker';\nimport { DatePickerLocaleHelper } from './locale';\nimport { styles } from './MobilePicker.styles';\nimport { getMobilePickerTheme } from './getMobilePickerTheme';\n\nexport const MobilePickerDataTids = {\n  input: 'MobilePicker__input',\n  today: 'MobilePicker__today',\n} as const;\n\nexport interface MobilePickerProps\n  extends Pick<\n    DatePickerProps,\n    | 'error'\n    | 'warning'\n    | 'value'\n    | 'minDate'\n    | 'maxDate'\n    | 'onValueChange'\n    | 'isHoliday'\n    | 'enableTodayLink'\n    | 'renderDay'\n    | 'onMonthChange'\n  > {\n  onCloseRequest?: () => void;\n}\n\nexport const MobilePicker: React.FC<MobilePickerProps> = (props) => {\n  const locale = useLocaleForControl('DatePicker', DatePickerLocaleHelper);\n\n  const theme = getMobilePickerTheme(useContext(ThemeContext));\n\n  const onValueChange = (date: string) => {\n    if (props.onValueChange) {\n      props.onValueChange(date);\n    }\n    if (props.onCloseRequest) {\n      props.onCloseRequest();\n    }\n  };\n\n  const inputRef = useRef<DateInput>(null);\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, []);\n\n  const calendarRef = useRef<Calendar>(null);\n  const [{ month: monthNative, year }] = useState(() => getTodayDate());\n  const month = getMonthInHumanFormat(monthNative);\n\n  const onTodayClick = () => {\n    if (calendarRef.current) {\n      calendarRef.current.scrollToMonth(month, year);\n    }\n  };\n\n  useEffectWithoutInitCall(() => {\n    if (props.value && calendarRef.current) {\n      const month = getMonthInHumanFormat(+props.value.substring(3, 5));\n      const year = +props.value.substring(6);\n      calendarRef.current.scrollToMonth(month, year);\n    }\n  }, [props.value]);\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <MobilePopup\n        opened\n        headerChildComponent={\n          <DateInput\n            value={props.value || ''}\n            width=\"100%\"\n            withIcon\n            ref={inputRef}\n            minDate={props.minDate}\n            maxDate={props.maxDate}\n            onValueChange={props.onValueChange}\n            size=\"medium\"\n            warning={props.warning}\n            error={props.error}\n            data-tid={MobilePickerDataTids.input}\n          />\n        }\n        footerChildComponent={\n          props.enableTodayLink && (\n            <Button size=\"medium\" onClick={onTodayClick} data-tid={MobilePickerDataTids.today}>\n              {locale.today}\n            </Button>\n          )\n        }\n        onCloseRequest={props.onCloseRequest}\n      >\n        <Calendar\n          ref={calendarRef}\n          value={props.value}\n          className={styles.calendarRoot()}\n          minDate={props.minDate}\n          maxDate={props.maxDate}\n          onValueChange={onValueChange}\n          isHoliday={props.isHoliday}\n          renderDay={props.renderDay}\n          onMonthChange={props.onMonthChange}\n        />\n      </MobilePopup>\n    </ThemeContext.Provider>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useContext","useLayoutEffect","useRef","useState","Calendar","getMonthInHumanFormat","getTodayDate","ThemeContext","MobilePopup","DateInput","Button","useLocaleForControl","DatePickerLocaleHelper","styles","getMobilePickerTheme","MobilePickerDataTids","input","today","MobilePicker","props","locale","theme","calendarRef","inputRef","_useState","_useState$","monthNative","month","year","onValueChange","date","onCloseRequest","setTimeout","_inputRef$current","current","focus","onTodayClick","scrollToMonth","createElement","Provider","value","opened","headerChildComponent","width","withIcon","ref","minDate","maxDate","size","warning","error","footerChildComponent","enableTodayLink","onClick","className","calendarRoot","isHoliday","renderDay","onMonthChange"],"sources":["MobilePicker.tsx"],"sourcesContent":["import React, { useContext, useLayoutEffect, useRef, useState } from 'react';\n\nimport { Calendar } from '../Calendar';\nimport { getMonthInHumanFormat, getTodayDate } from '../Calendar/CalendarUtils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { MobilePopup } from '../../internal/MobilePopup';\nimport { DateInput } from '../DateInput';\nimport { Button } from '../Button';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\n\nimport type { DatePickerProps } from './DatePicker';\nimport { DatePickerLocaleHelper } from './locale';\nimport { styles } from './MobilePicker.styles';\nimport { getMobilePickerTheme } from './getMobilePickerTheme';\n\nexport const MobilePickerDataTids = {\n  input: 'MobilePicker__input',\n  today: 'MobilePicker__today',\n} as const;\n\nexport interface MobilePickerProps\n  extends Pick<\n    DatePickerProps,\n    | 'error'\n    | 'warning'\n    | 'value'\n    | 'minDate'\n    | 'maxDate'\n    | 'onValueChange'\n    | 'isHoliday'\n    | 'enableTodayLink'\n    | 'renderDay'\n    | 'onMonthChange'\n  > {\n  onCloseRequest?: () => void;\n}\n\nexport const MobilePicker: React.FC<MobilePickerProps> = (props) => {\n  const locale = useLocaleForControl('DatePicker', DatePickerLocaleHelper);\n  const theme = getMobilePickerTheme(useContext(ThemeContext));\n\n  const calendarRef = useRef<Calendar>(null);\n  const inputRef = useRef<DateInput>(null);\n\n  const [{ month: monthNative, year }] = useState(() => getTodayDate());\n  const month = getMonthInHumanFormat(monthNative);\n\n  const onValueChange = (date: string) => {\n    props.onValueChange?.(date);\n    props.onCloseRequest?.();\n  };\n\n  useLayoutEffect(() => {\n    // fix DateInput flushSync warning in React 18\n    setTimeout(() => {\n      inputRef.current?.focus();\n    });\n  }, []);\n\n  const onTodayClick = () => {\n    if (calendarRef.current) {\n      calendarRef.current.scrollToMonth(month, year);\n    }\n  };\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <MobilePopup\n        opened\n        headerChildComponent={\n          <DateInput\n            value={props.value || ''}\n            width=\"100%\"\n            withIcon\n            ref={inputRef}\n            minDate={props.minDate}\n            maxDate={props.maxDate}\n            onValueChange={props.onValueChange}\n            size=\"medium\"\n            warning={props.warning}\n            error={props.error}\n            data-tid={MobilePickerDataTids.input}\n          />\n        }\n        footerChildComponent={\n          props.enableTodayLink && (\n            <Button size=\"medium\" onClick={onTodayClick} data-tid={MobilePickerDataTids.today}>\n              {locale.today}\n            </Button>\n          )\n        }\n        onCloseRequest={props.onCloseRequest}\n      >\n        <Calendar\n          ref={calendarRef}\n          value={props.value}\n          className={styles.calendarRoot()}\n          minDate={props.minDate}\n          maxDate={props.maxDate}\n          onValueChange={onValueChange}\n          isHoliday={props.isHoliday}\n          renderDay={props.renderDay}\n          onMonthChange={props.onMonthChange}\n        />\n      </MobilePopup>\n    </ThemeContext.Provider>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/DatePicker/MobilePicker.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import { DatePickerProps } from './DatePicker';
-export declare const MobilePickerDataTids: {
-    readonly input: "MobilePicker__input";
-    readonly today: "MobilePicker__today";
-};
-export interface MobilePickerProps extends Pick<DatePickerProps, 'error' | 'warning' | 'value' | 'minDate' | 'maxDate' | 'onValueChange' | 'isHoliday' | 'enableTodayLink' | 'renderDay' | 'onMonthChange'> {
-    onCloseRequest?: () => void;
-}
-export declare const MobilePicker: React.FC<MobilePickerProps>;
+import React from 'react';
+import type { DatePickerProps } from './DatePicker';
+export declare const MobilePickerDataTids: {
+    readonly input: "MobilePicker__input";
+    readonly today: "MobilePicker__today";
+};
+export interface MobilePickerProps extends Pick<DatePickerProps, 'error' | 'warning' | 'value' | 'minDate' | 'maxDate' | 'onValueChange' | 'isHoliday' | 'enableTodayLink' | 'renderDay' | 'onMonthChange'> {
+    onCloseRequest?: () => void;
+}
+export declare const MobilePicker: React.FC<MobilePickerProps>;

package/components/DatePicker/MobilePicker.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const styles: {
-    calendarRoot(): string;
-};
+export declare const styles: {
+    calendarRoot(): string;
+};

package/components/DatePicker/getMobilePickerTheme/getMobilePickerTheme.js.map

@@ -1 +1 @@
-{"version":3,"names":["ThemeFactory","getMobilePickerTheme","theme","create","calendarPaddingX","mobileCalendarPaddingX","calendarCellWidth","mobileCalendarCellWidth","calendarCellHeight","mobileCalendarCellHeight","calendarCellBorderRadius","mobileCalendarCellBorderRadius","calendarCellFontSize","mobileCalendarCellFontSize","calendarGridRowSpacing","mobileCalendarGridRowSpacing","dateSelectFontSize","mobileDateSelectFontSize","dateSelectLineHeight","mobileDateSelectLineHeight","calendarWrapperHeight","mobileCalendarWrapperHeight"],"sources":["getMobilePickerTheme.ts"],"sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getMobilePickerTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      calendarPaddingX: theme.mobileCalendarPaddingX,\n      calendarCellWidth: theme.mobileCalendarCellWidth,\n      calendarCellHeight: theme.mobileCalendarCellHeight,\n      calendarCellBorderRadius: theme.mobileCalendarCellBorderRadius,\n      calendarCellFontSize: theme.mobileCalendarCellFontSize,\n      calendarGridRowSpacing: theme.mobileCalendarGridRowSpacing,\n      dateSelectFontSize: theme.mobileDateSelectFontSize,\n      dateSelectLineHeight: theme.mobileDateSelectLineHeight,\n      calendarWrapperHeight: theme.mobileCalendarWrapperHeight,\n    },\n    theme,\n  );\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gCAAgC;;;AAG7D,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,KAAY,EAAY;EAC3D,OAAOF,YAAY,CAACG,MAAM;IACxB;MACEC,gBAAgB,EAAEF,KAAK,CAACG,sBAAsB;MAC9CC,iBAAiB,EAAEJ,KAAK,CAACK,uBAAuB;MAChDC,kBAAkB,EAAEN,KAAK,CAACO,wBAAwB;MAClDC,wBAAwB,EAAER,KAAK,CAACS,8BAA8B;MAC9DC,oBAAoB,EAAEV,KAAK,CAACW,0BAA0B;MACtDC,sBAAsB,EAAEZ,KAAK,CAACa,4BAA4B;MAC1DC,kBAAkB,EAAEd,KAAK,CAACe,wBAAwB;MAClDC,oBAAoB,EAAEhB,KAAK,CAACiB,0BAA0B;MACtDC,qBAAqB,EAAElB,KAAK,CAACmB;IAC/B,CAAC;IACDnB;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["ThemeFactory","getMobilePickerTheme","theme","create","calendarPaddingX","mobileCalendarPaddingX","calendarCellWidth","mobileCalendarCellWidth","calendarCellHeight","mobileCalendarCellHeight","calendarCellBorderRadius","mobileCalendarCellBorderRadius","calendarCellFontSize","mobileCalendarCellFontSize","calendarGridRowSpacing","mobileCalendarGridRowSpacing","dateSelectFontSize","mobileDateSelectFontSize","dateSelectLineHeight","mobileDateSelectLineHeight","calendarWrapperHeight","mobileCalendarWrapperHeight"],"sources":["getMobilePickerTheme.ts"],"sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const getMobilePickerTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      calendarPaddingX: theme.mobileCalendarPaddingX,\n      calendarCellWidth: theme.mobileCalendarCellWidth,\n      calendarCellHeight: theme.mobileCalendarCellHeight,\n      calendarCellBorderRadius: theme.mobileCalendarCellBorderRadius,\n      calendarCellFontSize: theme.mobileCalendarCellFontSize,\n      calendarGridRowSpacing: theme.mobileCalendarGridRowSpacing,\n      dateSelectFontSize: theme.mobileDateSelectFontSize,\n      dateSelectLineHeight: theme.mobileDateSelectLineHeight,\n      calendarWrapperHeight: theme.mobileCalendarWrapperHeight,\n    },\n    theme,\n  );\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gCAAgC;;;AAG7D,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,KAAY,EAAY;EAC3D,OAAOF,YAAY,CAACG,MAAM;IACxB;MACEC,gBAAgB,EAAEF,KAAK,CAACG,sBAAsB;MAC9CC,iBAAiB,EAAEJ,KAAK,CAACK,uBAAuB;MAChDC,kBAAkB,EAAEN,KAAK,CAACO,wBAAwB;MAClDC,wBAAwB,EAAER,KAAK,CAACS,8BAA8B;MAC9DC,oBAAoB,EAAEV,KAAK,CAACW,0BAA0B;MACtDC,sBAAsB,EAAEZ,KAAK,CAACa,4BAA4B;MAC1DC,kBAAkB,EAAEd,KAAK,CAACe,wBAAwB;MAClDC,oBAAoB,EAAEhB,KAAK,CAACiB,0BAA0B;MACtDC,qBAAqB,EAAElB,KAAK,CAACmB;IAC/B,CAAC;IACDnB;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/components/DatePicker/getMobilePickerTheme.d.ts

@@ -1,2 +1,2 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const getMobilePickerTheme: (theme: Theme) => Theme;
+import type { Theme } from '../../lib/theming/Theme';
+export declare const getMobilePickerTheme: (theme: Theme) => Theme;

package/components/DatePicker/index.d.ts

@@ -1 +1 @@
-export * from './DatePicker';
+export * from './DatePicker';

package/components/DatePicker/locale/index/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","DatePickerLocaleHelper"],"sources":["index.ts"],"sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { DatePickerLocale } from './types';\n\nexport * from './types';\n\nexport const DatePickerLocaleHelper = new LocaleHelper<DatePickerLocale>({\n  ru_RU,\n  en_GB,\n});\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,kCAAkC;;AAE/D,SAASC,iBAAiB,IAAIC,KAAK,QAAQ,cAAc;AACzD,SAASD,iBAAiB,IAAIE,KAAK,QAAQ,cAAc;;;AAGzD,cAAc,SAAS;;AAEvB,OAAO,IAAMC,sBAAsB,GAAG,IAAIJ,YAAY,CAAmB;EACvEG,KAAK,EAALA,KAAK;EACLD,KAAK,EAALA;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","DatePickerLocaleHelper"],"sources":["index.ts"],"sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport type { DatePickerLocale } from './types';\n\nexport * from './types';\n\nexport const DatePickerLocaleHelper = new LocaleHelper<DatePickerLocale>({\n  ru_RU,\n  en_GB,\n});\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,kCAAkC;;AAE/D,SAASC,iBAAiB,IAAIC,KAAK,QAAQ,cAAc;AACzD,SAASD,iBAAiB,IAAIE,KAAK,QAAQ,cAAc;;;AAGzD,cAAc,SAAS;;AAEvB,OAAO,IAAMC,sBAAsB,GAAG,IAAIJ,YAAY,CAAmB;EACvEG,KAAK,EAALA,KAAK;EACLD,KAAK,EAALA;AACF,CAAC,CAAC","ignoreList":[]}

package/components/DatePicker/locale/index.d.ts

@@ -1,4 +1,4 @@
-import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
-import { DatePickerLocale } from './types';
-export * from './types';
-export declare const DatePickerLocaleHelper: LocaleHelper<DatePickerLocale>;
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import type { DatePickerLocale } from './types';
+export * from './types';
+export declare const DatePickerLocaleHelper: LocaleHelper<DatePickerLocale>;

package/components/DatePicker/locale/locales/en/en.js.map

@@ -1 +1 @@
-{"version":3,"names":["internalDateLocale","LangCodes","componentsLocales","CalendarLocales","DateSelectLocales","_extends","today","todayAriaLabel","en_GB"],"sources":["en.ts"],"sourcesContent":["import { internalDateLocale } from '../../../../lib/date/localeSets';\nimport { LangCodes } from '../../../../lib/locale';\nimport { DatePickerLocale } from '../types';\nimport { componentsLocales as CalendarLocales } from '../../../Calendar/locale/locales/en';\nimport { componentsLocales as DateSelectLocales } from '../../../../internal/DateSelect/locale/locales/en';\n\nexport const componentsLocales: DatePickerLocale = {\n  today: 'Today',\n  todayAriaLabel: \"Go to today's date\",\n  ...CalendarLocales,\n  ...DateSelectLocales,\n  ...internalDateLocale[LangCodes.en_GB],\n};\n"],"mappings":"0DAAA,SAASA,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,SAAS,QAAQ,wBAAwB;;AAElD,SAASC,iBAAiB,IAAIC,eAAe,QAAQ,qCAAqC;AAC1F,SAASD,iBAAiB,IAAIE,iBAAiB,QAAQ,mDAAmD;;AAE1G,OAAO,IAAMF,iBAAmC,GAAAG,QAAA;EAC9CC,KAAK,EAAE,OAAO;EACdC,cAAc,EAAE,oBAAoB;AACjCJ,eAAe;AACfC,iBAAiB;AACjBJ,kBAAkB,CAACC,SAAS,CAACO,KAAK,CAAC,CACvC","ignoreList":[]}
+{"version":3,"names":["internalDateLocale","LangCodes","componentsLocales","CalendarLocales","DateSelectLocales","_extends","today","todayAriaLabel","en_GB"],"sources":["en.ts"],"sourcesContent":["import { internalDateLocale } from '../../../../lib/date/localeSets';\nimport { LangCodes } from '../../../../lib/locale';\nimport type { DatePickerLocale } from '../types';\nimport { componentsLocales as CalendarLocales } from '../../../Calendar/locale/locales/en';\nimport { componentsLocales as DateSelectLocales } from '../../../../internal/DateSelect/locale/locales/en';\n\nexport const componentsLocales: DatePickerLocale = {\n  today: 'Today',\n  todayAriaLabel: \"Go to today's date\",\n  ...CalendarLocales,\n  ...DateSelectLocales,\n  ...internalDateLocale[LangCodes.en_GB],\n};\n"],"mappings":"0DAAA,SAASA,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,SAAS,QAAQ,wBAAwB;;AAElD,SAASC,iBAAiB,IAAIC,eAAe,QAAQ,qCAAqC;AAC1F,SAASD,iBAAiB,IAAIE,iBAAiB,QAAQ,mDAAmD;;AAE1G,OAAO,IAAMF,iBAAmC,GAAAG,QAAA;EAC9CC,KAAK,EAAE,OAAO;EACdC,cAAc,EAAE,oBAAoB;AACjCJ,eAAe;AACfC,iBAAiB;AACjBJ,kBAAkB,CAACC,SAAS,CAACO,KAAK,CAAC,CACvC","ignoreList":[]}

package/components/DatePicker/locale/locales/en.d.ts

@@ -1,2 +1,2 @@
-import { DatePickerLocale } from '../types';
-export declare const componentsLocales: DatePickerLocale;
+import type { DatePickerLocale } from '../types';
+export declare const componentsLocales: DatePickerLocale;

package/components/DatePicker/locale/locales/ru/ru.js.map

@@ -1 +1 @@
-{"version":3,"names":["internalDateLocale","LangCodes","componentsLocales","CalendarLocales","DateSelectLocales","_extends","today","todayAriaLabel","ru_RU"],"sources":["ru.ts"],"sourcesContent":["import { internalDateLocale } from '../../../../lib/date/localeSets';\nimport { LangCodes } from '../../../../lib/locale';\nimport { DatePickerLocale } from '../types';\nimport { componentsLocales as CalendarLocales } from '../../../Calendar/locale/locales/ru';\nimport { componentsLocales as DateSelectLocales } from '../../../../internal/DateSelect/locale/locales/ru';\n\nexport const componentsLocales: DatePickerLocale = {\n  today: 'Сегодня',\n  todayAriaLabel: 'Перейти к сегодняшней дате',\n  ...CalendarLocales,\n  ...DateSelectLocales,\n  ...internalDateLocale[LangCodes.ru_RU],\n};\n"],"mappings":"0DAAA,SAASA,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,SAAS,QAAQ,wBAAwB;;AAElD,SAASC,iBAAiB,IAAIC,eAAe,QAAQ,qCAAqC;AAC1F,SAASD,iBAAiB,IAAIE,iBAAiB,QAAQ,mDAAmD;;AAE1G,OAAO,IAAMF,iBAAmC,GAAAG,QAAA;EAC9CC,KAAK,EAAE,SAAS;EAChBC,cAAc,EAAE,4BAA4B;AACzCJ,eAAe;AACfC,iBAAiB;AACjBJ,kBAAkB,CAACC,SAAS,CAACO,KAAK,CAAC,CACvC","ignoreList":[]}
+{"version":3,"names":["internalDateLocale","LangCodes","componentsLocales","CalendarLocales","DateSelectLocales","_extends","today","todayAriaLabel","ru_RU"],"sources":["ru.ts"],"sourcesContent":["import { internalDateLocale } from '../../../../lib/date/localeSets';\nimport { LangCodes } from '../../../../lib/locale';\nimport type { DatePickerLocale } from '../types';\nimport { componentsLocales as CalendarLocales } from '../../../Calendar/locale/locales/ru';\nimport { componentsLocales as DateSelectLocales } from '../../../../internal/DateSelect/locale/locales/ru';\n\nexport const componentsLocales: DatePickerLocale = {\n  today: 'Сегодня',\n  todayAriaLabel: 'Перейти к сегодняшней дате',\n  ...CalendarLocales,\n  ...DateSelectLocales,\n  ...internalDateLocale[LangCodes.ru_RU],\n};\n"],"mappings":"0DAAA,SAASA,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,SAAS,QAAQ,wBAAwB;;AAElD,SAASC,iBAAiB,IAAIC,eAAe,QAAQ,qCAAqC;AAC1F,SAASD,iBAAiB,IAAIE,iBAAiB,QAAQ,mDAAmD;;AAE1G,OAAO,IAAMF,iBAAmC,GAAAG,QAAA;EAC9CC,KAAK,EAAE,SAAS;EAChBC,cAAc,EAAE,4BAA4B;AACzCJ,eAAe;AACfC,iBAAiB;AACjBJ,kBAAkB,CAACC,SAAS,CAACO,KAAK,CAAC,CACvC","ignoreList":[]}

package/components/DatePicker/locale/locales/ru.d.ts

@@ -1,2 +1,2 @@
-import { DatePickerLocale } from '../types';
-export declare const componentsLocales: DatePickerLocale;
+import type { DatePickerLocale } from '../types';
+export declare const componentsLocales: DatePickerLocale;

package/components/DatePicker/locale/types/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import { DateSelectLocale } from '../../../internal/DateSelect/locale';\nimport { InternalDateLocaleSet } from '../../../lib/date/types';\nimport { CalendarLocale } from '../../Calendar/locale/types';\n\nexport interface DatePickerLocale extends DateSelectLocale, CalendarLocale, InternalDateLocaleSet {\n  today: string;\n  todayAriaLabel: string;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { DateSelectLocale } from '../../../internal/DateSelect/locale';\nimport type { InternalDateLocaleSet } from '../../../lib/date/types';\nimport type { CalendarLocale } from '../../Calendar/locale/types';\n\nexport interface DatePickerLocale extends DateSelectLocale, CalendarLocale, InternalDateLocaleSet {\n  today: string;\n  todayAriaLabel: string;\n}\n"],"mappings":"","ignoreList":[]}

package/components/DatePicker/locale/types.d.ts

@@ -1,7 +1,7 @@
-import { DateSelectLocale } from '../../../internal/DateSelect/locale';
-import { InternalDateLocaleSet } from '../../../lib/date/types';
-import { CalendarLocale } from '../../Calendar/locale/types';
-export interface DatePickerLocale extends DateSelectLocale, CalendarLocale, InternalDateLocaleSet {
-    today: string;
-    todayAriaLabel: string;
-}
+import type { DateSelectLocale } from '../../../internal/DateSelect/locale';
+import type { InternalDateLocaleSet } from '../../../lib/date/types';
+import type { CalendarLocale } from '../../Calendar/locale/types';
+export interface DatePickerLocale extends DateSelectLocale, CalendarLocale, InternalDateLocaleSet {
+    today: string;
+    todayAriaLabel: string;
+}

package/components/DateRangePicker/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,454 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+var _templateObject, _templateObject2;
+import React, { useImperativeHandle, useRef, useState, useLayoutEffect } from 'react';
+import { MobilePopup } from "../../../internal/MobilePopup";
+import { useLocaleForControl } from "../../../lib/locale/useLocaleForControl";
+import { css, cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { Calendar, CalendarDay } from "../../Calendar";
+import { Popup } from "../../../internal/Popup";
+import { DateInput } from "../../DateInput";
+import { isBetween, isGreater, isGreaterOrEqual, isLess, isLessOrEqual } from "../../../lib/date/comparison";
+import { ZIndex } from "../../../internal/ZIndex";
+import { getRootNode } from "../../../lib/rootNode";
+import { getMenuPositions } from "../../../lib/getMenuPositions";
+import { Button } from "../../Button";
+import { useResponsiveLayout } from "../../ResponsiveLayout";
+import { InternalDate } from "../../../lib/date/InternalDate";
+import { InternalDateGetter } from "../../../lib/date/InternalDateGetter";
+import { ArrowAUpIcon16Light } from "../../../internal/icons2022/ArrowAUpIcon/ArrowAUp16Light";
+import { NativeDateInput } from "../../../internal/NativeDateInput";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { LocaleContext } from "../../../lib/locale";
+import { isIOS } from "../../../lib/client";
+import { getFontSize, styles } from "../DateRangePicker.styles";
+import { DateRangePickerSeparator } from "../DateRangePickerSeparator";
+import { DateRangePickerContext } from "../DateRangePickerContext";
+import { DateRangePickerEnd, DateRangePickerStart } from "../DateRangePickerInput";
+import { getDateRangePickerTheme, getMobileDateRangePickerTheme } from "../DateRangePickerTheme";
+import { DateRangePickerLocaleHelper } from "../locale";
+import { validateDateRangePicker } from "../helpers/validateDateRangePicker";
+import { getStateForValue } from "../helpers/getStateForValue";
+export var DateRangePickerDataTids = {
+  root: 'DateRangePicker__root',
+  start: 'DateRangePicker__start',
+  end: 'DateRangePicker__end',
+  popup: 'DateRangePicker__popup',
+  calendar: 'DateRangePicker__calendar',
+  todayButton: 'DateRangePicker__todayButton',
+  startOptionalButton: 'DateRangePicker__startOptionalButton',
+  endOptionalButton: 'DateRangePicker__endOptionalButton',
+  mobileStart: 'DateRangePicker__mobileStart',
+  mobileEnd: 'DateRangePicker__mobileEnd'
+};
+export var DateRangePicker = Object.assign({
+  Start: DateRangePickerStart,
+  End: DateRangePickerEnd,
+  Separator: DateRangePickerSeparator,
+  validate: validateDateRangePicker
+}, forwardRefAndName('DateRangePicker', function (props, ref) {
+  var _useResponsiveLayout = useResponsiveLayout(),
+    isMobile = _useResponsiveLayout.isMobile;
+  var locale = useLocaleForControl('DateRangePicker', DateRangePickerLocaleHelper);
+  var _useState = useState(),
+    startValue = _useState[0],
+    setStartValue = _useState[1];
+  var _useState2 = useState(false),
+    startOptional = _useState2[0],
+    setStartOptional = _useState2[1];
+  var _useState3 = useState(false),
+    startDisabled = _useState3[0],
+    setStartDisabled = _useState3[1];
+  var _useState4 = useState(),
+    endValue = _useState4[0],
+    setEndValue = _useState4[1];
+  var _useState5 = useState(false),
+    endOptional = _useState5[0],
+    setEndOptional = _useState5[1];
+  var _useState6 = useState(false),
+    endDisabled = _useState6[0],
+    setEndDisabled = _useState6[1];
+  var _useState7 = useState(''),
+    minDate = _useState7[0],
+    setMinDate = _useState7[1];
+  var _useState8 = useState(''),
+    maxDate = _useState8[0],
+    setMaxDate = _useState8[1];
+  var _useState9 = useState(null),
+    hoveredDay = _useState9[0],
+    setHoveredDay = _useState9[1];
+  var _useState10 = useState(false),
+    showCalendar = _useState10[0],
+    setShowCalendar = _useState10[1];
+  var _useState11 = useState(null),
+    focusInput = _useState11[0],
+    setFocusInput = _useState11[1];
+  var dateRangePickerRef = useRef(null);
+  var calendarRef = useRef(null);
+  var startRef = useRef(null);
+  var endRef = useRef(null);
+  var mobileStartRef = useRef(null);
+  var mobileEndRef = useRef(null);
+  var mobileNativeStartRef = useRef(null);
+  var mobileNativeEndRef = useRef(null);
+  var isCalendarOpen = !startDisabled && !endDisabled && showCalendar;
+  var updateDateRangeValues = function updateDateRangeValues(value) {
+    if (value === void 0) {
+      value = '';
+    }
+    var currentValues = {
+      currentStart: startValue,
+      currentEnd: endValue,
+      minDate: minDate,
+      maxDate: maxDate
+    };
+    var updatedState = getStateForValue(focusInput, value, currentValues);
+    setStartValue(updatedState.start);
+    setEndValue(updatedState.end);
+    if (updatedState.isOpen && updatedState.focus) {
+      focus(updatedState.focus);
+    }
+    if (!updatedState.isOpen) {
+      close();
+    }
+  };
+  var open = function open(inputType) {
+    if (inputType === void 0) {
+      inputType = 'start';
+    }
+    setFocusInput(inputType);
+    setShowCalendar(true);
+  };
+  var close = function close() {
+    setShowCalendar(false);
+    setHoveredDay(null);
+  };
+  var focus = function focus(inputType) {
+    if (inputType === void 0) {
+      inputType = 'start';
+    }
+    setFocusInput(inputType);
+  };
+  var setEmpty = function setEmpty(type) {
+    switch (type) {
+      case 'start':
+        setStartValue('');
+        focus('end');
+        break;
+      case 'end':
+        setEndValue('');
+        close();
+        break;
+    }
+  };
+  useImperativeHandle(ref, function () {
+    var _calendarRef$current;
+    return {
+      open: open,
+      close: close,
+      scrollToMonth: (_calendarRef$current = calendarRef.current) == null ? void 0 : _calendarRef$current.scrollToMonth,
+      getRootNode: function getRootNode() {
+        return dateRangePickerRef.current;
+      }
+    };
+  }, []);
+  useLayoutEffect(function () {
+    if (!focusInput) {
+      return;
+    }
+
+    // fix DateInput flushSync warning in React 18
+    setTimeout(function () {
+      var _currentFieldRef$curr4;
+      var isStart = focusInput === 'start';
+      var currentFieldRef;
+
+      // Mobile Native Picker
+      if (isMobile && props.useMobileNativeDatePicker) {
+        currentFieldRef = isStart ? mobileNativeStartRef : mobileNativeEndRef;
+        if (isIOS) {
+          var _currentFieldRef$curr;
+          (_currentFieldRef$curr = currentFieldRef.current) == null || _currentFieldRef$curr.focus();
+        } else {
+          var _currentFieldRef$curr2;
+          // Android open native datepicker only via click
+          (_currentFieldRef$curr2 = currentFieldRef.current) == null || _currentFieldRef$curr2.click();
+        }
+        return;
+      }
+
+      // Mobile
+      if (isMobile) {
+        var _currentFieldRef$curr3;
+        currentFieldRef = isStart ? mobileStartRef : mobileEndRef;
+        (_currentFieldRef$curr3 = currentFieldRef.current) == null || _currentFieldRef$curr3.focus();
+        return;
+      }
+
+      // Desktop
+      currentFieldRef = isStart ? startRef : endRef;
+      (_currentFieldRef$curr4 = currentFieldRef.current) == null || _currentFieldRef$curr4.focus();
+    });
+  }, [focusInput]);
+  var dateRangePickerContextProps = {
+    startValue: startValue,
+    startOptional: startOptional,
+    startDisabled: startDisabled,
+    endValue: endValue,
+    endOptional: endOptional,
+    endDisabled: endDisabled,
+    minDate: minDate,
+    maxDate: maxDate,
+    size: props.size,
+    setStartValue: setStartValue,
+    setStartOptional: setStartOptional,
+    setStartDisabled: setStartDisabled,
+    setEndValue: setEndValue,
+    setEndOptional: setEndOptional,
+    setEndDisabled: setEndDisabled,
+    setMinDate: setMinDate,
+    setMaxDate: setMaxDate,
+    setFocusInput: setFocusInput,
+    open: open,
+    close: close,
+    dateRangePickerRef: dateRangePickerRef,
+    startRef: startRef,
+    endRef: endRef
+  };
+  var renderCalendar = function renderCalendar(theme, widthAuto) {
+    var _cx;
+    if (widthAuto === void 0) {
+      widthAuto = false;
+    }
+    return /*#__PURE__*/(
+      React.createElement(LocaleContext.Provider, {
+        value: {
+          locale: {
+            Calendar: {
+              months: locale.months,
+              dayCellChooseDateAriaLabel: locale.dayCellChooseDateAriaLabel,
+              selectMonthAriaLabel: locale.selectMonthAriaLabel,
+              selectYearAriaLabel: locale.selectYearAriaLabel,
+              selectChosenAriaLabel: locale.selectChosenAriaLabel
+            }
+          }
+        }
+      }, /*#__PURE__*/
+
+      React.createElement(Calendar, {
+        value: focusInput === 'start' ? startValue : endValue,
+        minDate: minDate,
+        maxDate: maxDate,
+        renderDay: function renderDay(dayProps) {
+          return renderCalendarRange(dayProps, theme, props.renderDay);
+        },
+        onValueChange: function onValueChange(value) {
+          return updateDateRangeValues(value);
+        },
+        ref: calendarRef,
+        onMonthChange: props.onMonthChange,
+        className: cx((_cx = {}, _cx[styles.calendarWidthAuto()] = widthAuto, _cx))
+      }))
+    );
+  };
+  var renderMobileCalendar = function renderMobileCalendar(theme) {
+    var _cx2, _cx3;
+    return /*#__PURE__*/(
+      React.createElement(MobilePopup, {
+        opened: true,
+        headerChildComponent: /*#__PURE__*/
+        React.createElement("div", {
+          className: cx(styles.inputWrapper(), styles.inputWrapperWidthFull())
+        }, /*#__PURE__*/
+        React.createElement(DateInput, {
+          withIcon: true,
+          value: startValue,
+          width: "auto",
+          size: "medium",
+          className: cx((_cx2 = {}, _cx2[styles.inputVisuallyFocus(theme)] = focusInput === 'start', _cx2)),
+          disabled: startDisabled,
+          onValueChange: setStartValue,
+          onFocus: function onFocus() {
+            return setFocusInput('start');
+          },
+          ref: mobileStartRef,
+          "data-tid": DateRangePickerDataTids.mobileStart
+        }), /*#__PURE__*/
+        React.createElement(DateRangePicker.Separator, null), /*#__PURE__*/
+        React.createElement(DateInput, {
+          withIcon: true,
+          value: endValue,
+          width: "auto",
+          size: "medium",
+          className: cx((_cx3 = {}, _cx3[styles.inputVisuallyFocus(theme)] = focusInput === 'end', _cx3)),
+          disabled: endDisabled,
+          onValueChange: setEndValue,
+          onFocus: function onFocus() {
+            return setFocusInput('end');
+          },
+          ref: mobileEndRef,
+          "data-tid": DateRangePickerDataTids.mobileEnd
+        })),
+        onCloseRequest: function onCloseRequest() {
+          return close();
+        },
+        footerChildComponent: renderButtons()
+      }, /*#__PURE__*/
+
+      React.createElement(ThemeContext.Provider, {
+        value: getMobileDateRangePickerTheme(theme)
+      }, renderCalendar(theme, true)))
+    );
+  };
+  var renderDesktopCalendar = function renderDesktopCalendar(theme) {
+    return /*#__PURE__*/(
+      React.createElement(Popup, {
+        opened: true,
+        hasShadow: true,
+        priority: ZIndex.priorities.PopupMenu,
+        positions: getMenuPositions(props.menuPos, props.menuAlign),
+        "data-tid": DateRangePickerDataTids.root,
+        anchorElement: getRootNode(dateRangePickerRef.current),
+        margin: parseInt(theme.datePickerMenuOffsetY)
+      }, /*#__PURE__*/
+
+      React.createElement("div", {
+        className: styles.calendarWrapper(theme),
+        onMouseDown: function onMouseDown(e) {
+          return e.preventDefault();
+        }
+      }, renderCalendar(theme), renderButtons()))
+    );
+  };
+  var renderButtons = function renderButtons() {
+    var today = new InternalDate(locale).setComponents(InternalDateGetter.getTodayComponents()).toString({
+      withPad: true,
+      withSeparator: true
+    });
+    var hasOptionalButtons = startOptional || endOptional;
+    return /*#__PURE__*/(
+      React.createElement("div", {
+        className: cx(styles.buttonWrap())
+      }, hasOptionalButtons && /*#__PURE__*/
+      React.createElement(React.Fragment, null, focusInput === 'start' && startOptional && /*#__PURE__*/
+      React.createElement(Button, {
+        width: "100%",
+        "data-tid": DateRangePickerDataTids.startOptionalButton,
+        onClick: function onClick() {
+          return setEmpty('start');
+        }
+      }, locale.startDateEmpty), focusInput === 'end' && endOptional && /*#__PURE__*/
+      React.createElement(Button, {
+        width: "100%",
+        "data-tid": DateRangePickerDataTids.endOptionalButton,
+        onClick: function onClick() {
+          return setEmpty('end');
+        }
+      }, locale.endDateEmpty)), props.enableTodayLink && /*#__PURE__*/
+      React.createElement(Button, {
+        icon: /*#__PURE__*/React.createElement(ArrowAUpIcon16Light, null),
+        "aria-label": locale.todayAriaLabel,
+        "data-tid": DateRangePickerDataTids.todayButton,
+        onClick: function onClick() {
+          return updateDateRangeValues(today);
+        }
+      }, !hasOptionalButtons && locale.today))
+    );
+  };
+  var renderMobileNativeDateInput = function renderMobileNativeDateInput() {
+    return /*#__PURE__*/(
+      React.createElement(React.Fragment, null, /*#__PURE__*/
+      React.createElement(NativeDateInput, {
+        value: startValue,
+        minDate: minDate,
+        maxDate: maxDate,
+        onValueChange: setStartValue,
+        disabled: startDisabled,
+        ref: mobileNativeStartRef
+      }), /*#__PURE__*/
+      React.createElement(NativeDateInput, {
+        value: endValue,
+        minDate: minDate,
+        maxDate: maxDate,
+        onValueChange: setEndValue,
+        disabled: endDisabled,
+        ref: mobileNativeEndRef
+      }))
+    );
+  };
+  return /*#__PURE__*/(
+    React.createElement(ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/(
+        React.createElement(ThemeContext.Provider, {
+          value: getDateRangePickerTheme(theme)
+        }, /*#__PURE__*/
+        React.createElement(CommonWrapper, props, /*#__PURE__*/
+        React.createElement("div", {
+          className: styles.root(theme),
+          role: "group",
+          "aria-describedby": props['aria-describedby'],
+          "aria-label": props['aria-label'],
+          "aria-labelledby": props['aria-labelledby'],
+          "data-tid": DateRangePickerDataTids.root,
+          ref: dateRangePickerRef
+        }, /*#__PURE__*/
+
+        React.createElement(DateRangePickerContext.Provider, {
+          value: dateRangePickerContextProps
+        }, /*#__PURE__*/
+        React.createElement("div", {
+          className: cx(styles.inputWrapper(), styles.inputWrapperWidth(theme), css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n                        font-size: ", ";\n                      "])), getFontSize(theme, props.size)))
+        }, props.children), props.useMobileNativeDatePicker && isMobile ? renderMobileNativeDateInput() : isCalendarOpen && (isMobile ? renderMobileCalendar(theme) : renderDesktopCalendar(theme))))))
+      );
+    })
+  );
+  function renderCalendarRange(props, t, renderDayFn) {
+    var _cx4;
+    var day = props.date;
+    var isDayFirst = startValue === day;
+    var isDayLast = endValue === day;
+    var isDayInPeriod = Boolean(startValue && endValue && isBetween(day, startValue, endValue));
+    var hasHoveredDay = hoveredDay !== null;
+    var isDayInHoveredPeriod = hasHoveredDay && Boolean(focusInput === 'start' && endValue && isBetween(day, hoveredDay, endValue) || focusInput === 'end' && startValue && isBetween(day, startValue, hoveredDay));
+    var hasLeftRoundings;
+    var hasRightRoundings;
+    if (hasHoveredDay) {
+      var isDayBeforeFirstInPeriod = startValue ? isLess(hoveredDay, startValue) : endValue;
+      var isDayAfterLastInPeriod = endValue ? isGreater(hoveredDay, endValue) : startValue;
+      if (isDayFirst && (isGreaterOrEqual(hoveredDay, startValue) || focusInput === 'end')) {
+        hasLeftRoundings = true;
+      }
+      if (isDayLast && (isLessOrEqual(hoveredDay, endValue) || focusInput === 'start')) {
+        hasRightRoundings = true;
+      }
+      var isDayHovered = hoveredDay === day;
+      if (isDayHovered) {
+        if (isDayBeforeFirstInPeriod) {
+          hasLeftRoundings = true;
+        }
+        if (isDayAfterLastInPeriod) {
+          hasRightRoundings = true;
+        }
+      }
+    } else {
+      if (isDayFirst) {
+        hasLeftRoundings = true;
+      }
+      if (isDayLast) {
+        hasRightRoundings = true;
+      }
+    }
+    return /*#__PURE__*/(
+      React.createElement("div", {
+        onMouseOver: function onMouseOver() {
+          return setHoveredDay(day);
+        },
+        onMouseOut: function onMouseOut() {
+          return setHoveredDay(null);
+        },
+        className: cx(styles.rangeCalendarDay(), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n              background: ", ";\n              border-top-left-radius: ", ";\n              border-bottom-left-radius: ", ";\n              border-top-right-radius: ", ";\n              border-bottom-right-radius: ", ";\n            "])), isDayInPeriod && t.rangeCalendarCellBg, hasLeftRoundings && t.calendarCellBorderRadius, hasLeftRoundings && t.calendarCellBorderRadius, hasRightRoundings && t.calendarCellBorderRadius, hasRightRoundings && t.calendarCellBorderRadius), (_cx4 = {}, _cx4[styles.rangeCalendarDayEnd(t)] = isDayFirst || isDayLast, _cx4[styles.rangeCalendarDayHoverInPeriod(t)] = isDayInPeriod, _cx4[styles.rangeCalendarDayInHoveredPeriod(t)] = isDayInHoveredPeriod, _cx4))
+      }, renderDayFn ? renderDayFn(props) : /*#__PURE__*/React.createElement(CalendarDay, props))
+    );
+  }
+}));