@gravity-ui/date-components 1.1.0 → 1.2.0

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

@@ -50,43 +50,6 @@
   height: 100%;
   padding: 0 var(--_--calendar-padding) var(--_--calendar-padding);
 }
-.g-date-calendar__content_animation_forward {
-  transform: translateX(-100%);
-  animation: calendar-forward 0.25s ease forwards;
-}
-.g-date-calendar__content_animation_forward.g-date-calendar__current-state {
-  left: -100%;
-}
-.g-date-calendar__content_animation_backward {
-  transform: translateX(0);
-  animation: calendar-backward 0.25s ease forwards;
-}
-.g-date-calendar__content_animation_backward.g-date-calendar__current-state {
-  left: 100%;
-}
-.g-date-calendar__content_animation_zoom-in {
-  transform: scale();
-}
-.g-date-calendar__content_animation_zoom-in.g-date-calendar__previous-state {
-  animation: calendar-zoom-in-hiding 0.25s ease forwards;
-}
-.g-date-calendar__content_animation_zoom-in.g-date-calendar__current-state {
-  animation: calendar-zoom-in-showing 0.25s ease forwards;
-}
-.g-date-calendar__content_animation_zoom-out {
-  transform: scale();
-}
-.g-date-calendar__content_animation_zoom-out.g-date-calendar__current-state {
-  animation: calendar-zoom-out-showing 0.25s ease forwards;
-}
-.g-date-calendar__content_animation_zoom-out.g-date-calendar__previous-state {
-  animation: calendar-zoom-out-hiding 0.25s ease forwards;
-}
-@media screen and (prefers-reduced-motion: reduce), (update: slow) {
-  .g-date-calendar__content[class] {
-    animation-duration: 0.001ms;
-  }
-}
 @keyframes calendar-forward {
   from {
     transform: translateX(0);
@@ -143,6 +106,43 @@
     transform: scale(2);
   }
 }
+.g-date-calendar__content_animation_forward {
+  transform: translateX(-100%);
+  animation: calendar-forward 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_forward.g-date-calendar__current-state {
+  left: -100%;
+}
+.g-date-calendar__content_animation_backward {
+  transform: translateX(0);
+  animation: calendar-backward 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_backward.g-date-calendar__current-state {
+  left: 100%;
+}
+.g-date-calendar__content_animation_zoom-in {
+  transform: scale();
+}
+.g-date-calendar__content_animation_zoom-in.g-date-calendar__previous-state {
+  animation: calendar-zoom-in-hiding 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_zoom-in.g-date-calendar__current-state {
+  animation: calendar-zoom-in-showing 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_zoom-out {
+  transform: scale();
+}
+.g-date-calendar__content_animation_zoom-out.g-date-calendar__current-state {
+  animation: calendar-zoom-out-showing 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_zoom-out.g-date-calendar__previous-state {
+  animation: calendar-zoom-out-hiding 0.25s ease forwards;
+}
+@media screen and (prefers-reduced-motion: reduce), (update: slow) {
+  .g-date-calendar__content[class] {
+    animation-duration: 0.001ms;
+  }
+}
 .g-date-calendar__grid-rowgroup {
   display: grid;
   gap: var(--_--calendar-days-gap);

package/dist/cjs/components/Calendar/Calendar.js

@@ -1,11 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calendar = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const CalendarBase_1 = require("./CalendarBase");
 const useCalendarState_1 = require("./hooks/useCalendarState");
 require("./Calendar.css");

package/dist/cjs/components/Calendar/CalendarBase.js

@@ -1,11 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalendarBase = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
 const useCalendarCellProps_1 = require("./hooks/useCalendarCellProps");

package/dist/cjs/components/Calendar/RangeCalendar.js

@@ -1,11 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RangeCalendar = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const CalendarBase_1 = require("./CalendarBase");
 const useRangeCalendarState_1 = require("./hooks/useRangeCalendarState");
 require("./Calendar.css");

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

@@ -1,10 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarCellProps = void 0;
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const date_utils_1 = require("@gravity-ui/date-utils");
 function useCalendarCellProps(date, state) {
     const ref = react_1.default.useRef(null);

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

@@ -12,36 +12,47 @@ function useCalendarGridProps(state) {
             ? `${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') {
+                e.preventDefault();
                 state.focusNextCell();
             }
             else if (e.key === 'ArrowLeft') {
+                e.preventDefault();
                 state.focusPreviousCell();
             }
             else if (e.key === 'ArrowDown') {
+                e.preventDefault();
                 state.focusNextRow();
             }
             else if (e.key === 'ArrowUp') {
+                e.preventDefault();
                 state.focusPreviousRow();
             }
             else if (e.key === 'PageDown') {
+                e.preventDefault();
                 state.focusNextPage(e.shiftKey);
             }
             else if (e.key === 'PageUp') {
+                e.preventDefault();
                 state.focusPreviousPage(e.shiftKey);
             }
             else if (e.key === 'End') {
+                e.preventDefault();
                 state.focusSectionEnd();
             }
             else if (e.key === 'Home') {
+                e.preventDefault();
                 state.focusSectionStart();
             }
             else if (e.code === 'Minus') {
+                e.preventDefault();
                 state.zoomOut();
             }
             else if (e.code === 'Equal') {
+                e.preventDefault();
                 state.zoomIn();
             }
             else if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
                 state.selectDate(state.focusedDate);
             }
         } });

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

@@ -1,10 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarProps = void 0;
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const i18n_1 = require("../i18n");
 const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';

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

@@ -1,10 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarState = void 0;
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const useControlledState_1 = require("../../hooks/useControlledState");
 const dates_1 = require("../../utils/dates");
 const utils_1 = require("../utils");

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

@@ -1,35 +1,30 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRangeCalendarState = void 0;
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const useControlledState_1 = require("../../hooks/useControlledState");
 const utils_1 = require("../utils");
 const useCalendarState_1 = require("./useCalendarState");
 function useRangeCalendarState(props) {
     var _a, _b;
-    const { value: valueProp, defaultValue, onUpdate } = props, calendarProps = __rest(props, ["value", "defaultValue", "onUpdate"]);
+    const { value: valueProp, defaultValue, onUpdate } = props, calendarProps = tslib_1.__rest(props, ["value", "defaultValue", "onUpdate"]);
     const [value, setValue] = (0, useControlledState_1.useControlledState)(valueProp, defaultValue, onUpdate);
     const [anchorDate, setAnchorDateState] = react_1.default.useState();
     const calendar = (0, useCalendarState_1.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, calendar.mode)
         : (_b = (value && makeRange(value.start, value.end, calendar.mode))) !== null && _b !== void 0 ? _b : undefined;
-    const selectDate = (date) => {
-        if (props.disabled || props.readOnly) {
+    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 = (0, utils_1.constrainValue)(date, props.minValue, props.maxValue);
@@ -49,9 +44,6 @@ function useRangeCalendarState(props) {
         setValue,
         selectDate,
         anchorDate, setAnchorDate: setAnchorDateState, highlightedRange,
-        selectFocusedDate() {
-            selectDate(calendar.focusedDate);
-        },
         isSelected(date) {
             if (!highlightedRange) {
                 return false;

package/dist/cjs/components/Calendar/i18n/index.js

@@ -1,11 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.i18n = void 0;
+const tslib_1 = require("tslib");
 const i18n_1 = require("@gravity-ui/uikit/i18n");
 const cn_1 = require("../../../utils/cn");
-const en_json_1 = __importDefault(require("./en.json"));
-const ru_json_1 = __importDefault(require("./ru.json"));
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
 exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}calendar`);

package/dist/cjs/components/Calendar/index.js

@@ -1,23 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Calendar"), exports);
-__exportStar(require("./RangeCalendar"), exports);
-__exportStar(require("./hooks/useCalendarState"), exports);
-__exportStar(require("./hooks/useRangeCalendarState"), exports);
-__exportStar(require("./hooks/useCalendarProps"), exports);
-__exportStar(require("./hooks/useCalendarGridProps"), exports);
-__exportStar(require("./hooks/useCalendarCellProps"), exports);
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Calendar"), exports);
+tslib_1.__exportStar(require("./RangeCalendar"), exports);
+tslib_1.__exportStar(require("./hooks/useCalendarState"), exports);
+tslib_1.__exportStar(require("./hooks/useRangeCalendarState"), exports);
+tslib_1.__exportStar(require("./hooks/useCalendarProps"), exports);
+tslib_1.__exportStar(require("./hooks/useCalendarGridProps"), exports);
+tslib_1.__exportStar(require("./hooks/useCalendarCellProps"), exports);

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

@@ -1,22 +1,9 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateField = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
 const useDateFieldProps_1 = require("./hooks/useDateFieldProps");
@@ -24,7 +11,7 @@ const useDateFieldState_1 = require("./hooks/useDateFieldState");
 require("./DateField.css");
 const b = (0, cn_1.block)('date-field');
 function DateField(_a) {
-    var { className } = _a, props = __rest(_a, ["className"]);
+    var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
     const state = (0, useDateFieldState_1.useDateFieldState)(props);
     const { inputProps } = (0, useDateFieldProps_1.useDateFieldProps)(state, props);
     const [isActive, setActive] = react_1.default.useState(false);

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

@@ -1,10 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDateFieldProps = void 0;
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../utils");
 function useDateFieldProps(state, props) {
     const inputRef = react_1.default.useRef(null);
@@ -86,12 +84,16 @@ 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) ===
@@ -147,7 +149,7 @@ function useDateFieldProps(state, props) {
                     e.preventDefault();
                     state.clearSection();
                 }
-                else if (e.key === 'a' && e[utils_1.CtrlCmd]) {
+                else if (e.key === 'a' && (e['ctrlKey'] || e['metaKey'])) {
                     e.preventDefault();
                     setSelectedSections('all');
                 }
@@ -169,32 +171,35 @@ 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 &&
+                    const pastedValue = (0, utils_1.cleanString)(e.clipboardData.getData('text'));
+                    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);
                 },
             },
         },