@gravity-ui/date-components 1.6.0 → 2.1.0

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

@@ -1,5 +1,17 @@
-import { dateTime, settings } from '@gravity-ui/date-utils';
+import React from 'react';
+import { dateTime, isValid, settings } from '@gravity-ui/date-utils';
+import { mergeDateTime } from '../utils/dates';
 import { i18n } from './i18n';
+export const EDITABLE_SEGMENTS = {
+    year: true,
+    month: true,
+    day: true,
+    hour: true,
+    minute: true,
+    second: true,
+    dayPeriod: true,
+    weekday: true,
+};
 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));
@@ -311,7 +323,7 @@ export function splitFormatIntoSections(format) {
     let isSeparator = false;
     let isInEscapeBoundary = false;
     for (let i = 0; i < expandedFormat.length; i++) {
-        const char = expandedFormat[i];
+        const char = expandedFormat[i] || '';
         if (isInEscapeBoundary) {
             if (char === escapedCharacters.end) {
                 isInEscapeBoundary = false;
@@ -408,3 +420,94 @@ function getSectionOptions(section, token) {
 export function cleanString(dirtyString) {
     return dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
 }
+export function getEditableSections(sections, value, validSegments) {
+    let position = 1;
+    const newSections = [];
+    let previousEditableSection = -1;
+    for (let i = 0; i < sections.length; i++) {
+        const section = sections[i];
+        if (!section) {
+            continue;
+        }
+        const newSection = toEditableSection(section, value, validSegments, position, previousEditableSection);
+        newSections.push(newSection);
+        if (isEditableSection(section)) {
+            for (let j = Math.max(0, previousEditableSection); j <= i; j++) {
+                const prevSection = newSections[j];
+                if (prevSection) {
+                    prevSection.nextEditableSection = i;
+                    if (prevSection.previousEditableSection === -1) {
+                        prevSection.previousEditableSection = i;
+                    }
+                }
+            }
+            previousEditableSection = i;
+        }
+        position += newSection.textValue.length;
+    }
+    return newSections;
+}
+export function isEditableSection(section) {
+    var _a;
+    return (_a = EDITABLE_SEGMENTS[section.type]) !== null && _a !== void 0 ? _a : false;
+}
+export function toEditableSection(section, value, validSegments, position, previousEditableSection) {
+    const isEditable = isEditableSection(section);
+    let renderedValue = section.placeholder;
+    if ((isEditable && validSegments[section.type]) || section.type === 'timeZoneName') {
+        renderedValue = value.format(section.format);
+        if (section.contentType === 'digit' && renderedValue.length < section.placeholder.length) {
+            renderedValue = renderedValue.padStart(section.placeholder.length, '0');
+        }
+    }
+    // use bidirectional context to allow the browser autodetect text direction
+    renderedValue = '\u2068' + renderedValue + '\u2069';
+    const sectionLength = renderedValue.length;
+    const newSection = Object.assign(Object.assign(Object.assign({}, section), { value: getSectionValue(section, value), textValue: renderedValue, start: position, end: position + sectionLength, modified: false, previousEditableSection, nextEditableSection: previousEditableSection }), getSectionLimits(section, value));
+    return newSection;
+}
+export function getCurrentEditableSectionIndex(sections, selectedSections) {
+    const currentIndex = selectedSections === 'all' || selectedSections === -1 ? 0 : selectedSections;
+    const section = sections[currentIndex];
+    if (section && !EDITABLE_SEGMENTS[section.type]) {
+        return section.nextEditableSection;
+    }
+    return section ? currentIndex : -1;
+}
+export function formatSections(sections) {
+    // use ltr direction context to get predictable navigation inside input
+    return '\u2066' + sections.map((s) => s.textValue).join('') + '\u2069';
+}
+function parseDate(options) {
+    let date = dateTime(options);
+    if (!isValid(date)) {
+        date = dateTime(Object.assign(Object.assign({}, options), { format: undefined }));
+    }
+    return date;
+}
+function isDateStringWithTimeZone(str) {
+    return /z$/i.test(str) || /[+-]\d\d:\d\d$/.test(str);
+}
+export function parseDateFromString(str, format, timeZone) {
+    let date = parseDate({ input: str, format, timeZone });
+    if (isValid(date)) {
+        if (timeZone && !isDateStringWithTimeZone(str)) {
+            const time = parseDate({ input: str, format });
+            date = mergeDateTime(date, time);
+        }
+    }
+    return date;
+}
+export function isAllSegmentsValid(allSegments, validSegments) {
+    return Object.keys(allSegments).every((key) => validSegments[key]);
+}
+export function useFormatSections(format) {
+    const usedFormat = format;
+    const [sections, setSections] = React.useState(() => splitFormatIntoSections(usedFormat));
+    const [previousFormat, setFormat] = React.useState(usedFormat);
+    if (usedFormat !== previousFormat) {
+        setFormat(usedFormat);
+        setSections(splitFormatIntoSections(usedFormat));
+    }
+    return sections;
+}

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { type CalendarProps } from '../Calendar';
-import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import type { CalendarProps } from '../Calendar';
+import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
 import './DatePicker.css';
-export interface DatePickerProps extends DateFieldBase, TextInputProps, FocusableProps, KeyboardEvents, DomProps, StyleProps, AccessibilityProps {
+export interface DatePickerProps extends DateFieldBase, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
     children?: (props: CalendarProps) => React.ReactNode;
 }
-export declare function DatePicker({ value, defaultValue, onUpdate, className, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ className, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,22 +1,24 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Calendar as CalendarIcon } from '@gravity-ui/icons';
+import { Calendar as CalendarIcon, Clock as ClockIcon } from '@gravity-ui/icons';
 import { Button, Icon, Popup, TextInput, useMobile } from '@gravity-ui/uikit';
 import { Calendar } from '../Calendar';
 import { DateField } from '../DateField';
-import { MobileCalendar, MobileCalendarIcon } from './MobileCalendar';
+import { MobileCalendar } from './MobileCalendar';
+import { StubButton } from './StubButton';
 import { useDatePickerProps } from './hooks/useDatePickerProps';
 import { useDatePickerState } from './hooks/useDatePickerState';
 import { b } from './utils';
 import './DatePicker.css';
 export function DatePicker(_a) {
-    var { value, defaultValue, onUpdate, className } = _a, props = __rest(_a, ["value", "defaultValue", "onUpdate", "className"]);
+    var { className } = _a, props = __rest(_a, ["className"]);
     const anchorRef = React.useRef(null);
-    const state = useDatePickerState(Object.assign(Object.assign({}, props), { value,
-        defaultValue,
-        onUpdate }));
+    const state = useDatePickerState(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = useDatePickerProps(state, props);
-    const [isMobile] = useMobile();
-    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, rightContent: isMobile ? (_jsx(MobileCalendarIcon, { props: props, state: state })) : (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))) }))] })));
+    const isMobile = useMobile();
+    const isOnlyTime = state.hasTime && !state.hasDate;
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })) }))), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: _jsxs(React.Fragment, { children: [!isMobile && !isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), !isMobile && isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon })), isMobile && (_jsx(StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? ClockIcon : CalendarIcon }))] }) })), _jsx("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
+                // Ignore React warning
+                onChange: () => { } })] })));
 }

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

@@ -1,35 +1,10 @@
 .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;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   box-sizing: border-box;
-  width: 100%;
+  min-width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
@@ -37,11 +12,11 @@
   opacity: 0;
   border: none;
 }
-.g-date-mobile-calendar__input::-webkit-calendar-picker-indicator {
+.g-date-mobile-calendar::-webkit-calendar-picker-indicator {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  min-width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;

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

@@ -6,9 +6,4 @@ interface MobileCalendarProps {
     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

@@ -1,13 +1,11 @@
 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 '../utils/dates';
-import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
 import './MobileCalendar.css';
 const b = block('mobile-calendar');
 export function MobileCalendar({ props, state }) {
+    var _a, _b;
     let type = 'date';
     if (state.hasTime && state.hasDate) {
         type = 'datetime-local';
@@ -15,31 +13,35 @@ export function MobileCalendar({ props, state }) {
     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) => {
+    return (_jsx("input", { className: b(), disabled: props.disabled, type: type, value: formatNative(state.dateFieldState.displayValue, type), id: props.id, min: formatNative((_a = props.minValue) === null || _a === void 0 ? void 0 : _a.timeZone(state.timeZone), type), max: formatNative((_b = props.maxValue) === null || _b === void 0 ? void 0 : _b.timeZone(state.timeZone), type), tabIndex: -1, onChange: (e) => {
+            var _a, _b;
             if (props.readOnly) {
                 return;
             }
             const newValue = e.target.value;
             if (newValue) {
-                const localDate = dateTime({ input: newValue, format: getDateFormat(type) });
+                const localDate = dateTime({
+                    input: newValue,
+                    format: getDateFormat(type),
+                    timeZone: 'system',
+                }).timeZone(state.timeZone, true);
                 let newDate = state.hasDate
-                    ? dateTime({
-                        input: newValue,
-                        format: getDateFormat(type),
-                        timeZone: props.timeZone,
-                    })
+                    ? localDate
                     : createPlaceholderValue({
-                        placeholderValue: props.placeholderValue,
-                        timeZone: props.timeZone,
+                        placeholderValue: (_a = props.placeholderValue) === null || _a === void 0 ? void 0 : _a.timeZone(state.timeZone),
+                        timeZone: state.timeZone,
                     });
                 if (state.hasTime) {
                     newDate = mergeDateTime(newDate, localDate);
                 }
-                else if (state.dateValue) {
-                    newDate = mergeDateTime(newDate, state.dateValue);
+                else if (state.value) {
+                    newDate = mergeDateTime(newDate, state.value.timeZone(state.timeZone));
                 }
                 else {
-                    newDate = newDate.set('hours', 0).set('minutes', 0).set('seconds', 0);
+                    newDate = mergeDateTime(newDate, createPlaceholderValue({
+                        placeholderValue: (_b = props.placeholderValue) === null || _b === void 0 ? void 0 : _b.timeZone(state.timeZone),
+                        timeZone: state.timeZone,
+                    }));
                 }
                 state.setValue(newDate);
             }
@@ -48,9 +50,6 @@ export function MobileCalendar({ props, state }) {
             }
         } }));
 }
-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': {

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

@@ -0,0 +1,26 @@
+.g-date-stub-button {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+}
+.g-date-stub-button_size_xs {
+  width: 20px;
+  height: 20px;
+}
+.g-date-stub-button_size_m {
+  width: 28px;
+  height: 28px;
+}
+.g-date-stub-button_size_l {
+  width: 36px;
+  height: 36px;
+}
+.g-date-stub-button__icon {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--g-color-text-secondary);
+}

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

@@ -0,0 +1,8 @@
+import type { ButtonSize, IconData } from '@gravity-ui/uikit';
+import './StubButton.css';
+interface StubButtonProps {
+    size?: ButtonSize;
+    icon: IconData;
+}
+export declare function StubButton({ size, icon }: StubButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
+import './StubButton.css';
+const b = block('stub-button');
+export function StubButton({ size, icon }) {
+    return (_jsx("span", { className: b({ size }), children: _jsx("span", { className: b('icon'), children: _jsx(Icon, { data: icon }) }) }));
+}

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

@@ -6,7 +6,6 @@ import { getButtonSizeForInput } from '../../utils/getButtonSizeForInput';
 import { mergeProps } from '../../utils/mergeProps';
 import { i18n } from '../i18n';
 export function useDatePickerProps(state, _a) {
-    var _b;
     var { onFocus, onBlur } = _a, props = __rest(_a, ["onFocus", "onBlur"]);
     const [isActive, setActive] = React.useState(false);
     const { focusWithinProps } = useFocusWithin({
@@ -20,15 +19,6 @@ export function useDatePickerProps(state, _a) {
         },
     });
     const { inputProps } = useDateFieldProps(state.dateFieldState, props);
-    let error;
-    let validationState = props.validationState;
-    if (validationState) {
-        error = validationState === 'invalid' ? props.errorMessage || true : undefined;
-    }
-    else {
-        validationState = state.dateFieldState.validationState;
-        error = validationState === 'invalid';
-    }
     const inputRef = React.useRef(null);
     const handleRef = useForkRef(inputRef, inputProps.controlRef);
     const calendarRef = React.useRef(null);
@@ -40,9 +30,10 @@ export function useDatePickerProps(state, _a) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         });
     }
+    const onlyTime = state.hasTime && !state.hasDate;
     return {
         groupProps: Object.assign(Object.assign({ ref: groupRef, tabIndex: -1, role: 'group' }, focusWithinProps), { style: props.style, 'aria-disabled': state.disabled || undefined, onKeyDown: (e) => {
-                if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                if (!onlyTime && e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
                     e.preventDefault();
                     e.stopPropagation();
                     state.setOpen(true);
@@ -50,7 +41,7 @@ export function useDatePickerProps(state, _a) {
             } }),
         fieldProps: mergeProps(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
             ? { value: '' }
-            : undefined, { controlRef: handleRef, error }),
+            : undefined, { controlRef: handleRef }),
         calendarButtonProps: {
             ref: calendarButtonRef,
             size: getButtonSizeForInput(props.size),
@@ -81,7 +72,6 @@ export function useDatePickerProps(state, _a) {
                     focusInput();
                 }
             },
-            // @ts-expect-error focusTrap in popup was introduced in a newer version of uikit
             focusTrap: true,
         },
         calendarProps: {
@@ -96,20 +86,20 @@ export function useDatePickerProps(state, _a) {
                     focusInput();
                 }
             },
-            defaultFocusedValue: (_b = state.dateValue) !== null && _b !== void 0 ? _b : undefined,
-            value: state.dateValue,
+            value: state.dateFieldState.displayValue,
             minValue: props.minValue,
             maxValue: props.maxValue,
             isDateUnavailable: props.isDateUnavailable,
-            timeZone: props.timeZone,
+            timeZone: state.timeZone,
         },
         timeInputProps: {
             value: state.timeValue,
+            placeholderValue: state.dateFieldState.displayValue,
             onUpdate: state.setTimeValue,
             format: state.timeFormat,
             readOnly: state.readOnly,
             disabled: state.disabled,
-            timeZone: props.timeZone,
+            timeZone: state.timeZone,
             hasClear: props.hasClear,
             size: props.size,
         },

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

@@ -6,21 +6,21 @@ export interface DatePickerState {
     /** The currently selected date. */
     value: DateTime | null;
     /** Sets the selected date. */
-    setValue(value: DateTime | null): void;
+    setValue: (value: DateTime | null) => void;
     /**
      * The date portion of the value. This may be set prior to `value` if the user has
      * selected a date but has not yet selected a time.
      */
     dateValue: DateTime | null;
     /** Sets the date portion of the value. */
-    setDateValue(value: DateTime): void;
+    setDateValue: (value: DateTime) => void;
     /**
      * The time portion of the value. This may be set prior to `value` if the user has
      * selected a time but has not yet selected a date.
      */
     timeValue: DateTime | null;
     /** Sets the time portion of the value. */
-    setTimeValue(value: DateTime | null): void;
+    setTimeValue: (value: DateTime | null) => void;
     /** Whether the field is read only. */
     readOnly?: boolean;
     /** Whether the field is disabled. */
@@ -33,10 +33,11 @@ export interface DatePickerState {
     hasTime: boolean;
     /** Format of the time when rendered in the input. */
     timeFormat?: string;
+    timeZone: string;
     /** Whether the calendar popover is currently open. */
     isOpen: boolean;
     /** Sets whether the calendar popover is open. */
-    setOpen(isOpen: boolean): void;
+    setOpen: (isOpen: boolean) => void;
     dateFieldState: DateFieldState;
 }
 export interface DatePickerStateOptions extends DateFieldBase {

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

@@ -1,65 +1,74 @@
 import React from 'react';
+import { useControlledState } from '@gravity-ui/uikit';
 import { useDateFieldState } from '../../DateField';
-import { splitFormatIntoSections } from '../../DateField/utils';
-import { useControlledState } from '../../hooks/useControlledState';
 import { createPlaceholderValue, mergeDateTime } from '../../utils/dates';
+import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
 export function useDatePickerState(props) {
+    var _a;
     const { disabled, readOnly } = props;
     const [isOpen, setOpen] = React.useState(false);
-    const [value, setValue] = useControlledState(props.value, props.defaultValue, props.onUpdate);
+    const [value, setValue] = useControlledState(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
     const [selectedDateInner, setSelectedDate] = React.useState(null);
     const [selectedTimeInner, setSelectedTime] = React.useState(null);
+    const inputTimeZone = useDefaultTimeZone(props.value || props.defaultValue || props.placeholderValue);
+    const timeZone = props.timeZone || inputTimeZone;
     let selectedDate = selectedDateInner;
     let selectedTime = selectedTimeInner;
     const format = props.format || 'L';
-    const { hasDate, hasTime, timeFormat } = React.useMemo(() => {
-        const sections = splitFormatIntoSections(format);
-        let hasDate = false;
-        let hasHours = false;
-        let hasMinutes = false;
-        let hasSeconds = false;
-        for (const s of sections) {
-            hasHours || (hasHours = s.type === 'hour');
-            hasMinutes || (hasMinutes = s.type === 'minute');
-            hasSeconds || (hasSeconds = s.type === 'second');
-            hasDate || (hasDate = ['day', 'month', 'year'].includes(s.type));
-        }
-        return {
-            hasTime: hasHours || hasMinutes || hasSeconds,
-            timeFormat: hasSeconds ? 'LTS' : 'LT',
-            hasDate,
-        };
-    }, [format]);
-    if (value) {
-        selectedDate = value;
-        if (hasTime) {
-            selectedTime = value;
-        }
-    }
     const commitValue = (date, time) => {
         if (disabled || readOnly) {
             return;
         }
-        setValue(mergeDateTime(date, time));
+        setValue(mergeDateTime(date, time).timeZone(inputTimeZone));
         setSelectedDate(null);
         setSelectedTime(null);
     };
+    const dateFieldState = useDateFieldState({
+        value,
+        onUpdate(date) {
+            if (date) {
+                commitValue(date, date);
+            }
+            else {
+                setValue(null);
+            }
+        },
+        disabled,
+        readOnly,
+        validationState: props.validationState,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        isDateUnavailable: props.isDateUnavailable,
+        format,
+        placeholderValue: props.placeholderValue,
+        timeZone,
+    });
+    const timeFormat = React.useMemo(() => {
+        const hasSeconds = dateFieldState.sections.some((s) => s.type === 'second');
+        return hasSeconds ? 'LTS' : 'LT';
+    }, [dateFieldState.sections]);
+    if (value) {
+        selectedDate = value.timeZone(timeZone);
+        if (dateFieldState.hasTime) {
+            selectedTime = value.timeZone(timeZone);
+        }
+    }
     // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
     const selectDate = (newValue) => {
         if (disabled || readOnly) {
             return;
         }
-        const shouldClose = !hasTime;
-        if (hasTime) {
+        const shouldClose = !dateFieldState.hasTime;
+        if (dateFieldState.hasTime) {
             if (selectedTime || shouldClose) {
-                commitValue(newValue, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
+                commitValue(newValue, selectedTime || newValue);
             }
             else {
                 setSelectedDate(newValue);
             }
         }
         else {
-            setValue(newValue);
+            commitValue(newValue, newValue);
         }
         if (shouldClose) {
             setOpen(false);
@@ -69,29 +78,33 @@ export function useDatePickerState(props) {
         if (disabled || readOnly) {
             return;
         }
+        const newTime = newValue !== null && newValue !== void 0 ? newValue : createPlaceholderValue({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        });
         if (selectedDate) {
-            commitValue(selectedDate, newValue);
+            commitValue(selectedDate, newTime);
         }
         else {
-            setSelectedTime(newValue);
+            setSelectedTime(newTime);
         }
     };
-    const dateFieldState = useDateFieldState({
-        value: value !== null && value !== void 0 ? value : null,
-        onUpdate: setValue,
-        disabled,
-        readOnly,
-        validationState: props.validationState,
-        minValue: props.minValue,
-        maxValue: props.maxValue,
-        isDateUnavailable: props.isDateUnavailable,
-        format,
-        placeholderValue: props.placeholderValue,
-        timeZone: props.timeZone,
-    });
+    if (dateFieldState.hasTime && !selectedTime) {
+        selectedTime = dateFieldState.displayValue;
+    }
     return {
-        value: value !== null && value !== void 0 ? value : null,
-        setValue,
+        value,
+        setValue(newDate) {
+            if (props.readOnly || props.disabled) {
+                return;
+            }
+            if (newDate) {
+                setValue(newDate.timeZone(inputTimeZone));
+            }
+            else {
+                setValue(null);
+            }
+        },
         dateValue: selectedDate,
         timeValue: selectedTime,
         setDateValue: selectDate,
@@ -99,19 +112,21 @@ export function useDatePickerState(props) {
         disabled,
         readOnly,
         format,
-        hasDate,
-        hasTime,
+        hasDate: dateFieldState.hasDate,
+        hasTime: dateFieldState.hasTime,
         timeFormat,
+        timeZone,
         isOpen,
         setOpen(newIsOpen) {
-            if (!newIsOpen && !value && selectedDate && hasTime) {
-                commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
+            if (!newIsOpen && !value && selectedDate && dateFieldState.hasTime) {
+                commitValue(selectedDate, selectedTime ||
+                    createPlaceholderValue({
+                        placeholderValue: props.placeholderValue,
+                        timeZone: inputTimeZone,
+                    }));
             }
             setOpen(newIsOpen);
         },
         dateFieldState,
     };
 }
-function getPlaceholderTime(placeholderValue, timeZone) {
-    return createPlaceholderValue({ placeholderValue, timeZone });
-}