@gravity-ui/date-components 1.0.0

package/dist/esm/components/DateField/types.d.ts

@@ -0,0 +1,67 @@
+export type DateFieldSectionType = Exclude<Intl.DateTimeFormatPartTypes, 'era'>;
+export type DateFormatTokenMap = {
+    [formatToken: string]: DateFieldSectionType | {
+        sectionType: DateFieldSectionType;
+        contentType: 'digit' | 'letter';
+    };
+};
+export interface DateFieldSection {
+    value: number | undefined;
+    /**
+     * Value of the section, as rendered inside the input.
+     * For example, in the date `May 25, 1995`, the value of the month section is "May".
+     */
+    textValue: string;
+    /**
+     * Format token used to parse the value of this section from the date object.
+     * For example, in the format `MMMM D, YYYY`, the format of the month section is "MMMM".
+     */
+    format: string;
+    /**
+     * Placeholder rendered when the value of this section is empty.
+     */
+    placeholder: string;
+    /**
+     * Type of the section.
+     */
+    type: DateFieldSectionType;
+    /**
+     * Type of content of the section.
+     * Will determine if we should apply a digit-based editing or a letter-based editing.
+     */
+    contentType: 'digit' | 'letter';
+    /**
+     * Available values
+     */
+    options?: string[];
+    /** The minimum numeric value for the segment, if applicable. */
+    minValue?: number;
+    /** The maximum numeric value for the segment, if applicable. */
+    maxValue?: number;
+    /**
+     * If `true`, the value of this section is supposed to have leading zeroes.
+     * For example, the value `1` should be rendered as "01" instead of "1".
+     */
+    hasLeadingZeros: boolean;
+    /**
+     * If `true`, the section value has been modified since the last time the sections were generated from a valid date.
+     * When we can generate a valid date from the section, we don't directly pass it to `onChange`,
+     * Otherwise, we would lose all the information contained in the original date, things like:
+     * - time if the format does not contain it
+     * - timezone / UTC
+     *
+     * To avoid losing that information, we transfer the values of the modified sections from the newly generated date to the original date.
+     */
+    modified: boolean;
+    /**
+     * Start index of the section in the format
+     */
+    start: number;
+    /**
+     * End index of the section in the format
+     */
+    end: number;
+    previousEditableSection: number;
+    nextEditableSection: number;
+}
+export type DateFieldSectionWithoutPosition<TSection extends DateFieldSection = DateFieldSection> = Omit<TSection, 'start' | 'end' | 'value' | 'textValue' | 'modified' | 'previousEditableSection' | 'nextEditableSection'>;

package/dist/esm/components/DateField/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/DateField/utils.d.ts

@@ -0,0 +1,14 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldSectionWithoutPosition } from './types';
+export declare const isMac: boolean;
+export declare const CtrlCmd: string;
+export declare function expandFormat(format: string): string;
+export declare function splitFormatIntoSections(format: string): DateFieldSectionWithoutPosition[];
+interface PlaceholderValueOptions {
+    placeholderValue?: DateTime;
+    timeZone?: string;
+}
+export declare function createPlaceholderValue({ placeholderValue, timeZone }: PlaceholderValueOptions): DateTime;
+export declare function isInvalid(value: DateTime | null | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined): boolean;
+export declare function mergeDateTime(date: DateTime, time: DateTime): DateTime;
+export {};

package/dist/esm/components/DateField/utils.js

@@ -0,0 +1,268 @@
+import { dateTime, settings } from '@gravity-ui/date-utils';
+import { i18n } from './i18n';
+export const isMac = window.navigator.userAgent.indexOf('Macintosh') >= 0;
+export const CtrlCmd = isMac ? 'metaKey' : 'ctrlKey';
+export function expandFormat(format) {
+    const localeFormats = settings.getLocaleData().formats;
+    const getShortLocalizedFormatFromLongLocalizedFormat = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, escapeSequence, localizedFormat) => escapeSequence || localizedFormat.slice(1));
+    return format.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (_, escapeSequence, localizedFormat) => {
+        const LongLocalizedFormat = localizedFormat && localizedFormat.toUpperCase();
+        return (escapeSequence ||
+            localeFormats[localizedFormat] ||
+            getShortLocalizedFormatFromLongLocalizedFormat(localeFormats[LongLocalizedFormat]));
+    });
+}
+const escapedCharacters = { start: '[', end: ']' };
+const formatTokenMap = {
+    // Year
+    YY: 'year',
+    YYYY: 'year',
+    // Month
+    M: 'month',
+    MM: 'month',
+    MMM: { sectionType: 'month', contentType: 'letter' },
+    MMMM: { sectionType: 'month', contentType: 'letter' },
+    // Day of the month
+    D: 'day',
+    DD: 'day',
+    Do: 'day',
+    // Day of the week
+    d: 'weekday',
+    dd: { sectionType: 'weekday', contentType: 'letter' },
+    ddd: { sectionType: 'weekday', contentType: 'letter' },
+    dddd: { sectionType: 'weekday', contentType: 'letter' },
+    // Day period AM, PM
+    A: { sectionType: 'dayPeriod', contentType: 'letter' },
+    a: { sectionType: 'dayPeriod', contentType: 'letter' },
+    // Hours
+    H: 'hour',
+    HH: 'hour',
+    h: 'hour',
+    hh: 'hour',
+    // Minutes
+    m: 'minute',
+    mm: 'minute',
+    // Seconds
+    s: 'second',
+    ss: 'second',
+    // Timezone
+    z: { sectionType: 'timeZoneName', contentType: 'letter' },
+    zzz: { sectionType: 'timeZoneName', contentType: 'letter' },
+    Z: { sectionType: 'timeZoneName', contentType: 'letter' },
+    ZZ: { sectionType: 'timeZoneName', contentType: 'letter' },
+};
+function getDateSectionConfigFromFormatToken(formatToken) {
+    const config = formatTokenMap[formatToken];
+    if (!config) {
+        console.error([
+            `The token "${formatToken}" is not supported by the Date field.`,
+            'Please try using another token.',
+        ].join('\n'));
+        return {
+            type: 'literal',
+            contentType: 'letter',
+        };
+    }
+    if (typeof config === 'string') {
+        return {
+            type: config,
+            contentType: 'digit',
+        };
+    }
+    return {
+        type: config.sectionType,
+        contentType: config.contentType,
+    };
+}
+function isFourDigitYearFormat(format) {
+    return dateTime().format(format).length === 4;
+}
+function doesSectionHaveLeadingZeros(contentType, sectionType, format) {
+    if (contentType !== 'digit') {
+        return false;
+    }
+    switch (sectionType) {
+        case 'year': {
+            if (isFourDigitYearFormat(format)) {
+                const formatted0001 = dateTime().set('year', 1).format(format);
+                return formatted0001 === '0001';
+            }
+            const formatted2001 = dateTime().set('year', 2001).format(format);
+            return formatted2001 === '01';
+        }
+        case 'month': {
+            return dateTime().startOf('year').format(format).length > 1;
+        }
+        case 'day': {
+            return dateTime().startOf('month').format(format).length > 1;
+        }
+        case 'weekday': {
+            return dateTime().startOf('week').format(format).length > 1;
+        }
+        case 'hour': {
+            return dateTime().set('hour', 1).format(format).length > 1;
+        }
+        case 'minute': {
+            return dateTime().set('minute', 1).format(format).length > 1;
+        }
+        case 'second': {
+            return dateTime().set('second', 1).format(format).length > 1;
+        }
+        default: {
+            throw new Error('Invalid section type');
+        }
+    }
+}
+function getSectionPlaceholder(sectionConfig, currentTokenValue) {
+    switch (sectionConfig.type) {
+        case 'year': {
+            return i18n('year_placeholder').repeat(dateTime().format(currentTokenValue).length);
+        }
+        case 'month': {
+            return i18n('month_placeholder').repeat(sectionConfig.contentType === 'letter' ? 4 : 2);
+        }
+        case 'day': {
+            return i18n('day_placeholder').repeat(2);
+        }
+        case 'weekday': {
+            return i18n('weekday_placeholder').repeat(sectionConfig.contentType === 'letter' ? 4 : 2);
+        }
+        case 'hour': {
+            return i18n('hour_placeholder').repeat(2);
+        }
+        case 'minute': {
+            return i18n('minute_placeholder').repeat(2);
+        }
+        case 'second': {
+            return i18n('second_placeholder').repeat(2);
+        }
+        case 'dayPeriod': {
+            return i18n('dayPeriod_placeholder');
+        }
+        default: {
+            return currentTokenValue;
+        }
+    }
+}
+export function splitFormatIntoSections(format) {
+    const sections = [];
+    const expandedFormat = expandFormat(format);
+    let currentTokenValue = '';
+    let isSeparator = false;
+    let isInEscapeBoundary = false;
+    for (let i = 0; i < expandedFormat.length; i++) {
+        const char = expandedFormat[i];
+        if (isInEscapeBoundary) {
+            if (char === escapedCharacters.end) {
+                isInEscapeBoundary = false;
+                continue;
+            }
+            currentTokenValue += char;
+        }
+        else if (char.match(/[a-zA-Z]/)) {
+            if (isSeparator) {
+                addLiteralSection(sections, currentTokenValue);
+                currentTokenValue = '';
+            }
+            isSeparator = false;
+            currentTokenValue += char;
+        }
+        else {
+            if (!isSeparator) {
+                addFormatSection(sections, currentTokenValue);
+                currentTokenValue = '';
+            }
+            isSeparator = true;
+            if (char === escapedCharacters.start) {
+                isInEscapeBoundary = true;
+            }
+            else {
+                currentTokenValue += char;
+            }
+        }
+    }
+    if (currentTokenValue) {
+        if (isSeparator) {
+            addLiteralSection(sections, currentTokenValue);
+        }
+        else {
+            addFormatSection(sections, currentTokenValue);
+        }
+    }
+    return sections;
+}
+function addFormatSection(sections, token) {
+    if (!token) {
+        return;
+    }
+    const sectionConfig = getDateSectionConfigFromFormatToken(token);
+    const hasLeadingZeros = doesSectionHaveLeadingZeros(sectionConfig.contentType, sectionConfig.type, token);
+    sections.push(Object.assign(Object.assign({}, sectionConfig), { format: token, placeholder: getSectionPlaceholder(sectionConfig, token), options: getSectionOptions(sectionConfig, token), hasLeadingZeros }));
+}
+function addLiteralSection(sections, token) {
+    if (!token) {
+        return;
+    }
+    sections.push({
+        type: 'literal',
+        contentType: 'letter',
+        format: token,
+        placeholder: token,
+        hasLeadingZeros: false,
+    });
+}
+function getSectionOptions(section, token) {
+    switch (section.type) {
+        case 'month': {
+            const format = section.contentType === 'letter' ? token : 'MMMM';
+            let date = dateTime().startOf('year');
+            const options = [];
+            for (let i = 0; i < 12; i++) {
+                options.push(date.format(format).toLocaleUpperCase());
+                date = date.add(1, 'months');
+            }
+            return options;
+        }
+        case 'dayPeriod': {
+            const amDayPeriod = dateTime().hour(0);
+            const pmDayPeriod = amDayPeriod.hour(12);
+            const options = [
+                amDayPeriod.format(token).toLocaleUpperCase(),
+                pmDayPeriod.format(token).toLocaleUpperCase(),
+            ];
+            return options;
+        }
+        case 'weekday': {
+            const format = section.contentType === 'letter' ? token : 'dddd';
+            let date = dateTime().day(0);
+            const options = [];
+            for (let i = 0; i < 7; i++) {
+                options.push(date.format(format).toLocaleUpperCase());
+                date = date.add(1, 'day');
+            }
+            return options;
+        }
+    }
+    return undefined;
+}
+export function createPlaceholderValue({ placeholderValue, timeZone }) {
+    return (placeholderValue !== null && placeholderValue !== void 0 ? placeholderValue : dateTime({ timeZone }).set('hour', 0).set('minute', 0).set('second', 0));
+}
+export function isInvalid(value, minValue, maxValue) {
+    if (!value) {
+        return false;
+    }
+    if (minValue && value.isBefore(minValue)) {
+        return true;
+    }
+    if (maxValue && maxValue.isBefore(value)) {
+        return true;
+    }
+    return false;
+}
+export function mergeDateTime(date, time) {
+    return date
+        .set('hours', time.hour())
+        .set('minutes', time.minute())
+        .set('seconds', time.second());
+}

package/dist/esm/components/DatePicker/DatePicker.css

@@ -0,0 +1,19 @@
+.g-date-date-picker {
+  position: relative;
+  display: inline-block;
+}
+.g-date-date-picker__field {
+  width: 100%;
+}
+.g-date-date-picker__field_mobile {
+  pointer-events: none;
+}
+.g-date-date-picker__popup-content {
+  outline: none;
+}
+.g-date-date-picker__time-field {
+  width: 100%;
+}
+.g-date-date-picker__time-field-wrapper {
+  padding: 10px;
+}

package/dist/esm/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,5 @@
+import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import './DatePicker.css';
+export interface DatePickerProps extends DateFieldBase, TextInputProps, FocusableProps, KeyboardEvents, DomProps, StyleProps, AccessibilityProps {
+}
+export declare function DatePicker({ value, defaultValue, onUpdate, className, onFocus, onBlur, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/DatePicker/DatePicker.js

@@ -0,0 +1,59 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { TextInput, useFocusWithin, useMobile } from '@gravity-ui/uikit';
+import { useDateFieldProps, useDateFieldState } from '../DateField';
+import { DesktopCalendar, DesktopCalendarButton } from './DesktopCalendar';
+import { MobileCalendar, MobileCalendarIcon } from './MobileCalendar';
+import { useDatePickerState } from './hooks/useDatePickerState';
+import { b } from './utils';
+import './DatePicker.css';
+export function DatePicker(_a) {
+    var { value, defaultValue, onUpdate, className, onFocus, onBlur } = _a, props = __rest(_a, ["value", "defaultValue", "onUpdate", "className", "onFocus", "onBlur"]);
+    const anchorRef = React.useRef(null);
+    const state = useDatePickerState(Object.assign(Object.assign({}, props), { value,
+        defaultValue,
+        onUpdate }));
+    const [isMobile] = useMobile();
+    const [isActive, setActive] = React.useState(false);
+    const { focusWithinProps } = useFocusWithin({
+        onFocusWithin: onFocus,
+        onBlurWithin: onBlur,
+        onFocusWithinChange(isFocusWithin) {
+            setActive(isFocusWithin);
+        },
+    });
+    const fieldState = useDateFieldState({
+        value: state.value,
+        onUpdate: state.setValue,
+        disabled: state.disabled,
+        readOnly: state.readOnly,
+        validationState: props.validationState,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        isDateUnavailable: props.isDateUnavailable,
+        format: state.format,
+        placeholderValue: props.placeholderValue,
+        timeZone: props.timeZone,
+    });
+    const { inputProps } = useDateFieldProps(fieldState, props);
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    _jsxs("div", Object.assign({ ref: anchorRef, className: b(null, className), style: props.style }, focusWithinProps, { role: "group", "aria-disabled": state.disabled || undefined, onKeyDown: (e) => {
+            if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                e.preventDefault();
+                e.stopPropagation();
+                state.setOpen(true);
+            }
+        }, children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (_jsx(DesktopCalendar, { anchorRef: anchorRef, props: props, state: state })), _jsx(TextInput, Object.assign({}, inputProps, { value: fieldState.isEmpty && !isActive && props.placeholder ? '' : inputProps.value, className: b('field', { mobile: isMobile }), hasClear: !isMobile && inputProps.hasClear, rightContent: isMobile ? (_jsx(MobileCalendarIcon, { props: props, state: state })) : (_jsx(DesktopCalendarButton, { props: props, state: state })) }))] })));
+}

package/dist/esm/components/DatePicker/DesktopCalendar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { DatePickerProps } from './DatePicker';
+import type { DatePickerState } from './hooks/useDatePickerState';
+interface DesktopCalendarProps {
+    anchorRef: React.RefObject<HTMLElement>;
+    props: DatePickerProps;
+    state: DatePickerState;
+}
+export declare function DesktopCalendar({ anchorRef, props, state }: DesktopCalendarProps): import("react/jsx-runtime").JSX.Element | null;
+interface DesktopCalendarButtonProps {
+    props: DatePickerProps;
+    state: DatePickerState;
+}
+export declare function DesktopCalendarButton({ props, state }: DesktopCalendarButtonProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/components/DatePicker/DesktopCalendar.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Calendar as CalendarIcon } from '@gravity-ui/icons';
+import { Button, Icon, Popup, useFocusWithin } from '@gravity-ui/uikit';
+import { Calendar } from '../Calendar';
+import { DateField } from '../DateField';
+import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
+import { i18n } from './i18n';
+import { b } from './utils';
+export function DesktopCalendar({ anchorRef, props, state }) {
+    var _a;
+    const { focusWithinProps } = useFocusWithin({
+        isDisabled: !state.isOpen,
+        onBlurWithin: () => {
+            state.setOpen(false);
+        },
+    });
+    if (!state.hasDate) {
+        return null;
+    }
+    return (_jsx(Popup, { open: state.isOpen, anchorRef: anchorRef, onClose: () => {
+            state.setOpen(false);
+        }, restoreFocus: true, children: _jsxs("div", Object.assign({}, focusWithinProps, { className: b('popup-content'), children: [_jsx(Calendar
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                , { 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: true, size: props.size === 's' ? 'm' : props.size, disabled: props.disabled, readOnly: props.readOnly, onUpdate: (d) => {
+                        state.setDateValue(d);
+                    }, defaultFocusedValue: (_a = state.dateValue) !== null && _a !== void 0 ? _a : undefined, value: state.dateValue, minValue: props.minValue, maxValue: props.maxValue, isDateUnavailable: props.isDateUnavailable, timeZone: props.timeZone }), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, { className: b('time-field'), size: props.size, readOnly: props.readOnly, value: state.timeValue, onUpdate: state.setTimeValue, placeholderValue: props.placeholderValue, minValue: props.minValue, maxValue: props.maxValue, timeZone: props.timeZone, format: state.timeFormat }) }))] })) }));
+}
+export function DesktopCalendarButton({ props, state }) {
+    const wasOpenBeforeClickRef = React.useRef(false);
+    if (!state.hasDate) {
+        return null;
+    }
+    return (_jsx(Button, { view: "flat", size: getButtonSizeForInput(props.size), disabled: props.disabled, extraProps: {
+            'aria-label': i18n('Calendar'),
+            'aria-haspopup': 'dialog',
+            'aria-expanded': state.isOpen,
+        }, onFocus: () => {
+            wasOpenBeforeClickRef.current = state.isOpen;
+        }, onClick: () => {
+            if (!wasOpenBeforeClickRef.current) {
+                state.setOpen(true);
+            }
+            wasOpenBeforeClickRef.current = false;
+        }, children: _jsx(Icon, { data: CalendarIcon }) }));
+}

package/dist/esm/components/DatePicker/MobileCalendar.css

@@ -0,0 +1,49 @@
+.g-date-mobile-calendar {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+}
+.g-date-mobile-calendar_size_xs {
+  width: 20px;
+  height: 20px;
+}
+.g-date-mobile-calendar_size_m {
+  width: 28px;
+  height: 28px;
+}
+.g-date-mobile-calendar_size_l {
+  width: 36px;
+  height: 36px;
+}
+.g-date-mobile-calendar__button {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.g-date-mobile-calendar__input {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+  border: none;
+}
+.g-date-mobile-calendar__input::-webkit-calendar-picker-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}

package/dist/esm/components/DatePicker/MobileCalendar.d.ts

@@ -0,0 +1,14 @@
+import type { DatePickerProps } from './DatePicker';
+import type { DatePickerState } from './hooks/useDatePickerState';
+import './MobileCalendar.css';
+interface MobileCalendarProps {
+    props: DatePickerProps;
+    state: DatePickerState;
+}
+export declare function MobileCalendar({ props, state }: MobileCalendarProps): import("react/jsx-runtime").JSX.Element;
+interface MobileCalendarIconProps {
+    props: DatePickerProps;
+    state: DatePickerState;
+}
+export declare function MobileCalendarIcon({ props }: MobileCalendarIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/DatePicker/MobileCalendar.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { dateTime } from '@gravity-ui/date-utils';
+import { Calendar as CalendarIcon } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
+import { createPlaceholderValue, mergeDateTime } from '../DateField/utils';
+import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
+import './MobileCalendar.css';
+const b = block('mobile-calendar');
+export function MobileCalendar({ props, state }) {
+    let type = 'date';
+    if (state.hasTime && state.hasDate) {
+        type = 'datetime-local';
+    }
+    else if (state.hasTime) {
+        type = 'time';
+    }
+    return (_jsx("input", { className: b('input'), disabled: props.disabled, type: type, value: formatNative(state.value || props.placeholderValue, type), id: props.id, min: formatNative(props.minValue, type), max: formatNative(props.maxValue, type), tabIndex: -1, onChange: (e) => {
+            if (props.readOnly) {
+                return;
+            }
+            const newValue = e.target.value;
+            if (newValue) {
+                const localDate = dateTime({ input: newValue, format: getDateFormat(type) });
+                let newDate = state.hasDate
+                    ? dateTime({
+                        input: newValue,
+                        format: getDateFormat(type),
+                        timeZone: props.timeZone,
+                    })
+                    : createPlaceholderValue({
+                        placeholderValue: props.placeholderValue,
+                        timeZone: props.timeZone,
+                    });
+                if (state.hasTime) {
+                    newDate = mergeDateTime(newDate, localDate);
+                }
+                else if (state.dateValue) {
+                    newDate = mergeDateTime(newDate, state.dateValue);
+                }
+                else {
+                    newDate = newDate.set('hours', 0).set('minutes', 0).set('seconds', 0);
+                }
+                state.setValue(newDate);
+            }
+            else {
+                state.setValue(null);
+            }
+        } }));
+}
+export function MobileCalendarIcon({ props }) {
+    return (_jsx("span", { className: b({ size: getButtonSizeForInput(props.size) }), children: _jsx("span", { className: b('button'), children: _jsx(Icon, { data: CalendarIcon }) }) }));
+}
+function getDateFormat(type) {
+    switch (type) {
+        case 'time': {
+            return 'HH:mm';
+        }
+        case 'datetime-local': {
+            return 'YYYY-MM-DDTHH:mm';
+        }
+        default: {
+            return 'YYYY-MM-DD';
+        }
+    }
+}
+function formatNative(date, type) {
+    if (!date) {
+        return '';
+    }
+    const format = getDateFormat(type);
+    return date.format(format);
+}