@gravity-ui/date-components 2.8.3 → 2.9.0

package/dist/cjs/components/CalendarView/Calendar.css

@@ -215,7 +215,7 @@
   height: 4px;
   content: "";
   border-radius: 50%;
-  background-color: var(--g-color-text-primary);
+  background-color: currentColor;
   transform: translateY(8px);
 }
 .g-date-calendar__button_disabled {

package/dist/cjs/components/CalendarView/CalendarView.js

@@ -10,6 +10,7 @@ const react_1 = __importDefault(require("react"));
 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 useCalendarCellProps_1 = require("./hooks/useCalendarCellProps");
 const useCalendarGridProps_1 = require("./hooks/useCalendarGridProps");
 const useCalendarProps_1 = require("./hooks/useCalendarProps");
@@ -62,14 +63,14 @@ function Content({ className, state, animation, onAnimationEnd }) {
 function Weekdays({ state }) {
     const weekdays = (0, utils_1.getWeekDays)();
     return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-row'), role: "row", children: weekdays.map((date) => {
-            return ((0, jsx_runtime_1.jsx)("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": date.format('dddd'), children: date.format('dd') }, date.day()));
+            return ((0, jsx_runtime_1.jsx)("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": (0, dates_1.formatDateTime)(date, 'dddd', state.timeZone), children: (0, dates_1.formatDateTime)(date, 'dd', state.timeZone) }, date.day()));
         }) }));
 }
 function CalendarGridCells({ state }) {
     const rowsInPeriod = state.mode === 'days' ? 6 : 4;
     const columnsInRow = state.mode === 'days' ? 7 : 3 + (state.mode === 'quarters' ? 1 : 0);
     const days = (0, utils_1.getDaysInPeriod)(state.startDate, state.endDate, state.mode);
-    return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? ((0, jsx_runtime_1.jsx)("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: days[rowIndex * columnsInRow].format('YYYY') })) : null, days
+    return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? ((0, jsx_runtime_1.jsx)("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: (0, dates_1.formatDateTime)(days[rowIndex * columnsInRow], 'YYYY', state.timeZone) })) : null, days
                     .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
                     .map((date) => {
                     return (0, jsx_runtime_1.jsx)(CalendarCell, { date: date, state: state }, date.unix());

package/dist/cjs/components/CalendarView/hooks/types.d.ts

@@ -8,6 +8,8 @@ export interface CalendarStateOptionsBase extends InputBase {
     maxValue?: DateTime;
     /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
     isDateUnavailable?: (date: DateTime) => boolean;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is weekend. */
+    isWeekend?: (date: DateTime) => boolean;
     /**
      * Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.
      * @default The timezone of the `value` or `defaultValue` or `focusedValue` or `defaultFocusedValue`, 'default' otherwise.

package/dist/cjs/components/CalendarView/hooks/useCalendarCellProps.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarCellProps = useCalendarCellProps;
 const react_1 = __importDefault(require("react"));
+const dates_1 = require("../../utils/dates");
 function useCalendarCellProps(date, state) {
     const ref = react_1.default.useRef(null);
     const isFocused = state.isCellFocused(date);
@@ -26,7 +27,7 @@ function useCalendarCellProps(date, state) {
     const isSelectable = !isDisabled && !isUnavailable;
     const isCurrent = state.isCurrent(date);
     const isWeekend = state.isWeekend(date);
-    const label = getDateLabel(date, state.mode);
+    const label = getDateLabel(date, state);
     const cellProps = {
         role: 'gridcell',
         'aria-selected': isSelected ? 'true' : undefined,
@@ -58,15 +59,15 @@ function useCalendarCellProps(date, state) {
             }
         },
     };
-    let formattedDate = date.format('D');
+    let formattedDate = (0, dates_1.formatDateTime)(date, 'D', state.timeZone);
     if (state.mode === 'months') {
-        formattedDate = date.format('MMM');
+        formattedDate = (0, dates_1.formatDateTime)(date, 'MMM', state.timeZone);
     }
     else if (state.mode === 'quarters') {
-        formattedDate = date.format('[Q]Q');
+        formattedDate = (0, dates_1.formatDateTime)(date, '[Q]Q', state.timeZone);
     }
     else if (state.mode === 'years') {
-        formattedDate = date.format('YYYY');
+        formattedDate = (0, dates_1.formatDateTime)(date, 'YYYY', state.timeZone);
     }
     return {
         cellProps,
@@ -83,19 +84,21 @@ function useCalendarCellProps(date, state) {
         isWeekend,
     };
 }
-function getDateLabel(date, mode) {
-    let label = '';
-    if (mode === 'days') {
-        label = `${date.format('dddd')}, ${date.format('LL')}`;
-    }
-    else if (mode === 'months') {
-        label = `${date.format('MMMM YYYY')}`;
-    }
-    else if (mode === 'quarters') {
-        label = `${date.format('[Q]Q YYYY')}`;
-    }
-    else if (mode === 'years') {
-        label = `${date.format('YYYY')}`;
+function getDateLabel(date, state) {
+    switch (state.mode) {
+        case 'days': {
+            return `${(0, dates_1.formatDateTime)(date, 'dddd', state.timeZone)}, ${(0, dates_1.formatDateTime)(date, 'LL', state.timeZone)}`;
+        }
+        case 'months': {
+            return `${(0, dates_1.formatDateTime)(date, 'MMMM YYYY', state.timeZone)}`;
+        }
+        case 'quarters': {
+            return `${(0, dates_1.formatDateTime)(date, '[Q]Q YYYY', state.timeZone)}`;
+        }
+        case 'years': {
+            return `${(0, dates_1.formatDateTime)(date, 'YYYY', state.timeZone)}`;
+        }
+        default:
+            return '';
     }
-    return label;
 }

package/dist/cjs/components/CalendarView/hooks/useCalendarGridProps.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarGridProps = useCalendarGridProps;
 const uikit_1 = require("@gravity-ui/uikit");
+const dates_1 = require("../../utils/dates");
 function useCalendarGridProps(state) {
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
         onFocusWithinChange: (isFocused) => {
@@ -10,7 +11,7 @@ function useCalendarGridProps(state) {
     });
     const gridProps = Object.assign(Object.assign({ role: 'grid', 'aria-label': state.mode === 'years' || state.mode === 'quarters'
             ? `${state.startDate.year()} — ${state.endDate.year()}`
-            : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY'), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
+            : (0, dates_1.formatDateTime)(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
             if (e.key === 'ArrowRight') {
                 e.preventDefault();
                 state.focusNextCell();

package/dist/cjs/components/CalendarView/hooks/useCalendarProps.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarProps = useCalendarProps;
 const react_1 = __importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const dates_1 = require("../../utils/dates");
 const i18n_1 = require("../i18n");
 const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';
 // eslint-disable-next-line complexity
 function useCalendarProps(props, state) {
     const title = state.mode === 'years' || state.mode === 'quarters'
         ? `${state.startDate.year()} — ${state.endDate.year()}`
-        : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY');
+        : (0, dates_1.formatDateTime)(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone);
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
         onFocusWithin: props.onFocus,
         onBlurWithin: props.onBlur,

package/dist/cjs/components/CalendarView/hooks/useCalendarState.js

@@ -32,25 +32,25 @@ function useCalendarState(props) {
         if (!props.focusedValue) {
             return props.focusedValue;
         }
-        return (0, utils_1.constrainValue)(props.focusedValue.timeZone(timeZone), minValue, maxValue);
+        return (0, dates_1.constrainValue)(props.focusedValue.timeZone(timeZone), minValue, maxValue);
     }, [props.focusedValue, minValue, maxValue, timeZone]);
     const defaultFocusedValue = react_1.default.useMemo(() => {
         var _a;
         const defaultValue = ((_a = (props.defaultFocusedValue ? props.defaultFocusedValue : value)) === null || _a === void 0 ? void 0 : _a.timeZone(timeZone)) ||
             (0, dates_1.createPlaceholderValue)({ timeZone }).startOf(minMode);
-        return (0, utils_1.constrainValue)(defaultValue, minValue, maxValue);
+        return (0, dates_1.constrainValue)(defaultValue, minValue, maxValue);
     }, [maxValue, minValue, props.defaultFocusedValue, timeZone, value, minMode]);
     const [focusedDateInner, setFocusedDate] = (0, uikit_1.useControlledState)(focusedValue, defaultFocusedValue, (date) => {
         var _a;
         (_a = props.onFocusUpdate) === null || _a === void 0 ? void 0 : _a.call(props, date.timeZone(inputTimeZone));
     });
-    const focusedDate = (_c = focusedDateInner === null || focusedDateInner === void 0 ? void 0 : focusedDateInner.timeZone(timeZone)) !== null && _c !== void 0 ? _c : (0, utils_1.constrainValue)((0, dates_1.createPlaceholderValue)({ timeZone }), minValue, maxValue);
+    const focusedDate = (_c = focusedDateInner === null || focusedDateInner === void 0 ? void 0 : focusedDateInner.timeZone(timeZone)) !== null && _c !== void 0 ? _c : (0, dates_1.constrainValue)((0, dates_1.createPlaceholderValue)({ timeZone }), minValue, maxValue);
     if (isInvalid(focusedDate, minValue, maxValue)) {
         // If the focused date was moved to an invalid value, it can't be focused, so constrain it.
-        setFocusedDate((0, utils_1.constrainValue)(focusedDate, minValue, maxValue));
+        setFocusedDate((0, dates_1.constrainValue)(focusedDate, minValue, maxValue));
     }
     function focusCell(date) {
-        setFocusedDate((0, utils_1.constrainValue)(date.startOf(currentMode), minValue, maxValue));
+        setFocusedDate((0, dates_1.constrainValue)(date.startOf(currentMode), minValue, maxValue));
     }
     const [isFocused, setFocused] = react_1.default.useState(props.autoFocus || false);
     const startDate = getStartDate(focusedDate, currentMode);
@@ -61,7 +61,7 @@ function useCalendarState(props) {
         value,
         setValue(date) {
             if (!disabled && !readOnly) {
-                let newValue = (0, utils_1.constrainValue)(date, minValue, maxValue);
+                let newValue = (0, dates_1.constrainValue)(date, minValue, maxValue);
                 if (this.isCellUnavailable(newValue)) {
                     return;
                 }
@@ -199,7 +199,13 @@ function useCalendarState(props) {
             return this.disabled || this.isInvalid(date);
         },
         isWeekend(date) {
-            return this.mode === 'days' && [0, 6].includes(date.day());
+            if (this.mode !== 'days') {
+                return false;
+            }
+            if (typeof props.isWeekend === 'function') {
+                return props.isWeekend(date);
+            }
+            return (0, dates_1.isWeekend)(date);
         },
         isCurrent(date) {
             return (0, date_utils_1.dateTime)({ timeZone }).isSame(date, this.mode);
@@ -237,6 +243,6 @@ function getEndDate(date, mode) {
     return startDate.add({ [mode]: 11 });
 }
 function isInvalid(date, minValue, maxValue, mode = 'days') {
-    const constrainedDate = (0, utils_1.constrainValue)(date, minValue, maxValue);
+    const constrainedDate = (0, dates_1.constrainValue)(date, minValue, maxValue);
     return !constrainedDate.isSame(date, mode);
 }

package/dist/cjs/components/CalendarView/hooks/useRangeCalendarState.js

@@ -6,7 +6,6 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const dates_1 = require("../../utils/dates");
 const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
-const utils_1 = require("../utils");
 const useCalendarState_1 = require("./useCalendarState");
 function useRangeCalendarState(props) {
     var _a;
@@ -40,7 +39,7 @@ function useRangeCalendarState(props) {
         if (props.readOnly) {
             return;
         }
-        const newDate = (0, utils_1.constrainValue)(date, calendar.minValue, calendar.maxValue);
+        const newDate = (0, dates_1.constrainValue)(date, calendar.minValue, calendar.maxValue);
         if (calendar.isCellUnavailable(newDate)) {
             return;
         }

package/dist/cjs/components/CalendarView/utils.d.ts

@@ -1,6 +1,5 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { CalendarLayout } from './hooks/types';
-export declare function constrainValue(value: DateTime, minValue: DateTime | undefined, maxValue: DateTime | undefined): DateTime;
 export declare function getDaysInPeriod(startDate: DateTime, _endDate: DateTime, mode: CalendarLayout): DateTime[];
 export declare function getWeekDays(): DateTime[];
 export declare const calendarLayouts: CalendarLayout[];

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

@@ -1,19 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calendarLayouts = void 0;
-exports.constrainValue = constrainValue;
 exports.getDaysInPeriod = getDaysInPeriod;
 exports.getWeekDays = getWeekDays;
 const date_utils_1 = require("@gravity-ui/date-utils");
-function constrainValue(value, minValue, maxValue) {
-    if (minValue && value.isBefore(minValue)) {
-        return minValue;
-    }
-    if (maxValue && maxValue.isBefore(value)) {
-        return maxValue;
-    }
-    return value;
-}
 function getDaysInPeriod(startDate, _endDate, mode) {
     const days = [];
     if (mode === 'days') {

package/dist/cjs/components/DateField/hooks/useDateFieldProps.js

@@ -40,10 +40,6 @@ function useDateFieldProps(state, props) {
     });
     function syncSelectionFromDOM() {
         var _a, _b;
-        if (state.readOnly) {
-            setSelectedSections(-1);
-            return;
-        }
         state.focusSectionInPosition((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0);
         setInnerState({});
     }
@@ -165,6 +161,7 @@ function useDateFieldProps(state, props) {
                 'aria-describedby': props['aria-describedby'] || undefined,
                 'aria-details': props['aria-details'] || undefined,
                 'aria-disabled': state.disabled || undefined,
+                readOnly: state.readOnly,
                 inputMode,
                 onClick() {
                     syncSelectionFromDOM();

package/dist/cjs/components/RangeDatePicker/RangeDatePicker.js

@@ -22,7 +22,7 @@ function RangeDatePicker(_a) {
     const state = (0, useRangeDatePickerState_1.useRangeDatePickerState)(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = (0, DatePicker_1.useDatePickerProps)(state, props);
     const isOnlyTime = state.hasTime && !state.hasDate;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: 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: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : ((0, jsx_runtime_1.jsx)(Calendar_1.RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(RangeDateField_1.RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: b('field'), hasClear: fieldProps.hasClear, endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!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 }) }))), isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock }))] }) })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: 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: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : ((0, jsx_runtime_1.jsx)(Calendar_1.RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(RangeDateField_1.RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: b('field'), endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!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 }) }))), isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock }))] }) })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
                     state.dateFieldState.setDate(v);
                 }, value: state.value, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
 }

package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldProps.js

@@ -40,6 +40,7 @@ function useRelativeDateFieldProps(state, props) {
                 'aria-describedby': props['aria-describedby'] || undefined,
                 'aria-details': props['aria-details'] || undefined,
                 'aria-disabled': state.disabled || undefined,
+                readOnly: state.readOnly,
             },
         },
         calendarProps: {

package/dist/cjs/components/RelativeRangeDatePicker/RelativeRangeDatePicker.js

@@ -63,6 +63,7 @@ function RelativeRangeDatePicker(props) {
                     role: 'combobox',
                     'aria-expanded': open,
                     disabled: isMobile,
+                    readOnly: props.readOnly,
                     className: b('input', { mobile: isMobile }),
                     onClick: () => {
                         if (props.disabled) {

package/dist/cjs/components/RelativeRangeDatePicker/components/Zones/Zones.js

@@ -43,14 +43,14 @@ const b = (0, cn_1.block)('relative-range-date-picker-zones');
 function Zones(props) {
     const timeZone = (0, utils_1.normalizeTimeZone)(props.value);
     const size = props.isMobile ? 'xl' : props.size;
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Select, { value: [timeZone], options: zones, size: size, onUpdate: (v) => {
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Select, { disabled: props.disabled, value: [timeZone], options: zones, size: size, onUpdate: (v) => {
             const tz = v[0];
             if (tz) {
                 props.onUpdate(tz);
             }
         }, width: "max", renderControl: (controlProps) => {
             const value = timeZone === 'system' || timeZone === 'default' ? (0, i18n_1.i18n)(timeZone) : timeZone;
-            return ((0, jsx_runtime_1.jsxs)(uikit_1.Button, { onClick: controlProps.onClick, ref: controlProps.ref, view: "flat-secondary", width: "max", pin: "clear-clear", size: size, extraProps: {
+            return ((0, jsx_runtime_1.jsxs)(uikit_1.Button, { onClick: controlProps.onClick, ref: controlProps.ref, view: "flat-secondary", width: "max", pin: "clear-clear", size: size, disabled: props.disabled, extraProps: {
                     'aria-haspopup': 'listbox',
                     'aria-expanded': controlProps.open,
                     onKeyDown: controlProps.onKeyDown,

package/dist/cjs/components/utils/dates.d.ts

@@ -1,8 +1,11 @@
 import type { DateTime } from '@gravity-ui/date-utils';
+export declare function isWeekend(date: DateTime): boolean;
 export 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 constrainValue(value: DateTime, minValue: DateTime | undefined, maxValue: DateTime | undefined): DateTime;
 export declare function mergeDateTime(date: DateTime, time: DateTime): DateTime;
+export declare function formatDateTime(date: DateTime, format: string, timezone: string): string;

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

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isWeekend = isWeekend;
 exports.createPlaceholderValue = createPlaceholderValue;
 exports.isInvalid = isInvalid;
+exports.constrainValue = constrainValue;
 exports.mergeDateTime = mergeDateTime;
+exports.formatDateTime = formatDateTime;
 const date_utils_1 = require("@gravity-ui/date-utils");
+function isWeekend(date) {
+    return [0, 6].includes(date.day());
+}
 function createPlaceholderValue({ placeholderValue, timeZone }) {
     return (placeholderValue !== null && placeholderValue !== void 0 ? placeholderValue : (0, date_utils_1.dateTime)({ timeZone }).set('hour', 0).set('minute', 0).set('second', 0));
 }
@@ -19,9 +25,21 @@ function isInvalid(value, minValue, maxValue) {
     }
     return false;
 }
+function constrainValue(value, minValue, maxValue) {
+    if (minValue && value.isBefore(minValue)) {
+        return minValue;
+    }
+    if (maxValue && maxValue.isBefore(value)) {
+        return maxValue;
+    }
+    return value;
+}
 function mergeDateTime(date, time) {
     return date
         .set('hours', time.hour())
         .set('minutes', time.minute())
         .set('seconds', time.second());
 }
+function formatDateTime(date, format, timezone) {
+    return (0, date_utils_1.dateTime)({ input: date, timeZone: timezone }).format(format);
+}

package/dist/esm/components/CalendarView/Calendar.css

@@ -215,7 +215,7 @@
   height: 4px;
   content: "";
   border-radius: 50%;
-  background-color: var(--g-color-text-primary);
+  background-color: currentColor;
   transform: translateY(8px);
 }
 .g-date-calendar__button_disabled {

package/dist/esm/components/CalendarView/CalendarView.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { ChevronLeft, ChevronRight } from '@gravity-ui/icons';
 import { ArrowToggle, Button } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
+import { formatDateTime } from '../utils/dates';
 import { useCalendarCellProps } from './hooks/useCalendarCellProps';
 import { useCalendarGridProps } from './hooks/useCalendarGridProps';
 import { useCalendarProps } from './hooks/useCalendarProps';
@@ -56,14 +57,14 @@ function Content({ className, state, animation, onAnimationEnd }) {
 function Weekdays({ state }) {
     const weekdays = getWeekDays();
     return (_jsx("div", { className: b('grid-row'), role: "row", children: weekdays.map((date) => {
-            return (_jsx("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": date.format('dddd'), children: date.format('dd') }, date.day()));
+            return (_jsx("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": formatDateTime(date, 'dddd', state.timeZone), children: formatDateTime(date, 'dd', state.timeZone) }, date.day()));
         }) }));
 }
 function CalendarGridCells({ state }) {
     const rowsInPeriod = state.mode === 'days' ? 6 : 4;
     const columnsInRow = state.mode === 'days' ? 7 : 3 + (state.mode === 'quarters' ? 1 : 0);
     const days = getDaysInPeriod(state.startDate, state.endDate, state.mode);
-    return (_jsx("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => (_jsxs("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? (_jsx("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: days[rowIndex * columnsInRow].format('YYYY') })) : null, days
+    return (_jsx("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => (_jsxs("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? (_jsx("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: formatDateTime(days[rowIndex * columnsInRow], 'YYYY', state.timeZone) })) : null, days
                     .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
                     .map((date) => {
                     return _jsx(CalendarCell, { date: date, state: state }, date.unix());

package/dist/esm/components/CalendarView/hooks/types.d.ts

@@ -8,6 +8,8 @@ export interface CalendarStateOptionsBase extends InputBase {
     maxValue?: DateTime;
     /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
     isDateUnavailable?: (date: DateTime) => boolean;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is weekend. */
+    isWeekend?: (date: DateTime) => boolean;
     /**
      * Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.
      * @default The timezone of the `value` or `defaultValue` or `focusedValue` or `defaultFocusedValue`, 'default' otherwise.

package/dist/esm/components/CalendarView/hooks/useCalendarCellProps.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { formatDateTime } from '../../utils/dates';
 export function useCalendarCellProps(date, state) {
     const ref = React.useRef(null);
     const isFocused = state.isCellFocused(date);
@@ -20,7 +21,7 @@ export function useCalendarCellProps(date, state) {
     const isSelectable = !isDisabled && !isUnavailable;
     const isCurrent = state.isCurrent(date);
     const isWeekend = state.isWeekend(date);
-    const label = getDateLabel(date, state.mode);
+    const label = getDateLabel(date, state);
     const cellProps = {
         role: 'gridcell',
         'aria-selected': isSelected ? 'true' : undefined,
@@ -52,15 +53,15 @@ export function useCalendarCellProps(date, state) {
             }
         },
     };
-    let formattedDate = date.format('D');
+    let formattedDate = formatDateTime(date, 'D', state.timeZone);
     if (state.mode === 'months') {
-        formattedDate = date.format('MMM');
+        formattedDate = formatDateTime(date, 'MMM', state.timeZone);
     }
     else if (state.mode === 'quarters') {
-        formattedDate = date.format('[Q]Q');
+        formattedDate = formatDateTime(date, '[Q]Q', state.timeZone);
     }
     else if (state.mode === 'years') {
-        formattedDate = date.format('YYYY');
+        formattedDate = formatDateTime(date, 'YYYY', state.timeZone);
     }
     return {
         cellProps,
@@ -77,19 +78,21 @@ export function useCalendarCellProps(date, state) {
         isWeekend,
     };
 }
-function getDateLabel(date, mode) {
-    let label = '';
-    if (mode === 'days') {
-        label = `${date.format('dddd')}, ${date.format('LL')}`;
-    }
-    else if (mode === 'months') {
-        label = `${date.format('MMMM YYYY')}`;
-    }
-    else if (mode === 'quarters') {
-        label = `${date.format('[Q]Q YYYY')}`;
-    }
-    else if (mode === 'years') {
-        label = `${date.format('YYYY')}`;
+function getDateLabel(date, state) {
+    switch (state.mode) {
+        case 'days': {
+            return `${formatDateTime(date, 'dddd', state.timeZone)}, ${formatDateTime(date, 'LL', state.timeZone)}`;
+        }
+        case 'months': {
+            return `${formatDateTime(date, 'MMMM YYYY', state.timeZone)}`;
+        }
+        case 'quarters': {
+            return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone)}`;
+        }
+        case 'years': {
+            return `${formatDateTime(date, 'YYYY', state.timeZone)}`;
+        }
+        default:
+            return '';
     }
-    return label;
 }

package/dist/esm/components/CalendarView/hooks/useCalendarGridProps.js

@@ -1,4 +1,5 @@
 import { useFocusWithin } from '@gravity-ui/uikit';
+import { formatDateTime } from '../../utils/dates';
 export function useCalendarGridProps(state) {
     const { focusWithinProps } = useFocusWithin({
         onFocusWithinChange: (isFocused) => {
@@ -7,7 +8,7 @@ export function useCalendarGridProps(state) {
     });
     const gridProps = Object.assign(Object.assign({ role: 'grid', 'aria-label': state.mode === 'years' || state.mode === 'quarters'
             ? `${state.startDate.year()} — ${state.endDate.year()}`
-            : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY'), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
+            : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
             if (e.key === 'ArrowRight') {
                 e.preventDefault();
                 state.focusNextCell();

package/dist/esm/components/CalendarView/hooks/useCalendarProps.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { useFocusWithin } from '@gravity-ui/uikit';
+import { formatDateTime } from '../../utils/dates';
 import { i18n } from '../i18n';
 const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';
 // eslint-disable-next-line complexity
 export function useCalendarProps(props, state) {
     const title = state.mode === 'years' || state.mode === 'quarters'
         ? `${state.startDate.year()} — ${state.endDate.year()}`
-        : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY');
+        : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone);
     const { focusWithinProps } = useFocusWithin({
         onFocusWithin: props.onFocus,
         onBlurWithin: props.onBlur,

package/dist/esm/components/CalendarView/hooks/useCalendarState.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { dateTime } from '@gravity-ui/date-utils';
 import { useControlledState } from '@gravity-ui/uikit';
-import { createPlaceholderValue, mergeDateTime } from '../../utils/dates';
+import { constrainValue, createPlaceholderValue, isWeekend, mergeDateTime } from '../../utils/dates';
 import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
-import { calendarLayouts, constrainValue } from '../utils';
+import { calendarLayouts } from '../utils';
 const defaultModes = {
     days: true,
     months: true,
@@ -193,7 +193,13 @@ export function useCalendarState(props) {
             return this.disabled || this.isInvalid(date);
         },
         isWeekend(date) {
-            return this.mode === 'days' && [0, 6].includes(date.day());
+            if (this.mode !== 'days') {
+                return false;
+            }
+            if (typeof props.isWeekend === 'function') {
+                return props.isWeekend(date);
+            }
+            return isWeekend(date);
         },
         isCurrent(date) {
             return dateTime({ timeZone }).isSame(date, this.mode);

package/dist/esm/components/CalendarView/hooks/useRangeCalendarState.js

@@ -1,9 +1,8 @@
 import { __rest } from "tslib";
 import React from 'react';
 import { useControlledState } from '@gravity-ui/uikit';
-import { mergeDateTime } from '../../utils/dates';
+import { constrainValue, mergeDateTime } from '../../utils/dates';
 import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
-import { constrainValue } from '../utils';
 import { useCalendarState } from './useCalendarState';
 export function useRangeCalendarState(props) {
     var _a;

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

@@ -1,6 +1,5 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { CalendarLayout } from './hooks/types';
-export declare function constrainValue(value: DateTime, minValue: DateTime | undefined, maxValue: DateTime | undefined): DateTime;
 export declare function getDaysInPeriod(startDate: DateTime, _endDate: DateTime, mode: CalendarLayout): DateTime[];
 export declare function getWeekDays(): DateTime[];
 export declare const calendarLayouts: CalendarLayout[];

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

@@ -1,13 +1,4 @@
 import { dateTime } from '@gravity-ui/date-utils';
-export function constrainValue(value, minValue, maxValue) {
-    if (minValue && value.isBefore(minValue)) {
-        return minValue;
-    }
-    if (maxValue && maxValue.isBefore(value)) {
-        return maxValue;
-    }
-    return value;
-}
 export function getDaysInPeriod(startDate, _endDate, mode) {
     const days = [];
     if (mode === 'days') {

package/dist/esm/components/DateField/hooks/useDateFieldProps.js

@@ -34,10 +34,6 @@ export function useDateFieldProps(state, props) {
     });
     function syncSelectionFromDOM() {
         var _a, _b;
-        if (state.readOnly) {
-            setSelectedSections(-1);
-            return;
-        }
         state.focusSectionInPosition((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0);
         setInnerState({});
     }
@@ -159,6 +155,7 @@ export function useDateFieldProps(state, props) {
                 'aria-describedby': props['aria-describedby'] || undefined,
                 'aria-details': props['aria-details'] || undefined,
                 'aria-disabled': state.disabled || undefined,
+                readOnly: state.readOnly,
                 inputMode,
                 onClick() {
                     syncSelectionFromDOM();

package/dist/esm/components/RangeDatePicker/RangeDatePicker.js

@@ -19,7 +19,7 @@ export function RangeDatePicker(_a) {
     const state = useRangeDatePickerState(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = useDatePickerProps(state, props);
     const isOnlyTime = state.hasTime && !state.hasDate;
-    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!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(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : (_jsx(RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field'), hasClear: fieldProps.hasClear, endContent: _jsxs(React.Fragment, { children: [!isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon }))] }) })), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!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(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : (_jsx(RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field'), endContent: _jsxs(React.Fragment, { children: [!isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon }))] }) })), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
                     state.dateFieldState.setDate(v);
                 }, value: state.value, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
 }

package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldProps.js

@@ -34,6 +34,7 @@ export function useRelativeDateFieldProps(state, props) {
                 'aria-describedby': props['aria-describedby'] || undefined,
                 'aria-details': props['aria-details'] || undefined,
                 'aria-disabled': state.disabled || undefined,
+                readOnly: state.readOnly,
             },
         },
         calendarProps: {

package/dist/esm/components/RelativeRangeDatePicker/RelativeRangeDatePicker.js

@@ -57,6 +57,7 @@ export function RelativeRangeDatePicker(props) {
                     role: 'combobox',
                     'aria-expanded': open,
                     disabled: isMobile,
+                    readOnly: props.readOnly,
                     className: b('input', { mobile: isMobile }),
                     onClick: () => {
                         if (props.disabled) {

package/dist/esm/components/RelativeRangeDatePicker/components/Zones/Zones.js

@@ -40,14 +40,14 @@ const b = block('relative-range-date-picker-zones');
 export function Zones(props) {
     const timeZone = normalizeTimeZone(props.value);
     const size = props.isMobile ? 'xl' : props.size;
-    return (_jsx(Select, { value: [timeZone], options: zones, size: size, onUpdate: (v) => {
+    return (_jsx(Select, { disabled: props.disabled, value: [timeZone], options: zones, size: size, onUpdate: (v) => {
             const tz = v[0];
             if (tz) {
                 props.onUpdate(tz);
             }
         }, width: "max", renderControl: (controlProps) => {
             const value = timeZone === 'system' || timeZone === 'default' ? i18n(timeZone) : timeZone;
-            return (_jsxs(Button, { onClick: controlProps.onClick, ref: controlProps.ref, view: "flat-secondary", width: "max", pin: "clear-clear", size: size, extraProps: {
+            return (_jsxs(Button, { onClick: controlProps.onClick, ref: controlProps.ref, view: "flat-secondary", width: "max", pin: "clear-clear", size: size, disabled: props.disabled, extraProps: {
                     'aria-haspopup': 'listbox',
                     'aria-expanded': controlProps.open,
                     onKeyDown: controlProps.onKeyDown,

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

@@ -1,8 +1,11 @@
 import type { DateTime } from '@gravity-ui/date-utils';
+export declare function isWeekend(date: DateTime): boolean;
 export 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 constrainValue(value: DateTime, minValue: DateTime | undefined, maxValue: DateTime | undefined): DateTime;
 export declare function mergeDateTime(date: DateTime, time: DateTime): DateTime;
+export declare function formatDateTime(date: DateTime, format: string, timezone: string): string;

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

@@ -1,4 +1,7 @@
 import { dateTime } from '@gravity-ui/date-utils';
+export function isWeekend(date) {
+    return [0, 6].includes(date.day());
+}
 export function createPlaceholderValue({ placeholderValue, timeZone }) {
     return (placeholderValue !== null && placeholderValue !== void 0 ? placeholderValue : dateTime({ timeZone }).set('hour', 0).set('minute', 0).set('second', 0));
 }
@@ -14,9 +17,21 @@ export function isInvalid(value, minValue, maxValue) {
     }
     return false;
 }
+export function constrainValue(value, minValue, maxValue) {
+    if (minValue && value.isBefore(minValue)) {
+        return minValue;
+    }
+    if (maxValue && maxValue.isBefore(value)) {
+        return maxValue;
+    }
+    return value;
+}
 export function mergeDateTime(date, time) {
     return date
         .set('hours', time.hour())
         .set('minutes', time.minute())
         .set('seconds', time.second());
 }
+export function formatDateTime(date, format, timezone) {
+    return dateTime({ input: date, timeZone: timezone }).format(format);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",