@gravity-ui/date-components 1.6.0 → 2.1.0

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

@@ -1,8 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cleanString = exports.splitFormatIntoSections = exports.setSegment = exports.addSegment = exports.getDurationUnitFromSectionType = exports.getSectionValue = exports.getSectionLimits = exports.expandFormat = void 0;
+exports.useFormatSections = exports.isAllSegmentsValid = exports.parseDateFromString = exports.formatSections = exports.getCurrentEditableSectionIndex = exports.toEditableSection = exports.isEditableSection = exports.getEditableSections = exports.cleanString = exports.splitFormatIntoSections = exports.setSegment = exports.addSegment = exports.getDurationUnitFromSectionType = exports.getSectionValue = exports.getSectionLimits = exports.expandFormat = exports.EDITABLE_SEGMENTS = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const date_utils_1 = require("@gravity-ui/date-utils");
+const dates_1 = require("../utils/dates");
 const i18n_1 = require("./i18n");
+exports.EDITABLE_SEGMENTS = {
+    year: true,
+    month: true,
+    day: true,
+    hour: true,
+    minute: true,
+    second: true,
+    dayPeriod: true,
+    weekday: true,
+};
 function expandFormat(format) {
     const localeFormats = date_utils_1.settings.getLocaleData().formats;
     const getShortLocalizedFormatFromLongLocalizedFormat = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, escapeSequence, localizedFormat) => escapeSequence || localizedFormat.slice(1));
@@ -320,7 +333,7 @@ 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;
@@ -419,3 +432,102 @@ function cleanString(dirtyString) {
     return dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
 }
 exports.cleanString = cleanString;
+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;
+}
+exports.getEditableSections = getEditableSections;
+function isEditableSection(section) {
+    var _a;
+    return (_a = exports.EDITABLE_SEGMENTS[section.type]) !== null && _a !== void 0 ? _a : false;
+}
+exports.isEditableSection = isEditableSection;
+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;
+}
+exports.toEditableSection = toEditableSection;
+function getCurrentEditableSectionIndex(sections, selectedSections) {
+    const currentIndex = selectedSections === 'all' || selectedSections === -1 ? 0 : selectedSections;
+    const section = sections[currentIndex];
+    if (section && !exports.EDITABLE_SEGMENTS[section.type]) {
+        return section.nextEditableSection;
+    }
+    return section ? currentIndex : -1;
+}
+exports.getCurrentEditableSectionIndex = getCurrentEditableSectionIndex;
+function formatSections(sections) {
+    // use ltr direction context to get predictable navigation inside input
+    return '\u2066' + sections.map((s) => s.textValue).join('') + '\u2069';
+}
+exports.formatSections = formatSections;
+function parseDate(options) {
+    let date = (0, date_utils_1.dateTime)(options);
+    if (!(0, date_utils_1.isValid)(date)) {
+        date = (0, date_utils_1.dateTime)(Object.assign(Object.assign({}, options), { format: undefined }));
+    }
+    return date;
+}
+function isDateStringWithTimeZone(str) {
+    return /z$/i.test(str) || /[+-]\d\d:\d\d$/.test(str);
+}
+function parseDateFromString(str, format, timeZone) {
+    let date = parseDate({ input: str, format, timeZone });
+    if ((0, date_utils_1.isValid)(date)) {
+        if (timeZone && !isDateStringWithTimeZone(str)) {
+            const time = parseDate({ input: str, format });
+            date = (0, dates_1.mergeDateTime)(date, time);
+        }
+    }
+    return date;
+}
+exports.parseDateFromString = parseDateFromString;
+function isAllSegmentsValid(allSegments, validSegments) {
+    return Object.keys(allSegments).every((key) => validSegments[key]);
+}
+exports.isAllSegmentsValid = isAllSegmentsValid;
+function useFormatSections(format) {
+    const usedFormat = format;
+    const [sections, setSections] = react_1.default.useState(() => splitFormatIntoSections(usedFormat));
+    const [previousFormat, setFormat] = react_1.default.useState(usedFormat);
+    if (usedFormat !== previousFormat) {
+        setFormat(usedFormat);
+        setSections(splitFormatIntoSections(usedFormat));
+    }
+    return sections;
+}
+exports.useFormatSections = useFormatSections;

package/dist/cjs/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/cjs/components/DatePicker/DatePicker.js

@@ -9,18 +9,20 @@ const uikit_1 = require("@gravity-ui/uikit");
 const Calendar_1 = require("../Calendar");
 const DateField_1 = require("../DateField");
 const MobileCalendar_1 = require("./MobileCalendar");
+const StubButton_1 = require("./StubButton");
 const useDatePickerProps_1 = require("./hooks/useDatePickerProps");
 const useDatePickerState_1 = require("./hooks/useDatePickerState");
 const utils_1 = require("./utils");
 require("./DatePicker.css");
 function DatePicker(_a) {
-    var { value, defaultValue, onUpdate, className } = _a, props = tslib_1.__rest(_a, ["value", "defaultValue", "onUpdate", "className"]);
+    var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
     const anchorRef = react_1.default.useRef(null);
-    const state = (0, useDatePickerState_1.useDatePickerState)(Object.assign(Object.assign({}, props), { value,
-        defaultValue,
-        onUpdate }));
+    const state = (0, useDatePickerState_1.useDatePickerState)(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = (0, useDatePickerProps_1.useDatePickerProps)(state, props);
-    const [isMobile] = (0, uikit_1.useMobile)();
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, utils_1.b)(null, className) }, groupProps, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: (0, utils_1.b)('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.b)('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.b)('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, rightContent: isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))) }))] })));
+    const isMobile = (0, uikit_1.useMobile)();
+    const isOnlyTime = state.hasTime && !state.hasDate;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, utils_1.b)(null, className) }, groupProps, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : (!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: (0, utils_1.b)('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.b)('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.b)('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })) }))), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), !isMobile && isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock })), isMobile && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? icons_1.Clock : icons_1.Calendar }))] }) })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
+                // Ignore React warning
+                onChange: () => { } })] })));
 }
 exports.DatePicker = DatePicker;

package/dist/cjs/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/cjs/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/cjs/components/DatePicker/MobileCalendar.js

@@ -1,16 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileCalendarIcon = exports.MobileCalendar = void 0;
+exports.MobileCalendar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const date_utils_1 = require("@gravity-ui/date-utils");
-const icons_1 = require("@gravity-ui/icons");
-const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
 const dates_1 = require("../utils/dates");
-const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
 require("./MobileCalendar.css");
 const b = (0, cn_1.block)('mobile-calendar');
 function MobileCalendar({ props, state }) {
+    var _a, _b;
     let type = 'date';
     if (state.hasTime && state.hasDate) {
         type = 'datetime-local';
@@ -18,31 +16,35 @@ function MobileCalendar({ props, state }) {
     else if (state.hasTime) {
         type = 'time';
     }
-    return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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 = (0, date_utils_1.dateTime)({ input: newValue, format: getDateFormat(type) });
+                const localDate = (0, date_utils_1.dateTime)({
+                    input: newValue,
+                    format: getDateFormat(type),
+                    timeZone: 'system',
+                }).timeZone(state.timeZone, true);
                 let newDate = state.hasDate
-                    ? (0, date_utils_1.dateTime)({
-                        input: newValue,
-                        format: getDateFormat(type),
-                        timeZone: props.timeZone,
-                    })
+                    ? localDate
                     : (0, dates_1.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 = (0, dates_1.mergeDateTime)(newDate, localDate);
                 }
-                else if (state.dateValue) {
-                    newDate = (0, dates_1.mergeDateTime)(newDate, state.dateValue);
+                else if (state.value) {
+                    newDate = (0, dates_1.mergeDateTime)(newDate, state.value.timeZone(state.timeZone));
                 }
                 else {
-                    newDate = newDate.set('hours', 0).set('minutes', 0).set('seconds', 0);
+                    newDate = (0, dates_1.mergeDateTime)(newDate, (0, dates_1.createPlaceholderValue)({
+                        placeholderValue: (_b = props.placeholderValue) === null || _b === void 0 ? void 0 : _b.timeZone(state.timeZone),
+                        timeZone: state.timeZone,
+                    }));
                 }
                 state.setValue(newDate);
             }
@@ -52,10 +54,6 @@ function MobileCalendar({ props, state }) {
         } }));
 }
 exports.MobileCalendar = MobileCalendar;
-function MobileCalendarIcon({ props }) {
-    return ((0, jsx_runtime_1.jsx)("span", { className: b({ size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size) }), children: (0, jsx_runtime_1.jsx)("span", { className: b('button'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }));
-}
-exports.MobileCalendarIcon = MobileCalendarIcon;
 function getDateFormat(type) {
     switch (type) {
         case 'time': {

package/dist/cjs/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/cjs/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/cjs/components/DatePicker/StubButton.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StubButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+require("./StubButton.css");
+const b = (0, cn_1.block)('stub-button');
+function StubButton({ size, icon }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: b({ size }), children: (0, jsx_runtime_1.jsx)("span", { className: b('icon'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon }) }) }));
+}
+exports.StubButton = StubButton;

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

@@ -9,7 +9,6 @@ const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput");
 const mergeProps_1 = require("../../utils/mergeProps");
 const i18n_1 = require("../i18n");
 function useDatePickerProps(state, _a) {
-    var _b;
     var { onFocus, onBlur } = _a, props = tslib_1.__rest(_a, ["onFocus", "onBlur"]);
     const [isActive, setActive] = react_1.default.useState(false);
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
@@ -23,15 +22,6 @@ function useDatePickerProps(state, _a) {
         },
     });
     const { inputProps } = (0, DateField_1.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_1.default.useRef(null);
     const handleRef = (0, uikit_1.useForkRef)(inputRef, inputProps.controlRef);
     const calendarRef = react_1.default.useRef(null);
@@ -43,9 +33,10 @@ 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);
@@ -53,7 +44,7 @@ function useDatePickerProps(state, _a) {
             } }),
         fieldProps: (0, mergeProps_1.mergeProps)(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
             ? { value: '' }
-            : undefined, { controlRef: handleRef, error }),
+            : undefined, { controlRef: handleRef }),
         calendarButtonProps: {
             ref: calendarButtonRef,
             size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size),
@@ -84,7 +75,6 @@ function useDatePickerProps(state, _a) {
                     focusInput();
                 }
             },
-            // @ts-expect-error focusTrap in popup was introduced in a newer version of uikit
             focusTrap: true,
         },
         calendarProps: {
@@ -99,20 +89,20 @@ 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/cjs/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 {