npm - @vkontakte/vkui - Versions diffs - 7.2.0 → 7.2.1 - Mend

@vkontakte/vkui 7.2.0 → 7.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/CustomSelectDropdown/CustomSelectDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasDataAttribute, HTMLAttributesWithRootRef } from '../../types';\nimport { CustomScrollView, type CustomScrollViewProps } from '../CustomScrollView/CustomScrollView';\nimport { Popper } from '../Popper/Popper';\nimport { Spinner } from '../Spinner/Spinner';\nimport styles from './CustomSelectDropdown.module.css';\n\nexport interface CustomSelectDropdownProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n Pick<CustomScrollViewProps, 'overscrollBehavior'>,\n HasDataAttribute {\n targetRef: React.RefObject<HTMLElement \| null>;\n placement?: Placement;\n scrollBoxRef?: React.Ref<HTMLDivElement>;\n fetching?: boolean;\n offsetDistance?: number;\n /*\n Ширина раскрывающегося списка зависит от контента\n /\n autoWidth?: boolean;\n forcePortal?: boolean;\n onPlacementChange?: (placement: Placement) => void;\n /\n Отключает максимальную высоту по умолчанию\n */\n noMaxHeight?: boolean;\n}\n\nexport const CustomSelectDropdown = ({\n children,\n targetRef,\n scrollBoxRef,\n placement = 'bottom',\n fetching,\n offsetDistance = 0,\n autoWidth = false,\n forcePortal = true,\n className,\n noMaxHeight = false,\n // CustomScrollView\n overscrollBehavior,\n ...restProps\n}: CustomSelectDropdownProps): React.ReactNode => {\n return (\n <Popper\n targetRef={targetRef}\n offsetByMainAxis={offsetDistance}\n sameWidth={!autoWidth}\n placement={placement}\n className={classNames(\n styles.host,\n 'vkuiInternalCustomSelectDropdown',\n offsetDistance === 0 && (placement.includes('top') ? styles.top : styles.bottom),\n autoWidth && classNames(styles.wide, 'vkuiInternalCustomSelectDropdown--wide'),\n className,\n )}\n usePortal={forcePortal}\n autoUpdateOnTargetResize\n flipMiddlewareFallbackAxisSideDirection=\"none\"\n {...restProps}\n >\n <CustomScrollView\n getRootRef={scrollBoxRef}\n className={noMaxHeight ? undefined : styles.inWithMaxHeight}\n overscrollBehavior={overscrollBehavior}\n >\n {fetching ? (\n <div className={styles.fetching}>\n <Spinner size=\"s\" />\n </div>\n ) : (\n children\n )}\n </CustomScrollView>\n </Popper>\n );\n};\n"],"names":["React","classNames","CustomScrollView","Popper","Spinner","CustomSelectDropdown","children","targetRef","scrollBoxRef","placement","fetching","offsetDistance","autoWidth","forcePortal","className","noMaxHeight","overscrollBehavior","restProps","offsetByMainAxis","sameWidth","includes","usePortal","autoUpdateOnTargetResize","flipMiddlewareFallbackAxisSideDirection","getRootRef","undefined","div","size"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,gBAAgB,QAAoC,0CAAuC;AACpG,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,OAAO,QAAQ,wBAAqB;AAwB7C,OAAO,MAAMC,uBAAuB;QAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,YAAY,QAAQ,EACpBC,QAAQ,EACRC,iBAAiB,CAAC,EAClBC,YAAY,KAAK,EACjBC,cAAc,IAAI,EAClBC,SAAS,EACTC,cAAc,KAAK,EACnB,mBAAmB;IACnBC,kBAAkB,EAEQ,WADvBC;QAZHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QAEAC;;IAGA,qBACE,KAACb;QACCI,WAAWA;QACXW,kBAAkBP;QAClBQ,WAAW,CAACP;QACZH,WAAWA;QACXK,WAAWb,6CAET,oCACAU,mBAAmB,KAAMF,CAAAA,UAAUW,QAAQ,CAAC,6EAAkC,GAC9ER,aAAaX,6CAAwB,2CACrCa;QAEFO,WAAWR;QACXS,wBAAwB;QACxBC,yCAAwC;OACpCN;kBAEJ,cAAA,KAACf;YACCsB,YAAYhB;YACZM,WAAWC,cAAcU;YACzBT,oBAAoBA;~~sBAEnBN~~,yBACC,~~KAACgB~~;~~gBAAIZ~~,SAAS;0BACZ,cAAA,KAACV;~~oBAAQuB~~,MAAK;;~~iBAGhBrB~~;;;AAKV,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/CustomSelectDropdown/CustomSelectDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasDataAttribute, HTMLAttributesWithRootRef } from '../../types';\nimport { CustomScrollView, type CustomScrollViewProps } from '../CustomScrollView/CustomScrollView';\nimport { Popper } from '../Popper/Popper';\nimport { Spinner } from '../Spinner/Spinner';\nimport styles from './CustomSelectDropdown.module.css';\n\nexport interface CustomSelectDropdownProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n Pick<CustomScrollViewProps, 'overscrollBehavior'>,\n HasDataAttribute {\n targetRef: React.RefObject<HTMLElement \| null>;\n placement?: Placement;\n scrollBoxRef?: React.Ref<HTMLDivElement>;\n fetching?: boolean;\n offsetDistance?: number;\n /*\n Ширина раскрывающегося списка зависит от контента\n /\n autoWidth?: boolean;\n forcePortal?: boolean;\n onPlacementChange?: (placement: Placement) => void;\n /\n Отключает максимальную высоту по умолчанию\n */\n noMaxHeight?: boolean;\n}\n\nexport const CustomSelectDropdown = ({\n children,\n targetRef,\n scrollBoxRef,\n placement = 'bottom',\n fetching,\n offsetDistance = 0,\n autoWidth = false,\n forcePortal = true,\n className,\n noMaxHeight = false,\n // CustomScrollView\n overscrollBehavior,\n ...restProps\n}: CustomSelectDropdownProps): React.ReactNode => {\n return (\n <Popper\n targetRef={targetRef}\n offsetByMainAxis={offsetDistance}\n sameWidth={!autoWidth}\n placement={placement}\n className={classNames(\n styles.host,\n 'vkuiInternalCustomSelectDropdown',\n offsetDistance === 0 && (placement.includes('top') ? styles.top : styles.bottom),\n autoWidth && classNames(styles.wide, 'vkuiInternalCustomSelectDropdown--wide'),\n className,\n )}\n usePortal={forcePortal}\n autoUpdateOnTargetResize\n flipMiddlewareFallbackAxisSideDirection=\"none\"\n {...restProps}\n >\n <CustomScrollView\n getRootRef={scrollBoxRef}\n className={noMaxHeight ? undefined : styles.inWithMaxHeight}\n overscrollBehavior={overscrollBehavior}\n tabIndex={-1}\n >\n {fetching ? (\n <div className={styles.fetching}>\n <Spinner size=\"s\" />\n </div>\n ) : (\n children\n )}\n </CustomScrollView>\n </Popper>\n );\n};\n"],"names":["React","classNames","CustomScrollView","Popper","Spinner","CustomSelectDropdown","children","targetRef","scrollBoxRef","placement","fetching","offsetDistance","autoWidth","forcePortal","className","noMaxHeight","overscrollBehavior","restProps","offsetByMainAxis","sameWidth","includes","usePortal","autoUpdateOnTargetResize","flipMiddlewareFallbackAxisSideDirection","getRootRef","undefined","tabIndex","div","size"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,gBAAgB,QAAoC,0CAAuC;AACpG,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,OAAO,QAAQ,wBAAqB;AAwB7C,OAAO,MAAMC,uBAAuB;QAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,YAAY,QAAQ,EACpBC,QAAQ,EACRC,iBAAiB,CAAC,EAClBC,YAAY,KAAK,EACjBC,cAAc,IAAI,EAClBC,SAAS,EACTC,cAAc,KAAK,EACnB,mBAAmB;IACnBC,kBAAkB,EAEQ,WADvBC;QAZHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QAEAC;;IAGA,qBACE,KAACb;QACCI,WAAWA;QACXW,kBAAkBP;QAClBQ,WAAW,CAACP;QACZH,WAAWA;QACXK,WAAWb,6CAET,oCACAU,mBAAmB,KAAMF,CAAAA,UAAUW,QAAQ,CAAC,6EAAkC,GAC9ER,aAAaX,6CAAwB,2CACrCa;QAEFO,WAAWR;QACXS,wBAAwB;QACxBC,yCAAwC;OACpCN;kBAEJ,cAAA,KAACf;YACCsB,YAAYhB;YACZM,WAAWC,cAAcU;YACzBT,oBAAoBA;YACpBU,UAAU,CAAC;sBAEVhB,yBACC,KAACiB;gBAAIb,SAAS;0BACZ,cAAA,KAACV;oBAAQwB,MAAK;;iBAGhBtB;;;AAKV,EAAE"}

package/dist/components/DateInput/DateInput.d.ts CHANGED Viewed

@@ -25,6 +25,14 @@ export type DateInputPropsTestsProps = {
      * Передает атрибут `data-testid` для поля ввода минут
      */
     minuteFieldTestId?: string;
+    /**
+     * Передает атрибут `data-testid` для кнопки показа календаря.
+     */
+    showCalendarButtonTestId?: string;
+    /**
+     * Передает атрибут `data-testid` для кнопки очистки даты.
+     */
+    clearButtonTestId?: string;
 };
 export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange' | 'size'>, Pick<CalendarProps, 'disablePast' | 'disableFuture' | 'enableTime' | 'shouldDisableDate' | 'onChange' | 'value' | 'defaultValue' | 'doneButtonText' | 'DoneButton' | 'weekStartsOn' | 'disablePickers' | 'changeHoursLabel' | 'changeMinutesLabel' | 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'changeDayLabel' | 'showNeighboringMonth' | 'size' | 'viewDate' | 'onHeaderChange' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'minDateTime' | 'maxDateTime' | 'renderDayContent'>, HasRootRef<HTMLDivElement>, Omit<FormFieldProps, 'maxHeight'>, DateInputPropsTestsProps {
     /**
@@ -54,5 +62,5 @@ export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivEl
 /**
  * @see https://vkcom.github.io/VKUI/#/DateInput
  */
-export declare const DateInput: ({ enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp, style, className, doneButtonText, DoneButton, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, showNeighboringMonth, size, changeMonthLabel, changeYearLabel, changeDayLabel, changeHoursLabel, changeMinutesLabel, clearFieldLabel, showCalendarLabel, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, id, onApply, renderCustomValue, timezone, ...props }: DateInputProps) => React.ReactNode;
+export declare const DateInput: ({ enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp, style, className, doneButtonText, DoneButton, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, showNeighboringMonth, size, changeMonthLabel, changeYearLabel, changeDayLabel, changeHoursLabel, changeMinutesLabel, clearFieldLabel, showCalendarLabel, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, showCalendarButtonTestId, clearButtonTestId, id, onApply, renderCustomValue, timezone, ...props }: DateInputProps) => React.ReactNode;
 //# sourceMappingURL=DateInput.d.ts.map

package/dist/components/DateInput/DateInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAQxE,OAAO,mCAAmC,CAAC;AAQ3C,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EACzC,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAC/C,EACD,IAAI,CACF,aAAa,EACX,aAAa,GACb,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,gBAAgB,GAChB,YAAY,GACZ,cAAc,GACd,gBAAgB,GAChB,kBAAkB,GAClB,oBAAoB,GACpB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,sBAAsB,GACtB,MAAM,GACN,UAAU,GACV,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,aAAa,GACb,aAAa,GACb,kBAAkB,CACrB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,wBAAwB;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA0CD;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,~~uxBAsDvB~~,cAAc,KAAG,KAAK,CAAC,~~SA+PzB~~,CAAC"}
1	+ {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAQxE,OAAO,mCAAmC,CAAC;AAQ3C,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EACzC,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAC/C,EACD,IAAI,CACF,aAAa,EACX,aAAa,GACb,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,gBAAgB,GAChB,YAAY,GACZ,cAAc,GACd,gBAAgB,GAChB,kBAAkB,GAClB,oBAAoB,GACpB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,sBAAsB,GACtB,MAAM,GACN,UAAU,GACV,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,aAAa,GACb,aAAa,GACb,kBAAkB,CACrB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,wBAAwB;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA0CD;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,o0BAwDvB,cAAc,KAAG,KAAK,CAAC,SAgRzB,CAAC"}

package/dist/components/DateInput/DateInput.js CHANGED Viewed

@@ -75,7 +75,7 @@ const getInternalValue = (value)=>{
 /**
  * @see https://vkcom.github.io/VKUI/#/DateInput
  */ export const DateInput = (_param)=>{
-    var { enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp = 'bottom-start', style, className, doneButtonText, DoneButton, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', showNeighboringMonth, size, changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar = false, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, id, onApply, renderCustomValue, timezone } = _param, props = _object_without_properties(_param, [
+    var { enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp = 'bottom-start', style, className, doneButtonText, DoneButton, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', showNeighboringMonth, size, changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar = false, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, showCalendarButtonTestId, clearButtonTestId, id, onApply, renderCustomValue, timezone } = _param, props = _object_without_properties(_param, [
         "enableTime",
         "shouldDisableDate",
         "disableFuture",
@@ -124,6 +124,8 @@ const getInternalValue = (value)=>{
         "yearFieldTestId",
         "hourFieldTestId",
         "minuteFieldTestId",
+        "showCalendarButtonTestId",
+        "clearButtonTestId",
         "id",
         "onApply",
         "renderCustomValue",
@@ -134,7 +136,7 @@ const getInternalValue = (value)=>{
     const yearsRef = React.useRef(null);
     const hoursRef = React.useRef(null);
     const minutesRef = React.useRef(null);
-    const { value, updateValue, setInternalValue, getLastUpdatedValue } = useDateInputValue({
+    const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } = useDateInputValue({
         value: valueProp,
         defaultValue,
         onChange,
@@ -182,7 +184,7 @@ const getInternalValue = (value)=>{
         autoFocus,
         disabled,
         elementsConfig,
-        onChange: updateValue,
+        onClear: clearValue,
         onInternalValueChange,
         getInternalValue,
         value,
@@ -199,6 +201,9 @@ const getInternalValue = (value)=>{
         getLastUpdatedValue
     ]);
     const onCalendarChange = React.useCallback((value)=>{
+        if (!value) {
+            return;
+        }
         if (enableTime) {
             setInternalValue(value);
             return;
@@ -215,6 +220,9 @@ const getInternalValue = (value)=>{
         removeFocusFromField
     ]);
     const onDoneButtonClick = React.useCallback(()=>{
+        if (!value) {
+            return;
+        }
         const newValue = updateValue(value);
         onApply === null || onApply === void 0 ? void 0 : onApply(newValue);
         removeFocusFromField();
@@ -224,7 +232,7 @@ const getInternalValue = (value)=>{
         updateValue,
         value
     ]);
-    const customValue = React.useMemo(()=>!open && (renderCustomValue === null || renderCustomValue === void 0 ? void 0 : renderCustomValue(value)), [
+    const customValue = React.useMemo(()=>!open && (renderCustomValue === null || renderCustomValue === void 0 ? void 0 : renderCustomValue(value || undefined)), [
         open,
         renderCustomValue,
         value
@@ -242,11 +250,13 @@ const getInternalValue = (value)=>{
             hoverMode: "opacity",
             label: clearFieldLabel,
             onClick: clear,
+            "data-testid": clearButtonTestId,
             children: /*#__PURE__*/ _jsx(Icon16Clear, {})
         }) : /*#__PURE__*/ _jsx(IconButton, {
             hoverMode: "opacity",
             label: showCalendarLabel,
             onClick: openCalendar,
+            "data-testid": showCalendarButtonTestId,
             children: /*#__PURE__*/ _jsx(Icon20CalendarOutline, {})
         }),
         disabled: disabled,

package/dist/components/DateInput/DateInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { startOfDay, startOfMinute } from 'date-fns';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { useDateInputValue } from './hooks';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n none: styles.sizeYNone,\n compact: styles.sizeYCompact,\n};\n\nexport type DateInputPropsTestsProps = {\n /*\n Передает атрибут `data-testid` для поля ввода дня\n /\n dayFieldTestId?: string;\n /\n Передает атрибут `data-testid` для поля ввода месяца\n /\n monthFieldTestId?: string;\n /\n Передает атрибут `data-testid` для поля ввода года\n /\n yearFieldTestId?: string;\n /\n Передает атрибут `data-testid` для поля ввода часа\n /\n hourFieldTestId?: string;\n /\n Передает атрибут `data-testid` для поля ввода минут\n /\n minuteFieldTestId?: string;\n};\n\nexport interface DateInputProps\n extends Omit<\n React.InputHTMLAttributes<HTMLDivElement>,\n 'value' \| 'defaultValue' \| 'onChange' \| 'size'\n >,\n Pick<\n CalendarProps,\n \| 'disablePast'\n \| 'disableFuture'\n \| 'enableTime'\n \| 'shouldDisableDate'\n \| 'onChange'\n \| 'value'\n \| 'defaultValue'\n \| 'doneButtonText'\n \| 'DoneButton'\n \| 'weekStartsOn'\n \| 'disablePickers'\n \| 'changeHoursLabel'\n \| 'changeMinutesLabel'\n \| 'prevMonthLabel'\n \| 'nextMonthLabel'\n \| 'changeMonthLabel'\n \| 'changeYearLabel'\n \| 'changeDayLabel'\n \| 'showNeighboringMonth'\n \| 'size'\n \| 'viewDate'\n \| 'onHeaderChange'\n \| 'onNextMonth'\n \| 'onPrevMonth'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n \| 'minDateTime'\n \| 'maxDateTime'\n \| 'renderDayContent'\n >,\n HasRootRef<HTMLDivElement>,\n Omit<FormFieldProps, 'maxHeight'>,\n DateInputPropsTestsProps {\n /\n Передает атрибуты `data-testid` для интерактивных элементов в календаре\n /\n calendarTestsProps?: CalendarTestsProps;\n calendarPlacement?: PlacementWithAuto;\n closeOnChange?: boolean;\n clearFieldLabel?: string;\n showCalendarLabel?: string;\n disableCalendar?: boolean;\n onCalendarOpenChanged?: (opened: boolean) => void;\n /\n Колбэк срабатывающий при нажатии на кнопку \"Done\". Используется совместно с флагом `enableTime`.\n /\n onApply?: (value?: Date) => void;\n /\n Функция для кастомного форматирования отображаемого значения даты.\n * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.\n /\n renderCustomValue?: (date: Date \| undefined) => React.ReactNode;\n /\n Свойство для отображения времени в нужной таймзоне\n /\n timezone?: string;\n}\n\nconst elementsConfig = (index: number) => {\n let length = 2;\n let min = 1;\n let max = 0;\n\n switch (index) {\n case 0:\n max = 31;\n break;\n case 1:\n max = 12;\n break;\n case 2:\n max = 2100;\n min = 1900;\n length = 4;\n break;\n case 3:\n max = 23;\n break;\n case 4:\n max = 59;\n break;\n }\n\n return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n const newValue = ['', '', '', '', ''];\n if (value) {\n newValue[0] = String(value.getDate()).padStart(2, '0');\n newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n newValue[2] = String(value.getFullYear()).padStart(4, '0');\n newValue[3] = String(value.getHours()).padStart(2, '0');\n newValue[4] = String(value.getMinutes()).padStart(2, '0');\n }\n return newValue;\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n enableTime,\n shouldDisableDate,\n disableFuture,\n disablePast,\n minDateTime,\n maxDateTime,\n value: valueProp,\n defaultValue,\n onChange,\n calendarPlacement: calendarPlacementProp = 'bottom-start',\n style,\n className,\n doneButtonText,\n DoneButton,\n closeOnChange = true,\n disablePickers,\n getRootRef,\n name,\n autoFocus,\n disabled,\n onClick,\n onFocus,\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n showNeighboringMonth,\n size,\n changeMonthLabel = 'Изменить месяц',\n changeYearLabel = 'Изменить год',\n changeDayLabel = 'Изменить день',\n changeHoursLabel = 'Изменить час',\n changeMinutesLabel = 'Изменить минуту',\n clearFieldLabel = 'Очистить поле',\n showCalendarLabel = 'Показать календарь',\n viewDate,\n onHeaderChange,\n onNextMonth,\n onPrevMonth,\n prevMonthIcon,\n nextMonthIcon,\n disableCalendar = false,\n renderDayContent,\n onCalendarOpenChanged,\n calendarTestsProps,\n dayFieldTestId,\n monthFieldTestId,\n yearFieldTestId,\n hourFieldTestId,\n minuteFieldTestId,\n id,\n onApply,\n renderCustomValue,\n timezone,\n ...props\n}: DateInputProps): React.ReactNode => {\n const daysRef = React.useRef<HTMLSpanElement>(null);\n const monthsRef = React.useRef<HTMLSpanElement>(null);\n const yearsRef = React.useRef<HTMLSpanElement>(null);\n const hoursRef = React.useRef<HTMLSpanElement>(null);\n const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n const { value, updateValue, setInternalValue, getLastUpdatedValue } = useDateInputValue({\n value: valueProp,\n defaultValue,\n onChange,\n timezone,\n });\n\n const maxElement = enableTime ? 4 : 2;\n\n const onInternalValueChange = React.useCallback(\n (internalValue: string[]) => {\n for (let i = 0; i <= maxElement; i += 1) {\n if (internalValue[i].length < elementsConfig(i).length) {\n return;\n }\n }\n\n let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n let mask = 'dd.MM.yyyy';\n if (enableTime) {\n formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n mask += ' HH:mm';\n }\n\n if (isMatch(formattedValue, mask)) {\n const now = new Date();\n updateValue(\n parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),\n );\n }\n },\n [enableTime, maxElement, updateValue, value],\n );\n\n const refs = React.useMemo(\n () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n );\n\n const {\n rootRef,\n calendarRef,\n open,\n openCalendar,\n internalValue,\n handleKeyDown,\n setFocusedElement,\n handleFieldEnter,\n clear,\n removeFocusFromField,\n } = useDateInput({\n maxElement,\n refs,\n autoFocus,\n disabled,\n elementsConfig,\n onChange: updateValue,\n onInternalValueChange,\n getInternalValue,\n value,\n onCalendarOpenChanged,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const handleRootRef = useExternRef(rootRef, getRootRef);\n\n useIsomorphicLayoutEffect(\n function resetValueOnCloseCalendar() {\n if (!open) {\n setInternalValue(getLastUpdatedValue());\n }\n },\n [open, getLastUpdatedValue],\n );\n\n const onCalendarChange = React.useCallback(\n (value?: Date \| undefined) => {\n if (enableTime) {\n setInternalValue(value);\n return;\n }\n updateValue(value);\n if (closeOnChange) {\n removeFocusFromField();\n }\n },\n [enableTime, updateValue, closeOnChange, setInternalValue, removeFocusFromField],\n );\n\n const onDoneButtonClick = React.useCallback(() => {\n const newValue = updateValue(value);\n onApply?.(newValue);\n removeFocusFromField();\n }, [onApply, removeFocusFromField, updateValue, value]);\n\n const customValue = React.useMemo(\n () => !open && renderCustomValue?.(value),\n [open, renderCustomValue, value],\n );\n\n // при переключении месяцев высота календаря может меняться,\n // чтобы календарь не прыгал при переключении месяцев каждый раз на\n // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n // на ней, пока помещается.\n const [calendarPlacement, setCalendarPlacement] =\n React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n return (\n <FormField\n style={style}\n className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n getRootRef={handleRootRef}\n after={\n value ? (\n <IconButton hoverMode=\"opacity\" label={clearFieldLabel} onClick={clear}>\n <Icon16Clear />\n </IconButton>\n ) : (\n <IconButton hoverMode=\"opacity\" label={showCalendarLabel} onClick={openCalendar}>\n <Icon20CalendarOutline />\n </IconButton>\n )\n }\n disabled={disabled}\n onClick={callMultiple(handleFieldEnter, onClick)}\n onFocus={callMultiple(handleFieldEnter, onFocus)}\n {...props}\n >\n <div className={styles.wrapper}>\n <VisuallyHidden\n id={id}\n Component=\"input\"\n name={name}\n value={value ? format(value, enableTime ? \"dd.MM.yyyy'T'HH:mm\" : 'dd.MM.yyyy') : ''}\n />\n <Text\n className={classNames(styles.input, customValue && styles.hidden)}\n onKeyDown={handleKeyDown}\n // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n // из-за чего `.Typography--normalize` перебивает стили.\n normalize={false}\n Component=\"span\" // для <span> нормализация не нужна\n >\n <InputLike\n length={2}\n getRootRef={daysRef}\n index={0}\n onElementSelect={setFocusedElement}\n value={internalValue[0]}\n label={changeDayLabel}\n data-testid={dayFieldTestId}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={monthsRef}\n index={1}\n onElementSelect={setFocusedElement}\n value={internalValue[1]}\n label={changeMonthLabel}\n data-testid={monthFieldTestId}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={4}\n getRootRef={yearsRef}\n index={2}\n onElementSelect={setFocusedElement}\n value={internalValue[2]}\n label={changeYearLabel}\n data-testid={yearFieldTestId}\n />\n {enableTime && (\n <React.Fragment>\n <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={hoursRef}\n index={3}\n onElementSelect={setFocusedElement}\n value={internalValue[3]}\n label={changeHoursLabel}\n data-testid={hourFieldTestId}\n />\n <InputLikeDivider>:</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={minutesRef}\n index={4}\n onElementSelect={setFocusedElement}\n value={internalValue[4]}\n label={changeMinutesLabel}\n data-testid={minuteFieldTestId}\n />\n </React.Fragment>\n )}\n </Text>\n {customValue && (\n <Text className={styles.customValue} aria-hidden>\n {customValue}\n </Text>\n )}\n </div>\n {open && !disableCalendar && (\n <Popper\n targetRef={rootRef}\n offsetByMainAxis={8}\n placement={calendarPlacement}\n onPlacementChange={setCalendarPlacement}\n autoUpdateOnTargetResize\n >\n <Calendar\n value={value}\n onChange={onCalendarChange}\n enableTime={enableTime}\n disablePast={disablePast}\n disableFuture={disableFuture}\n shouldDisableDate={shouldDisableDate}\n onDoneButtonClick={onDoneButtonClick}\n getRootRef={calendarRef}\n doneButtonText={doneButtonText}\n DoneButton={DoneButton}\n disablePickers={disablePickers}\n changeHoursLabel={changeHoursLabel}\n changeMinutesLabel={changeMinutesLabel}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\n changeDayLabel={changeDayLabel}\n showNeighboringMonth={showNeighboringMonth}\n renderDayContent={renderDayContent}\n size={size}\n viewDate={viewDate}\n onHeaderChange={onHeaderChange}\n onNextMonth={onNextMonth}\n onPrevMonth={onPrevMonth}\n prevMonthIcon={prevMonthIcon}\n nextMonthIcon={nextMonthIcon}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n {...calendarTestsProps}\n />\n </Popper>\n )}\n </FormField>\n );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","startOfDay","startOfMinute","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isMatch","parse","useIsomorphicLayoutEffect","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","VisuallyHidden","useDateInputValue","sizeYClassNames","none","compact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","valueProp","defaultValue","onChange","calendarPlacement","calendarPlacementProp","style","className","doneButtonText","DoneButton","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthLabel","nextMonthLabel","showNeighboringMonth","size","changeMonthLabel","changeYearLabel","changeDayLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","renderDayContent","onCalendarOpenChanged","calendarTestsProps","dayFieldTestId","monthFieldTestId","yearFieldTestId","hourFieldTestId","minuteFieldTestId","id","onApply","renderCustomValue","timezone","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","updateValue","setInternalValue","getLastUpdatedValue","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","now","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","resetValueOnCloseCalendar","onCalendarChange","onDoneButtonClick","customValue","setCalendarPlacement","useState","after","hoverMode","label","div","Component","onKeyDown","normalize","onElementSelect","data-testid","Fragment","aria-hidden","targetRef","offsetByMainAxis","placement","onPlacementChange","autoUpdateOnTargetResize"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { startOfDay, startOfMinute } from 'date-fns';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { useDateInputValue } from './hooks';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n none: styles.sizeYNone,\n compact: styles.sizeYCompact,\n};\n\nexport type DateInputPropsTestsProps = {\n /*\n Передает атрибут `data-testid` для поля ввода дня\n /\n dayFieldTestId?: string;\n /\n Передает атрибут `data-testid` для поля ввода месяца\n /\n monthFieldTestId?: string;\n /\n Передает атрибут `data-testid` для поля ввода года\n /\n yearFieldTestId?: string;\n /\n Передает атрибут `data-testid` для поля ввода часа\n /\n hourFieldTestId?: string;\n /\n Передает атрибут `data-testid` для поля ввода минут\n /\n minuteFieldTestId?: string;\n /\n Передает атрибут `data-testid` для кнопки показа календаря.\n /\n showCalendarButtonTestId?: string;\n /\n Передает атрибут `data-testid` для кнопки очистки даты.\n /\n clearButtonTestId?: string;\n};\n\nexport interface DateInputProps\n extends Omit<\n React.InputHTMLAttributes<HTMLDivElement>,\n 'value' \| 'defaultValue' \| 'onChange' \| 'size'\n >,\n Pick<\n CalendarProps,\n \| 'disablePast'\n \| 'disableFuture'\n \| 'enableTime'\n \| 'shouldDisableDate'\n \| 'onChange'\n \| 'value'\n \| 'defaultValue'\n \| 'doneButtonText'\n \| 'DoneButton'\n \| 'weekStartsOn'\n \| 'disablePickers'\n \| 'changeHoursLabel'\n \| 'changeMinutesLabel'\n \| 'prevMonthLabel'\n \| 'nextMonthLabel'\n \| 'changeMonthLabel'\n \| 'changeYearLabel'\n \| 'changeDayLabel'\n \| 'showNeighboringMonth'\n \| 'size'\n \| 'viewDate'\n \| 'onHeaderChange'\n \| 'onNextMonth'\n \| 'onPrevMonth'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n \| 'minDateTime'\n \| 'maxDateTime'\n \| 'renderDayContent'\n >,\n HasRootRef<HTMLDivElement>,\n Omit<FormFieldProps, 'maxHeight'>,\n DateInputPropsTestsProps {\n /\n Передает атрибуты `data-testid` для интерактивных элементов в календаре\n /\n calendarTestsProps?: CalendarTestsProps;\n calendarPlacement?: PlacementWithAuto;\n closeOnChange?: boolean;\n clearFieldLabel?: string;\n showCalendarLabel?: string;\n disableCalendar?: boolean;\n onCalendarOpenChanged?: (opened: boolean) => void;\n /\n Колбэк срабатывающий при нажатии на кнопку \"Done\". Используется совместно с флагом `enableTime`.\n /\n onApply?: (value?: Date) => void;\n /\n Функция для кастомного форматирования отображаемого значения даты.\n * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.\n /\n renderCustomValue?: (date: Date \| undefined) => React.ReactNode;\n /\n Свойство для отображения времени в нужной таймзоне\n /\n timezone?: string;\n}\n\nconst elementsConfig = (index: number) => {\n let length = 2;\n let min = 1;\n let max = 0;\n\n switch (index) {\n case 0:\n max = 31;\n break;\n case 1:\n max = 12;\n break;\n case 2:\n max = 2100;\n min = 1900;\n length = 4;\n break;\n case 3:\n max = 23;\n break;\n case 4:\n max = 59;\n break;\n }\n\n return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n const newValue = ['', '', '', '', ''];\n if (value) {\n newValue[0] = String(value.getDate()).padStart(2, '0');\n newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n newValue[2] = String(value.getFullYear()).padStart(4, '0');\n newValue[3] = String(value.getHours()).padStart(2, '0');\n newValue[4] = String(value.getMinutes()).padStart(2, '0');\n }\n return newValue;\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n enableTime,\n shouldDisableDate,\n disableFuture,\n disablePast,\n minDateTime,\n maxDateTime,\n value: valueProp,\n defaultValue,\n onChange,\n calendarPlacement: calendarPlacementProp = 'bottom-start',\n style,\n className,\n doneButtonText,\n DoneButton,\n closeOnChange = true,\n disablePickers,\n getRootRef,\n name,\n autoFocus,\n disabled,\n onClick,\n onFocus,\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n showNeighboringMonth,\n size,\n changeMonthLabel = 'Изменить месяц',\n changeYearLabel = 'Изменить год',\n changeDayLabel = 'Изменить день',\n changeHoursLabel = 'Изменить час',\n changeMinutesLabel = 'Изменить минуту',\n clearFieldLabel = 'Очистить поле',\n showCalendarLabel = 'Показать календарь',\n viewDate,\n onHeaderChange,\n onNextMonth,\n onPrevMonth,\n prevMonthIcon,\n nextMonthIcon,\n disableCalendar = false,\n renderDayContent,\n onCalendarOpenChanged,\n calendarTestsProps,\n dayFieldTestId,\n monthFieldTestId,\n yearFieldTestId,\n hourFieldTestId,\n minuteFieldTestId,\n showCalendarButtonTestId,\n clearButtonTestId,\n id,\n onApply,\n renderCustomValue,\n timezone,\n ...props\n}: DateInputProps): React.ReactNode => {\n const daysRef = React.useRef<HTMLSpanElement>(null);\n const monthsRef = React.useRef<HTMLSpanElement>(null);\n const yearsRef = React.useRef<HTMLSpanElement>(null);\n const hoursRef = React.useRef<HTMLSpanElement>(null);\n const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } =\n useDateInputValue({\n value: valueProp,\n defaultValue,\n onChange,\n timezone,\n });\n\n const maxElement = enableTime ? 4 : 2;\n\n const onInternalValueChange = React.useCallback(\n (internalValue: string[]) => {\n for (let i = 0; i <= maxElement; i += 1) {\n if (internalValue[i].length < elementsConfig(i).length) {\n return;\n }\n }\n\n let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n let mask = 'dd.MM.yyyy';\n if (enableTime) {\n formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n mask += ' HH:mm';\n }\n\n if (isMatch(formattedValue, mask)) {\n const now = new Date();\n updateValue(\n parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),\n );\n }\n },\n [enableTime, maxElement, updateValue, value],\n );\n\n const refs = React.useMemo(\n () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n );\n\n const {\n rootRef,\n calendarRef,\n open,\n openCalendar,\n internalValue,\n handleKeyDown,\n setFocusedElement,\n handleFieldEnter,\n clear,\n removeFocusFromField,\n } = useDateInput({\n maxElement,\n refs,\n autoFocus,\n disabled,\n elementsConfig,\n onClear: clearValue,\n onInternalValueChange,\n getInternalValue,\n value,\n onCalendarOpenChanged,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const handleRootRef = useExternRef(rootRef, getRootRef);\n\n useIsomorphicLayoutEffect(\n function resetValueOnCloseCalendar() {\n if (!open) {\n setInternalValue(getLastUpdatedValue());\n }\n },\n [open, getLastUpdatedValue],\n );\n\n const onCalendarChange = React.useCallback(\n (value?: Date \| undefined) => {\n if (!value) {\n return;\n }\n if (enableTime) {\n setInternalValue(value);\n return;\n }\n updateValue(value);\n if (closeOnChange) {\n removeFocusFromField();\n }\n },\n [enableTime, updateValue, closeOnChange, setInternalValue, removeFocusFromField],\n );\n\n const onDoneButtonClick = React.useCallback(() => {\n if (!value) {\n return;\n }\n const newValue = updateValue(value);\n onApply?.(newValue);\n removeFocusFromField();\n }, [onApply, removeFocusFromField, updateValue, value]);\n\n const customValue = React.useMemo(\n () => !open && renderCustomValue?.(value \|\| undefined),\n [open, renderCustomValue, value],\n );\n\n // при переключении месяцев высота календаря может меняться,\n // чтобы календарь не прыгал при переключении месяцев каждый раз на\n // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n // на ней, пока помещается.\n const [calendarPlacement, setCalendarPlacement] =\n React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n return (\n <FormField\n style={style}\n className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n getRootRef={handleRootRef}\n after={\n value ? (\n <IconButton\n hoverMode=\"opacity\"\n label={clearFieldLabel}\n onClick={clear}\n data-testid={clearButtonTestId}\n >\n <Icon16Clear />\n </IconButton>\n ) : (\n <IconButton\n hoverMode=\"opacity\"\n label={showCalendarLabel}\n onClick={openCalendar}\n data-testid={showCalendarButtonTestId}\n >\n <Icon20CalendarOutline />\n </IconButton>\n )\n }\n disabled={disabled}\n onClick={callMultiple(handleFieldEnter, onClick)}\n onFocus={callMultiple(handleFieldEnter, onFocus)}\n {...props}\n >\n <div className={styles.wrapper}>\n <VisuallyHidden\n id={id}\n Component=\"input\"\n name={name}\n value={value ? format(value, enableTime ? \"dd.MM.yyyy'T'HH:mm\" : 'dd.MM.yyyy') : ''}\n />\n <Text\n className={classNames(styles.input, customValue && styles.hidden)}\n onKeyDown={handleKeyDown}\n // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n // из-за чего `.Typography--normalize` перебивает стили.\n normalize={false}\n Component=\"span\" // для <span> нормализация не нужна\n >\n <InputLike\n length={2}\n getRootRef={daysRef}\n index={0}\n onElementSelect={setFocusedElement}\n value={internalValue[0]}\n label={changeDayLabel}\n data-testid={dayFieldTestId}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={monthsRef}\n index={1}\n onElementSelect={setFocusedElement}\n value={internalValue[1]}\n label={changeMonthLabel}\n data-testid={monthFieldTestId}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={4}\n getRootRef={yearsRef}\n index={2}\n onElementSelect={setFocusedElement}\n value={internalValue[2]}\n label={changeYearLabel}\n data-testid={yearFieldTestId}\n />\n {enableTime && (\n <React.Fragment>\n <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={hoursRef}\n index={3}\n onElementSelect={setFocusedElement}\n value={internalValue[3]}\n label={changeHoursLabel}\n data-testid={hourFieldTestId}\n />\n <InputLikeDivider>:</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={minutesRef}\n index={4}\n onElementSelect={setFocusedElement}\n value={internalValue[4]}\n label={changeMinutesLabel}\n data-testid={minuteFieldTestId}\n />\n </React.Fragment>\n )}\n </Text>\n {customValue && (\n <Text className={styles.customValue} aria-hidden>\n {customValue}\n </Text>\n )}\n </div>\n {open && !disableCalendar && (\n <Popper\n targetRef={rootRef}\n offsetByMainAxis={8}\n placement={calendarPlacement}\n onPlacementChange={setCalendarPlacement}\n autoUpdateOnTargetResize\n >\n <Calendar\n value={value}\n onChange={onCalendarChange}\n enableTime={enableTime}\n disablePast={disablePast}\n disableFuture={disableFuture}\n shouldDisableDate={shouldDisableDate}\n onDoneButtonClick={onDoneButtonClick}\n getRootRef={calendarRef}\n doneButtonText={doneButtonText}\n DoneButton={DoneButton}\n disablePickers={disablePickers}\n changeHoursLabel={changeHoursLabel}\n changeMinutesLabel={changeMinutesLabel}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\n changeDayLabel={changeDayLabel}\n showNeighboringMonth={showNeighboringMonth}\n renderDayContent={renderDayContent}\n size={size}\n viewDate={viewDate}\n onHeaderChange={onHeaderChange}\n onNextMonth={onNextMonth}\n onPrevMonth={onPrevMonth}\n prevMonthIcon={prevMonthIcon}\n nextMonthIcon={nextMonthIcon}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n {...calendarTestsProps}\n />\n </Popper>\n )}\n </FormField>\n );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","startOfDay","startOfMinute","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isMatch","parse","useIsomorphicLayoutEffect","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","VisuallyHidden","useDateInputValue","sizeYClassNames","none","compact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","valueProp","defaultValue","onChange","calendarPlacement","calendarPlacementProp","style","className","doneButtonText","DoneButton","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthLabel","nextMonthLabel","showNeighboringMonth","size","changeMonthLabel","changeYearLabel","changeDayLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","renderDayContent","onCalendarOpenChanged","calendarTestsProps","dayFieldTestId","monthFieldTestId","yearFieldTestId","hourFieldTestId","minuteFieldTestId","showCalendarButtonTestId","clearButtonTestId","id","onApply","renderCustomValue","timezone","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","updateValue","setInternalValue","getLastUpdatedValue","clearValue","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","now","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","onClear","sizeY","handleRootRef","resetValueOnCloseCalendar","onCalendarChange","onDoneButtonClick","customValue","undefined","setCalendarPlacement","useState","after","hoverMode","label","data-testid","div","Component","onKeyDown","normalize","onElementSelect","Fragment","aria-hidden","targetRef","offsetByMainAxis","placement","onPlacementChange","autoUpdateOnTargetResize"],"mappings":"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"}

package/dist/components/DateInput/hooks.d.ts CHANGED Viewed

@@ -1,14 +1,15 @@
 interface UseDateInputValueOptions {
-    value?: Date;
-    defaultValue?: Date;
+    value?: Date | null;
+    defaultValue?: Date | null;
     onChange?: (value?: Date) => void;
     timezone?: string;
 }
 export interface UseDateInputValueReturn {
-    value?: Date;
-    updateValue: (v?: Date) => Date | undefined;
-    setInternalValue: (v?: Date) => void;
-    getLastUpdatedValue: () => Date | undefined;
+    value?: Date | null;
+    updateValue: (v: Date) => Date;
+    setInternalValue: (v?: Date | null) => void;
+    getLastUpdatedValue: () => Date | null | undefined;
+    clearValue: () => void;
 }
 export declare const useDateInputValue: ({ value, defaultValue, onChange, timezone, }: UseDateInputValueOptions) => UseDateInputValueReturn;
 export {};

package/dist/components/DateInput/hooks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/hooks.ts"],"names":[],"mappings":"AAGA,UAAU,wBAAwB;IAChC,KAAK,CAAC,EAAE,IAAI,CAAC;~~IACb~~,YAAY,CAAC,EAAE,IAAI,CAAC;~~IACpB~~,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,IAAI,CAAC;~~IACb~~,WAAW,EAAE,CAAC,CAAC,~~CAAC,~~EAAE,IAAI,KAAK,IAAI,~~GAAG,SAAS,~~CAAC;~~IAC5C~~,gBAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;~~IACrC~~,mBAAmB,EAAE,MAAM,IAAI,GAAG,SAAS,CAAC;~~CAC7C~~;AAyBD,eAAO,MAAM,iBAAiB,GAAI,8CAK/B,wBAAwB,KAAG,~~uBAsC7B~~,CAAC"}
1	+ {"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/hooks.ts"],"names":[],"mappings":"AAGA,UAAU,wBAAwB;IAChC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,gBAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,mBAAmB,EAAE,MAAM,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAyBD,eAAO,MAAM,iBAAiB,GAAI,8CAK/B,wBAAwB,KAAG,uBA8C7B,CAAC"}

package/dist/components/DateInput/hooks.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { convertDateFromTimeZone, convertDateToTimeZone } from "../../lib/date.js";
 const _convertDateToTimeZone = (date, timezone)=>{
-    return convertDateToTimeZone(date, timezone) || undefined;
+    return convertDateToTimeZone(date, timezone) || null;
 };
 const _convertDateFromTimeZone = (date, timezone)=>{
-    return convertDateFromTimeZone(date, timezone) || undefined;
+    return convertDateFromTimeZone(date, timezone);
 };
 const getStateValue = (defaultStateValue, value, defaultValue, timezone)=>{
     if (value !== undefined) {
@@ -16,13 +16,14 @@ const getStateValue = (defaultStateValue, value, defaultValue, timezone)=>{
     return _convertDateToTimeZone(defaultStateValue, timezone);
 };
 export const useDateInputValue = ({ value, defaultValue, onChange, timezone })=>{
+    const [internalValue, setInternalValue] = React.useState(getStateValue(null, value, defaultValue, timezone));
+    const lastUpdatedValueRef = React.useRef(getStateValue(null, value, defaultValue, timezone));
     const isControlled = value !== undefined;
-    const [internalValue, setInternalValue] = React.useState(getStateValue(undefined, value, defaultValue, timezone));
-    const lastUpdatedValueRef = React.useRef(getStateValue(undefined, value, defaultValue, timezone));
     React.useEffect(()=>{
         if (isControlled) {
-            setInternalValue(_convertDateToTimeZone(value, timezone));
-            lastUpdatedValueRef.current = _convertDateToTimeZone(value, timezone);
+            const newInternalValue = _convertDateToTimeZone(value, timezone);
+            setInternalValue(newInternalValue);
+            lastUpdatedValueRef.current = newInternalValue;
         }
     }, [
         isControlled,
@@ -43,11 +44,17 @@ export const useDateInputValue = ({ value, defaultValue, onChange, timezone })=>
         onChange,
         timezone
     ]);
+    const clearValue = ()=>{
+        setInternalValue(null);
+        lastUpdatedValueRef.current = null;
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+    };
     return {
         value: internalValue,
         updateValue,
         setInternalValue,
-        getLastUpdatedValue
+        getLastUpdatedValue,
+        clearValue
     };
 };

package/dist/components/DateInput/hooks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/DateInput/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';\n\ninterface UseDateInputValueOptions {\n value?: Date;\n defaultValue?: Date;\n onChange?: (value?: Date) => void;\n timezone?: string;\n}\n\nexport interface UseDateInputValueReturn {\n value?: Date;\n updateValue: (v?: Date) => Date ~~\| undefined~~;\n setInternalValue: (v?: Date) => void;\n getLastUpdatedValue: () => Date \| undefined;\n}\n\nconst _convertDateToTimeZone = (date?: Date, timezone?: string): Date \| ~~undefined~~ => {\n return convertDateToTimeZone(date, timezone) \|\| ~~undefined~~;\n};\n\nconst _convertDateFromTimeZone = (date?: Date, timezone?: string): Date ~~\| undefined~~ => {\n return convertDateFromTimeZone(date, timezone) \|\| ~~undefined~~;\n};\n\nconst getStateValue = (\n defaultStateValue?: Date,\n value?: Date,\n defaultValue?: Date,\n timezone?: string,\n): Date \| ~~undefined~~ => {\n if (value !== undefined) {\n return _convertDateToTimeZone(value, timezone);\n }\n if (defaultValue !== undefined) {\n return _convertDateToTimeZone(defaultValue, timezone);\n }\n return _convertDateToTimeZone(defaultStateValue, timezone);\n};\n\nexport const useDateInputValue = ({\n value,\n defaultValue,\n onChange,\n timezone,\n}: UseDateInputValueOptions): UseDateInputValueReturn => {\n const ~~isControlled = value !== undefined;\n\n const~~ [internalValue, setInternalValue] = React.useState<Date \| undefined>(\n getStateValue(~~undefined~~, value, defaultValue, timezone),\n );\n const lastUpdatedValueRef = React.useRef<Date \| undefined>(\n getStateValue(~~undefined~~, value, defaultValue, timezone),\n );\n\n React.useEffect(() => {\n if (isControlled) {\n ~~setInternalValue(~~_convertDateToTimeZone(value, timezone));\n lastUpdatedValueRef.current = ~~_convertDateToTimeZone(value, timezone)~~;\n }\n }, [isControlled, timezone, value]);\n\n const getLastUpdatedValue = React.useCallback(() => lastUpdatedValueRef.current, []);\n\n const updateValue = React.useCallback(\n (newValue?: Date) => {\n if (!isControlled) {\n setInternalValue(newValue);\n lastUpdatedValueRef.current = newValue;\n }\n const originalTimezoneValue = _convertDateFromTimeZone(newValue, timezone);\n onChange?.(originalTimezoneValue);\n return originalTimezoneValue;\n },\n [isControlled, onChange, timezone],\n );\n\n return {\n value: internalValue,\n updateValue,\n setInternalValue,\n getLastUpdatedValue,\n };\n};\n"],"names":["React","convertDateFromTimeZone","convertDateToTimeZone","_convertDateToTimeZone","date","timezone","~~undefined","~~_convertDateFromTimeZone","getStateValue","defaultStateValue","value","defaultValue","~~useDateInputValue~~","~~onChange~~","~~isControlled~~","internalValue","setInternalValue","useState","lastUpdatedValueRef","useRef","useEffect","current","getLastUpdatedValue","useCallback","updateValue","newValue","originalTimezoneValue"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,oBAAiB;~~AAgBhF~~,MAAMC,yBAAyB,CAACC,~~MAAaC~~;~~IAC3C~~,OAAOH,sBAAsBE,MAAMC,~~aAAaC~~;AAClD;AAEA,MAAMC,2BAA2B,~~CAACH~~,~~MAAaC~~;~~IAC7C~~,OAAOJ,wBAAwBG,MAAMC~~,aAAaC~~;~~AACpD~~;AAEA,MAAME,gBAAgB,CACpBC,mBACAC,OACAC,~~cACAN~~;IAEA,~~IAAIK~~,~~UAAUJ~~,WAAW;QACvB,~~OAAOH~~,~~uBAAuBO~~,~~OAAOL~~;IACvC;IACA,~~IAAIM~~,~~iBAAiBL~~,WAAW;QAC9B,~~OAAOH~~,~~uBAAuBQ~~,~~cAAcN~~;IAC9C;IACA,OAAOF,~~uBAAuBM~~,~~mBAAmBJ~~;AACnD;AAEA,OAAO,MAAMO,oBAAoB,CAAC,~~EAChCF~~,KAAK,EACLC,YAAY,~~EACZE~~,QAAQ,EACRR,QAAQ,EACiB;IACzB,~~MAAMS,eAAeJ,UAAUJ;IAE/B,~~MAAM,CAACS,eAAeC,iBAAiB,~~GAAGhB~~,~~MAAMiB~~,QAAQ,CACtDT,~~cAAcF~~,~~WAAWI~~,OAAOC,~~cAAcN~~;~~IAEhD~~,~~MAAMa~~,~~sBAAsBlB~~,~~MAAMmB~~,MAAM,CACtCX,~~cAAcF~~,~~WAAWI~~,OAAOC,~~cAAcN~~;~~IAGhDL~~,MAAMoB,SAAS,CAAC;QACd,~~IAAIN~~,cAAc;~~YAChBE~~,~~iBAAiBb~~,~~uBAAuBO~~,~~OAAOL~~;~~YAC/Ca~~,~~oBAAoBG~~,OAAO,~~GAAGlB,uBAAuBO,OAAOL~~;~~QAC9D~~;IACF,GAAG;~~QAACS~~;~~QAAcT~~;~~QAAUK~~;KAAM;IAElC,~~MAAMY~~,~~sBAAsBtB~~,~~MAAMuB~~,WAAW,CAAC,~~IAAML~~,~~oBAAoBG~~,OAAO,EAAE,EAAE;IAEnF,MAAMG,~~cAAcxB~~,~~MAAMuB~~,WAAW,CACnC,CAACE;QACC,IAAI,~~CAACX~~,cAAc;~~YACjBE~~,~~iBAAiBS~~;~~YACjBP~~,~~oBAAoBG~~,OAAO,GAAGI;QAChC;QACA,MAAMC,~~wBAAwBnB~~,~~yBAAyBkB~~,~~UAAUpB~~;QACjEQ,qBAAAA,+BAAAA,~~SAAWa~~;QACX,OAAOA;IACT,GACA;~~QAACZ~~;~~QAAcD~~;QAAUR;KAAS;IAGpC,OAAO;~~QACLK~~,OAAOK;~~QACPS~~;~~QACAR~~;~~QACAM~~;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/DateInput/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';\n\ninterface UseDateInputValueOptions {\n value?: Date \| null;\n defaultValue?: Date \| null;\n onChange?: (value?: Date) => void;\n timezone?: string;\n}\n\nexport interface UseDateInputValueReturn {\n value?: Date \| null;\n updateValue: (v: Date) => Date;\n setInternalValue: (v?: Date \| null) => void;\n getLastUpdatedValue: () => Date \| null \| undefined;\n clearValue: () => void;\n}\n\nconst _convertDateToTimeZone = (date: Date \| null, timezone?: string): Date \| null => {\n return convertDateToTimeZone(date, timezone) \|\| null;\n};\n\nconst _convertDateFromTimeZone = (date: Date, timezone?: string): Date => {\n return convertDateFromTimeZone(date, timezone) as Date;\n};\n\nconst getStateValue = (\n defaultStateValue: Date \| null,\n value?: Date \| null,\n defaultValue?: Date \| null,\n timezone?: string,\n): Date \| null => {\n if (value !== undefined) {\n return _convertDateToTimeZone(value, timezone);\n }\n if (defaultValue !== undefined) {\n return _convertDateToTimeZone(defaultValue, timezone);\n }\n return _convertDateToTimeZone(defaultStateValue, timezone);\n};\n\nexport const useDateInputValue = ({\n value,\n defaultValue,\n onChange,\n timezone,\n}: UseDateInputValueOptions): UseDateInputValueReturn => {\n const [internalValue, setInternalValue] = React.useState<Date \| null \| undefined>(\n getStateValue(null, value, defaultValue, timezone),\n );\n const lastUpdatedValueRef = React.useRef<Date \| null \| undefined>(\n getStateValue(null, value, defaultValue, timezone),\n );\n\n const isControlled = value !== undefined;\n\n React.useEffect(() => {\n if (isControlled) {\n const newInternalValue = _convertDateToTimeZone(value, timezone);\n setInternalValue(newInternalValue);\n lastUpdatedValueRef.current = newInternalValue;\n }\n }, [isControlled, timezone, value]);\n\n const getLastUpdatedValue = React.useCallback(() => lastUpdatedValueRef.current, []);\n\n const updateValue = React.useCallback(\n (newValue: Date) => {\n if (!isControlled) {\n setInternalValue(newValue);\n lastUpdatedValueRef.current = newValue;\n }\n const originalTimezoneValue = _convertDateFromTimeZone(newValue, timezone);\n onChange?.(originalTimezoneValue);\n return originalTimezoneValue;\n },\n [isControlled, onChange, timezone],\n );\n\n const clearValue = () => {\n setInternalValue(null);\n lastUpdatedValueRef.current = null;\n onChange?.(undefined);\n };\n\n return {\n value: internalValue,\n updateValue,\n setInternalValue,\n getLastUpdatedValue,\n clearValue,\n };\n};\n"],"names":["React","convertDateFromTimeZone","convertDateToTimeZone","_convertDateToTimeZone","date","timezone","_convertDateFromTimeZone","getStateValue","defaultStateValue","value","defaultValue","undefined","useDateInputValue","onChange","internalValue","setInternalValue","useState","lastUpdatedValueRef","useRef","isControlled","useEffect","newInternalValue","current","getLastUpdatedValue","useCallback","updateValue","newValue","originalTimezoneValue","clearValue"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,oBAAiB;AAiBhF,MAAMC,yBAAyB,CAACC,MAAmBC;IACjD,OAAOH,sBAAsBE,MAAMC,aAAa;AAClD;AAEA,MAAMC,2BAA2B,CAACF,MAAYC;IAC5C,OAAOJ,wBAAwBG,MAAMC;AACvC;AAEA,MAAME,gBAAgB,CACpBC,mBACAC,OACAC,cACAL;IAEA,IAAII,UAAUE,WAAW;QACvB,OAAOR,uBAAuBM,OAAOJ;IACvC;IACA,IAAIK,iBAAiBC,WAAW;QAC9B,OAAOR,uBAAuBO,cAAcL;IAC9C;IACA,OAAOF,uBAAuBK,mBAAmBH;AACnD;AAEA,OAAO,MAAMO,oBAAoB,CAAC,EAChCH,KAAK,EACLC,YAAY,EACZG,QAAQ,EACRR,QAAQ,EACiB;IACzB,MAAM,CAACS,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CACtDT,cAAc,MAAME,OAAOC,cAAcL;IAE3C,MAAMY,sBAAsBjB,MAAMkB,MAAM,CACtCX,cAAc,MAAME,OAAOC,cAAcL;IAG3C,MAAMc,eAAeV,UAAUE;IAE/BX,MAAMoB,SAAS,CAAC;QACd,IAAID,cAAc;YAChB,MAAME,mBAAmBlB,uBAAuBM,OAAOJ;YACvDU,iBAAiBM;YACjBJ,oBAAoBK,OAAO,GAAGD;QAChC;IACF,GAAG;QAACF;QAAcd;QAAUI;KAAM;IAElC,MAAMc,sBAAsBvB,MAAMwB,WAAW,CAAC,IAAMP,oBAAoBK,OAAO,EAAE,EAAE;IAEnF,MAAMG,cAAczB,MAAMwB,WAAW,CACnC,CAACE;QACC,IAAI,CAACP,cAAc;YACjBJ,iBAAiBW;YACjBT,oBAAoBK,OAAO,GAAGI;QAChC;QACA,MAAMC,wBAAwBrB,yBAAyBoB,UAAUrB;QACjEQ,qBAAAA,+BAAAA,SAAWc;QACX,OAAOA;IACT,GACA;QAACR;QAAcN;QAAUR;KAAS;IAGpC,MAAMuB,aAAa;QACjBb,iBAAiB;QACjBE,oBAAoBK,OAAO,GAAG;QAC9BT,qBAAAA,+BAAAA,SAAWF;IACb;IAEA,OAAO;QACLF,OAAOK;QACPW;QACAV;QACAQ;QACAK;IACF;AACF,EAAE"}

package/dist/components/DateRangeInput/DateRangeInput.d.ts CHANGED Viewed

@@ -26,6 +26,14 @@ export type DateRangeInputTestsProps = {
      * Передает атрибуты `data-testid` для полей ввода конечной даты
      */
     endDateTestsProps?: DateTestsProps;
+    /**
+     * Передает атрибут `data-testid` для кнопки показа календаря.
+     */
+    showCalendarButtonTestId?: string;
+    /**
+     * Передает атрибут `data-testid` для кнопки очистки даты.
+     */
+    clearButtonTestId?: string;
 };
 export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>, Pick<CalendarRangeProps, 'disablePast' | 'disableFuture' | 'shouldDisableDate' | 'onChange' | 'value' | 'defaultValue' | 'weekStartsOn' | 'disablePickers' | 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'changeDayLabel' | 'prevMonthIcon' | 'nextMonthIcon' | 'renderDayContent'>, HasRootRef<HTMLDivElement>, Omit<FormFieldProps, 'maxHeight'>, DateRangeInputTestsProps {
     /**
@@ -48,6 +56,6 @@ export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTML
 /**
  * @see https://vkcom.github.io/VKUI/#/DateRangeInput
  */
-export declare const DateRangeInput: ({ shouldDisableDate, disableFuture, disablePast, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp, style, className, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, changeDayLabel, changeMonthLabel, changeYearLabel, changeStartDayLabel, changeStartMonthLabel, changeStartYearLabel, changeEndDayLabel, changeEndMonthLabel, changeEndYearLabel, clearFieldLabel, showCalendarLabel, prevMonthIcon, nextMonthIcon, disableCalendar, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps, id, ...props }: DateRangeInputProps) => React.ReactNode;
+export declare const DateRangeInput: ({ shouldDisableDate, disableFuture, disablePast, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp, style, className, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, changeDayLabel, changeMonthLabel, changeYearLabel, changeStartDayLabel, changeStartMonthLabel, changeStartYearLabel, changeEndDayLabel, changeEndMonthLabel, changeEndYearLabel, clearFieldLabel, showCalendarLabel, prevMonthIcon, nextMonthIcon, disableCalendar, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps, clearButtonTestId, showCalendarButtonTestId, id, ...props }: DateRangeInputProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=DateRangeInput.d.ts.map

package/dist/components/DateRangeInput/DateRangeInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAE7B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAexE,KAAK,cAAc,GAAG;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,mBAAmB,CAAC,EAAE,cAAc,CAAC;IACrC;;OAEG;IACH,iBAAiB,CAAC,EAAE,cAAc,CAAC;~~CACpC~~,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,EAC5F,IAAI,CACF,kBAAkB,EAChB,aAAa,GACb,eAAe,GACf,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,kBAAkB,CACrB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,wBAAwB;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,uBAAuB,CAAC;IAC7C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA0CD;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,~~woBAyC5B~~,mBAAmB,KAAG,KAAK,CAAC,~~SA6O9B~~,CAAC"}
1	+ {"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAE7B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAexE,KAAK,cAAc,GAAG;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,mBAAmB,CAAC,EAAE,cAAc,CAAC;IACrC;;OAEG;IACH,iBAAiB,CAAC,EAAE,cAAc,CAAC;IACnC;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,EAC5F,IAAI,CACF,kBAAkB,EAChB,aAAa,GACb,eAAe,GACf,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,kBAAkB,CACrB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,wBAAwB;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,uBAAuB,CAAC;IAC7C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA0CD;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,qrBA2C5B,mBAAmB,KAAG,KAAK,CAAC,SAwP9B,CAAC"}

package/dist/components/DateRangeInput/DateRangeInput.js CHANGED Viewed

@@ -75,7 +75,7 @@ const getInternalValue = (value)=>{
 /**
  * @see https://vkcom.github.io/VKUI/#/DateRangeInput
  */ export const DateRangeInput = (_param)=>{
-    var { shouldDisableDate, disableFuture, disablePast, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp = 'bottom-start', style, className, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'Изменить день', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeStartDayLabel = 'Изменить день начала', changeStartMonthLabel = 'Изменить месяц начала', changeStartYearLabel = 'Изменить год начала', changeEndDayLabel = 'Изменить день окончания', changeEndMonthLabel = 'Изменить месяц окончания', changeEndYearLabel = 'Изменить год окончания', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', prevMonthIcon, nextMonthIcon, disableCalendar = false, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps, id } = _param, props = _object_without_properties(_param, [
+    var { shouldDisableDate, disableFuture, disablePast, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp = 'bottom-start', style, className, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'Изменить день', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeStartDayLabel = 'Изменить день начала', changeStartMonthLabel = 'Изменить месяц начала', changeStartYearLabel = 'Изменить год начала', changeEndDayLabel = 'Изменить день окончания', changeEndMonthLabel = 'Изменить месяц окончания', changeEndYearLabel = 'Изменить год окончания', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', prevMonthIcon, nextMonthIcon, disableCalendar = false, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps, clearButtonTestId, showCalendarButtonTestId, id } = _param, props = _object_without_properties(_param, [
         "shouldDisableDate",
         "disableFuture",
         "disablePast",
@@ -114,6 +114,8 @@ const getInternalValue = (value)=>{
         "calendarTestsProps",
         "startDateTestsProps",
         "endDateTestsProps",
+        "clearButtonTestId",
+        "showCalendarButtonTestId",
         "id"
     ]);
     const daysStartRef = React.useRef(null);
@@ -122,10 +124,13 @@ const getInternalValue = (value)=>{
     const daysEndRef = React.useRef(null);
     const monthsEndRef = React.useRef(null);
     const yearsEndRef = React.useRef(null);
+    const _onChange = React.useCallback((newValue)=>onChange === null || onChange === void 0 ? void 0 : onChange(newValue || undefined), [
+        onChange
+    ]);
     const [value, updateValue] = useCustomEnsuredControl({
         value: valueProp,
         defaultValue,
-        onChange
+        onChange: _onChange
     });
     const onInternalValueChange = React.useCallback((internalValue)=>{
         let isStartValid = true;
@@ -181,13 +186,16 @@ const getInternalValue = (value)=>{
         monthsEndRef,
         yearsEndRef
     ]);
+    const onClear = React.useCallback(()=>updateValue(undefined), [
+        updateValue
+    ]);
     const { rootRef, calendarRef, open, openCalendar, closeCalendar, internalValue, handleKeyDown, setFocusedElement, handleFieldEnter, clear, removeFocusFromField } = useDateInput({
         maxElement: 5,
         refs,
         autoFocus,
         disabled,
         elementsConfig,
-        onChange: updateValue,
+        onClear,
         onInternalValueChange,
         getInternalValue,
         value,
@@ -218,6 +226,7 @@ const getInternalValue = (value)=>{
         after: value ? /*#__PURE__*/ _jsxs(IconButton, {
             hoverMode: "opacity",
             onClick: clear,
+            "data-testid": clearButtonTestId,
             children: [
                 /*#__PURE__*/ _jsx(VisuallyHidden, {
                     children: clearFieldLabel
@@ -227,6 +236,7 @@ const getInternalValue = (value)=>{
         }) : /*#__PURE__*/ _jsxs(IconButton, {
             hoverMode: "opacity",
             onClick: openCalendar,
+            "data-testid": showCalendarButtonTestId,
             children: [
                 /*#__PURE__*/ _jsx(VisuallyHidden, {
                     children: showCalendarLabel