@gravity-ui/date-components 1.0.0 → 1.1.1

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

@@ -6,7 +6,7 @@ export function useCalendarGridProps(state) {
             state.setFocused(isFocused);
         },
     });
-    const gridProps = Object.assign(Object.assign({ role: 'grid', 'aria-label': state.mode === 'years'
+    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) => {
             if (e.key === 'ArrowRight') {
@@ -40,12 +40,7 @@ export function useCalendarGridProps(state) {
                 state.zoomIn();
             }
             else if (e.key === 'Enter' || e.key === ' ') {
-                if (state.mode === 'days') {
-                    state.selectFocusedDate();
-                }
-                else {
-                    state.setMode(state.mode === 'months' ? 'days' : 'months');
-                }
+                state.selectDate(state.focusedDate);
             }
         } });
     return {

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

@@ -4,7 +4,7 @@ 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'
+    const title = state.mode === 'years' || state.mode === 'quarters'
         ? `${state.startDate.year()} — ${state.endDate.year()}`
         : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY');
     const { focusWithinProps } = useFocusWithin({
@@ -12,7 +12,10 @@ export function useCalendarProps(props, state) {
         onBlurWithin: props.onBlur,
     });
     const calendarProps = Object.assign({ role: 'group', id: props.id, 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '), 'aria-labelledby': props['aria-labelledby'] || undefined, 'aria-describedby': props['aria-describedby'] || undefined, 'aria-details': props['aria-details'] || undefined, 'aria-disabled': state.disabled || undefined }, focusWithinProps);
-    const modeDisabled = state.disabled || state.mode === 'years';
+    const modeIndex = state.availableModes.indexOf(state.mode);
+    const isModeLast = modeIndex + 1 === state.availableModes.length;
+    const isNextModeLast = modeIndex + 2 === state.availableModes.length;
+    const modeDisabled = state.disabled || isModeLast;
     const modeButtonProps = {
         disabled: state.disabled,
         // FIXME: do not use button class name
@@ -21,7 +24,7 @@ export function useCalendarProps(props, state) {
             ? undefined
             : () => {
                 state.zoomOut();
-                if (state.mode === 'months') {
+                if (isNextModeLast) {
                     state.setFocused(true);
                 }
             },

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

@@ -1,12 +1,20 @@
 import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
 import { useControlledState } from '../../hooks/useControlledState';
-import { constrainValue } from '../utils';
+import { createPlaceholderValue } from '../../utils/dates';
+import { calendarLayouts, constrainValue } from '../utils';
+const defaultModes = {
+    days: true,
+    months: true,
+    quarters: false,
+    years: true,
+};
 export function useCalendarState(props) {
-    const { disabled, readOnly, minValue, maxValue, timeZone } = props;
+    const { disabled, readOnly, minValue, maxValue, timeZone, modes = defaultModes } = props;
     const [value, setValue] = useControlledState(props.value, props.defaultValue, props.onUpdate);
     const [mode, setMode] = useControlledState(props.mode, props.defaultMode, props.onUpdateMode);
-    const currentMode = mode || 'days';
+    const availableModes = calendarLayouts.filter((l) => modes[l]);
+    const minMode = availableModes[0] || 'days';
+    const currentMode = mode && availableModes.includes(mode) ? mode : minMode;
     const focusedValue = React.useMemo(() => {
         if (!props.focusedValue) {
             return props.focusedValue;
@@ -14,17 +22,18 @@ export function useCalendarState(props) {
         return constrainValue(props.focusedValue, minValue, maxValue);
     }, [props.focusedValue, minValue, maxValue]);
     const defaultFocusedValue = React.useMemo(() => {
-        const defaultValue = (props.defaultFocusedValue ? props.defaultFocusedValue : value) || dateTime({ timeZone });
+        const defaultValue = (props.defaultFocusedValue ? props.defaultFocusedValue : value) ||
+            createPlaceholderValue({ timeZone }).startOf(minMode);
         return constrainValue(defaultValue, minValue, maxValue);
-    }, [maxValue, minValue, props.defaultFocusedValue, timeZone, value]);
+    }, [maxValue, minValue, props.defaultFocusedValue, timeZone, value, minMode]);
     const [focusedDateInner, setFocusedDate] = useControlledState(focusedValue, defaultFocusedValue, props.onFocusUpdate);
-    const focusedDate = focusedDateInner !== null && focusedDateInner !== void 0 ? focusedDateInner : constrainValue(dateTime({ timeZone }), minValue, maxValue);
+    const focusedDate = focusedDateInner !== null && focusedDateInner !== void 0 ? focusedDateInner : constrainValue(createPlaceholderValue({ timeZone }).startOf(minMode), 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(constrainValue(focusedDate, minValue, maxValue));
     }
     function focusCell(date) {
-        setFocusedDate(constrainValue(date, minValue, maxValue));
+        setFocusedDate(constrainValue(date.startOf(currentMode), minValue, maxValue));
     }
     const [isFocused, setFocused] = React.useState(props.autoFocus || false);
     const startDate = getStartDate(focusedDate, currentMode);
@@ -35,13 +44,21 @@ export function useCalendarState(props) {
         value,
         setValue,
         timeZone,
-        selectDate(date) {
-            if (!disabled && !readOnly) {
-                const newValue = constrainValue(date, minValue, maxValue);
-                if (this.isCellUnavailable(newValue)) {
-                    return;
+        selectDate(date, force = false) {
+            if (!disabled) {
+                if (!readOnly && (force || this.mode === minMode)) {
+                    const newValue = constrainValue(date, minValue, maxValue);
+                    if (this.isCellUnavailable(newValue)) {
+                        return;
+                    }
+                    setValue(newValue);
+                    if (force && currentMode !== minMode) {
+                        setMode(minMode);
+                    }
+                }
+                else {
+                    this.zoomIn();
                 }
-                setValue(constrainValue(newValue, minValue, maxValue));
             }
         },
         minValue,
@@ -54,41 +71,53 @@ export function useCalendarState(props) {
             setFocused(true);
         },
         focusNextCell() {
-            focusCell(focusedDate.add({ [this.mode]: 1 }));
+            focusCell(focusedDate.add(1, this.mode));
         },
         focusPreviousCell() {
-            focusCell(focusedDate.subtract({ [this.mode]: 1 }));
+            focusCell(focusedDate.subtract(1, this.mode));
         },
         focusNextRow() {
             if (this.mode === 'days') {
                 focusCell(focusedDate.add(1, 'week'));
             }
+            else if (this.mode === 'quarters') {
+                focusCell(focusedDate.add(1, 'years'));
+            }
             else {
-                focusCell(focusedDate.add({ [this.mode]: 3 }));
+                focusCell(focusedDate.add(3, this.mode));
             }
         },
         focusPreviousRow() {
             if (this.mode === 'days') {
                 focusCell(focusedDate.subtract(1, 'week'));
             }
+            else if (this.mode === 'quarters') {
+                focusCell(focusedDate.subtract(1, 'years'));
+            }
             else {
-                focusCell(focusedDate.subtract({ [this.mode]: 3 }));
+                focusCell(focusedDate.subtract(3, this.mode));
             }
         },
         focusNextPage(larger) {
             if (this.mode === 'days') {
                 focusCell(focusedDate.add({ months: larger ? 12 : 1 }));
             }
+            else if (this.mode === 'quarters') {
+                focusCell(focusedDate.add(4, 'years'));
+            }
             else {
-                focusCell(focusedDate.add({ [this.mode]: 12 }));
+                focusCell(focusedDate.add(12, this.mode));
             }
         },
         focusPreviousPage(larger) {
             if (this.mode === 'days') {
                 focusCell(focusedDate.subtract({ months: larger ? 12 : 1 }));
             }
+            else if (this.mode === 'quarters') {
+                focusCell(focusedDate.subtract(4, 'years'));
+            }
             else {
-                focusCell(focusedDate.subtract({ [this.mode]: 12 }));
+                focusCell(focusedDate.subtract(12, this.mode));
             }
         },
         focusSectionStart() {
@@ -98,13 +127,19 @@ export function useCalendarState(props) {
             focusCell(getEndDate(focusedDate, this.mode));
         },
         zoomIn() {
-            this.setMode(this.mode === 'years' ? 'months' : 'days');
+            const index = availableModes.indexOf(this.mode) - 1;
+            if (index >= 0) {
+                this.setMode(availableModes[index]);
+            }
         },
         zoomOut() {
-            this.setMode(this.mode === 'days' ? 'months' : 'years');
+            const index = availableModes.indexOf(this.mode) + 1;
+            if (index < availableModes.length) {
+                this.setMode(availableModes[index]);
+            }
         },
         selectFocusedDate() {
-            this.selectDate(focusedDate);
+            this.selectDate(focusedDate, true);
         },
         isFocused,
         setFocused,
@@ -112,11 +147,11 @@ export function useCalendarState(props) {
             return isInvalid(date, this.minValue, this.maxValue, this.mode);
         },
         isPreviousPageInvalid() {
-            const prev = this.startDate.add({ days: -1 });
+            const prev = this.startDate.subtract(1, 'day');
             return this.isInvalid(prev);
         },
         isNextPageInvalid() {
-            const next = this.endDate.add({ days: 1 });
+            const next = this.endDate.endOf(this.mode).add(1, 'day');
             return this.isInvalid(next);
         },
         isSelected(date) {
@@ -125,7 +160,7 @@ export function useCalendarState(props) {
                 !this.isCellDisabled(date));
         },
         isCellUnavailable(date) {
-            if (this.mode === 'days') {
+            if (this.mode === minMode) {
                 return Boolean(props.isDateUnavailable && props.isDateUnavailable(date));
             }
             else {
@@ -143,6 +178,7 @@ export function useCalendarState(props) {
         },
         mode: currentMode,
         setMode,
+        availableModes,
     };
 }
 function getStartDate(date, mode) {
@@ -152,6 +188,10 @@ function getStartDate(date, mode) {
     if (mode === 'months') {
         return date.startOf('year');
     }
+    if (mode === 'quarters') {
+        const year = Math.floor(date.year() / 4) * 4;
+        return date.startOf('year').set('year', year);
+    }
     const year = Math.floor(date.year() / 12) * 12;
     return date.startOf('year').set('year', year);
 }
@@ -160,9 +200,12 @@ function getEndDate(date, mode) {
         return date.endOf('month').startOf('day');
     }
     if (mode === 'months') {
-        return date.endOf('month').startOf('day');
+        return date.endOf('year').startOf('month');
     }
     const startDate = getStartDate(date, mode);
+    if (mode === 'quarters') {
+        return startDate.add(15, 'quarters');
+    }
     return startDate.add({ [mode]: 11 });
 }
 function isInvalid(date, minValue, maxValue, mode = 'days') {

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

@@ -20,10 +20,18 @@ export function useRangeCalendarState(props) {
     const [anchorDate, setAnchorDateState] = React.useState();
     const calendar = useCalendarState(Object.assign(Object.assign({}, calendarProps), { value: (_a = value === null || value === void 0 ? void 0 : value.start) !== null && _a !== void 0 ? _a : null }));
     const highlightedRange = anchorDate
-        ? makeRange(anchorDate, calendar.focusedDate)
-        : (_b = (value && makeRange(value.start, value.end))) !== null && _b !== void 0 ? _b : undefined;
-    const selectDate = (date) => {
-        if (props.disabled || props.readOnly) {
+        ? makeRange(anchorDate, calendar.focusedDate, calendar.mode)
+        : (_b = (value && makeRange(value.start, value.end, calendar.mode))) !== null && _b !== void 0 ? _b : undefined;
+    const minMode = calendar.availableModes[0];
+    const selectDate = (date, force = false) => {
+        if (props.disabled) {
+            return;
+        }
+        if (!force && calendar.mode !== minMode) {
+            calendar.zoomIn();
+            return;
+        }
+        if (props.readOnly) {
             return;
         }
         date = constrainValue(date, props.minValue, props.maxValue);
@@ -31,7 +39,7 @@ export function useRangeCalendarState(props) {
             return;
         }
         if (anchorDate) {
-            const range = makeRange(anchorDate, date);
+            const range = makeRange(anchorDate, date, calendar.mode);
             setValue(range);
             setAnchorDateState(undefined);
         }
@@ -43,9 +51,6 @@ export function useRangeCalendarState(props) {
         setValue,
         selectDate,
         anchorDate, setAnchorDate: setAnchorDateState, highlightedRange,
-        selectFocusedDate() {
-            selectDate(calendar.focusedDate);
-        },
         isSelected(date) {
             if (!highlightedRange) {
                 return false;
@@ -61,15 +66,15 @@ export function useRangeCalendarState(props) {
             }
         } });
 }
-function makeRange(start, end) {
+function makeRange(start, end, mode) {
     if (start.isBefore(end)) {
         return {
             start,
-            end,
+            end: end.endOf(mode),
         };
     }
     return {
         start: end,
-        end: start,
+        end: start.endOf(mode),
     };
 }

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

@@ -1,4 +1,6 @@
 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: 'days' | 'months' | 'years'): 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/Calendar/utils.js

@@ -16,6 +16,11 @@ export function getDaysInPeriod(startDate, _endDate, mode) {
             days.push(currentDate.add({ days: i }));
         }
     }
+    else if (mode === 'quarters') {
+        for (let i = 0; i < 16; i++) {
+            days.push(startDate.add(i, 'quarters'));
+        }
+    }
     else {
         for (let i = 0; i < 12; i++) {
             days.push(startDate.add({ [mode]: i }));
@@ -32,3 +37,4 @@ export function getWeekDays() {
     }
     return weekDays;
 }
+export const calendarLayouts = ['days', 'months', 'quarters', 'years'];

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

@@ -80,12 +80,16 @@ export function useDateFieldProps(state, props) {
                 if (state.selectedSectionIndexes !== null) {
                     return;
                 }
-                const input = inputRef.current;
+                const input = e.target;
+                const isAutofocus = !inputRef.current;
                 setTimeout(() => {
                     if (!input || input !== inputRef.current) {
                         return;
                     }
-                    if (
+                    if (isAutofocus) {
+                        state.focusSectionInPosition(0);
+                    }
+                    else if (
                     // avoid selecting all sections when focusing empty field without value
                     input.value.length &&
                         Number(input.selectionEnd) - Number(input.selectionStart) ===
@@ -115,11 +119,11 @@ export function useDateFieldProps(state, props) {
                 }
                 else if (e.key === 'Home') {
                     e.preventDefault();
-                    state.focusFirstSection();
+                    state.decrementToMin();
                 }
                 else if (e.key === 'End') {
                     e.preventDefault();
-                    state.focusLastSection();
+                    state.incrementToMax();
                 }
                 else if (e.key === 'ArrowUp' && !e.altKey) {
                     e.preventDefault();
@@ -163,32 +167,35 @@ export function useDateFieldProps(state, props) {
                 onBeforeInput(e) {
                     e.preventDefault();
                     // @ts-expect-error
-                    const key = e.nativeEvent.data;
-                    // eslint-disable-next-line no-eq-null, eqeqeq
-                    if (key != null) {
+                    const key = e.data;
+                    if (key !== undefined && key !== null) {
                         state.onInput(key);
                     }
                 },
                 onPaste(e) {
+                    e.preventDefault();
                     if (state.readOnly) {
-                        e.preventDefault();
                         return;
                     }
                     const pastedValue = e.clipboardData.getData('text');
-                    if (state.setValueFromString(pastedValue)) {
-                        e.preventDefault();
-                    }
-                    else if (state.selectedSectionIndexes &&
+                    if (state.selectedSectionIndexes &&
                         state.selectedSectionIndexes.startIndex ===
                             state.selectedSectionIndexes.endIndex) {
                         const activeSection = state.sections[state.selectedSectionIndexes.startIndex];
+                        const digitsOnly = /^\d+$/.test(pastedValue);
+                        const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
                         const isValidValue = Boolean(activeSection) &&
-                            ((activeSection.contentType === 'digit' && /^\d+$/.test(pastedValue)) ||
-                                activeSection.contentType === 'letter');
-                        if (!isValidValue) {
-                            e.preventDefault();
+                            ((activeSection.contentType === 'digit' && digitsOnly) ||
+                                (activeSection.contentType === 'letter' && lettersOnly));
+                        if (isValidValue) {
+                            state.onInput(pastedValue);
+                            return;
+                        }
+                        if (digitsOnly || lettersOnly) {
+                            return;
                         }
                     }
+                    state.setValueFromString(pastedValue);
                 },
             },
         },

package/dist/esm/components/DateField/hooks/useDateFieldState.d.ts

@@ -56,6 +56,8 @@ export type DateFieldState = {
      * Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
      */
     decrementPage: () => void;
+    incrementToMax: () => void;
+    decrementToMin: () => void;
     /** Clears the value of the currently selected segment, reverting it to the placeholder. */
     clearSection: () => void;
     /** Clears all segments, reverting them to the placeholder. */