@gravity-ui/date-components 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -32,49 +32,54 @@
   "scripts": {
     "prepare": "husky install",
     "lint": "run-p lint:*",
-    "lint:js": "eslint --ext .js,.jsx,.ts,.tsx .",
-    "lint:styles": "stylelint 'src/**/*.scss'",
+    "lint:js": "eslint --ext .js,.jsx,.ts,.tsx --report-unused-disable-directives .",
+    "lint:styles": "stylelint --report-needless-disables 'src/**/*.scss'",
     "lint:other": "npm run prettier -- --check",
     "prettier": "prettier '**/*.{md,yaml,yml,json}'",
     "typecheck": "tsc --noEmit",
     "test": "jest",
     "clean": "gulp clean",
     "build": "gulp",
-    "start": "storybook dev",
+    "start": "storybook dev -p 7070",
     "build-storybook": "storybook build -c .storybook -o storybook-static",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/icons": "^2.2.0"
+    "@gravity-ui/icons": "^2.2.0",
+    "tslib": "2.6.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@commitlint/cli": "^17.6.7",
-    "@commitlint/config-conventional": "^17.6.7",
-    "@gravity-ui/eslint-config": "^2.1.1",
-    "@gravity-ui/prettier-config": "^1.0.1",
-    "@gravity-ui/stylelint-config": "^2.0.0",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@gravity-ui/eslint-config": "^3.1.1",
+    "@gravity-ui/prettier-config": "^1.1.0",
+    "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^5.0.0",
-    "@storybook/addon-a11y": "^7.2.1",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/api": "^7.2.1",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-viewport": "^7.6.7",
+    "@storybook/addons": "^7.6.7",
+    "@storybook/api": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.2.1",
-    "@storybook/react-webpack5": "^7.2.1",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.3",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
+    "@storybook/theming": "^7.6.7",
+    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
     "cross-env": "^7.0.3",
-    "eslint": "^8.45.0",
-    "eslint-plugin-testing-library": "^5.11.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-testing-library": "^6.2.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "gulp-dart-sass": "^1.1.0",
@@ -86,31 +91,30 @@
     "jest-transform-css": "^6.0.1",
     "nano-staged": "^0.8.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
+    "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.64.1",
-    "sass-loader": "^13.3.2",
-    "storybook": "^7.2.1",
+    "rimraf": "5.0.5",
+    "sass": "^1.69.7",
+    "sass-loader": "^13.3.3",
+    "storybook": "^7.6.7",
     "style-loader": "^3.3.3",
     "stylelint": "^15.10.2",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.1.6"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "@gravity-ui/uikit": "^5.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "overrides": {
-    "stylelint": "^15.10.2"
-  },
   "nano-staged": {
     "*.{scss}": [
-      "stylelint --fix --quiet"
+      "stylelint --fix --quiet --report-needless-disables"
     ],
     "*.{js,jsx,ts,tsx}": [
-      "eslint --fix --quiet"
+      "eslint --fix --quiet --report-unused-disable-directives"
     ],
     "*.{md,json,yml,yaml}": [
       "prettier --write"

package/dist/cjs/components/DatePicker/DesktopCalendar.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { type CalendarProps } from '../Calendar';
-import type { DatePickerProps } from './DatePicker';
-import type { DatePickerState } from './hooks/useDatePickerState';
-interface DesktopCalendarProps {
-    anchorRef: React.RefObject<HTMLElement>;
-    props: DatePickerProps;
-    state: DatePickerState;
-    renderCalendar?: (props: CalendarProps) => React.ReactNode;
-}
-export declare function DesktopCalendar({ anchorRef, props, state, renderCalendar }: DesktopCalendarProps): import("react/jsx-runtime").JSX.Element | null;
-interface DesktopCalendarButtonProps {
-    props: DatePickerProps;
-    state: DatePickerState;
-}
-export declare function DesktopCalendarButton({ props, state }: DesktopCalendarButtonProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/cjs/components/DatePicker/DesktopCalendar.js

@@ -1,65 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesktopCalendarButton = exports.DesktopCalendar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const icons_1 = require("@gravity-ui/icons");
-const uikit_1 = require("@gravity-ui/uikit");
-const Calendar_1 = require("../Calendar");
-const DateField_1 = require("../DateField");
-const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
-const i18n_1 = require("./i18n");
-const utils_1 = require("./utils");
-function DesktopCalendar({ anchorRef, props, state, renderCalendar }) {
-    var _a;
-    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
-        isDisabled: !state.isOpen,
-        onBlurWithin: () => {
-            state.setOpen(false);
-        },
-    });
-    if (!state.hasDate) {
-        return null;
-    }
-    const calendarProps = {
-        autoFocus: true,
-        size: props.size === 's' ? 'm' : props.size,
-        disabled: props.disabled,
-        readOnly: props.readOnly,
-        onUpdate: (d) => {
-            state.setDateValue(d);
-        },
-        defaultFocusedValue: (_a = state.dateValue) !== null && _a !== void 0 ? _a : undefined,
-        value: state.dateValue,
-        minValue: props.minValue,
-        maxValue: props.maxValue,
-        isDateUnavailable: props.isDateUnavailable,
-        timeZone: props.timeZone,
-    };
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: state.isOpen, anchorRef: anchorRef, onClose: () => {
-            state.setOpen(false);
-        }, restoreFocus: true, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, focusWithinProps, { className: (0, utils_1.b)('popup-content'), tabIndex: -1, children: [typeof renderCalendar === 'function' ? (renderCalendar(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, { className: (0, utils_1.b)('time-field'), size: props.size, readOnly: props.readOnly, value: state.timeValue, onUpdate: state.setTimeValue, placeholderValue: props.placeholderValue, minValue: props.minValue, maxValue: props.maxValue, timeZone: props.timeZone, format: state.timeFormat }) }))] })) }));
-}
-exports.DesktopCalendar = DesktopCalendar;
-function DesktopCalendarButton({ props, state }) {
-    const wasOpenBeforeClickRef = react_1.default.useRef(false);
-    if (!state.hasDate) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, extraProps: {
-            'aria-label': (0, i18n_1.i18n)('Calendar'),
-            'aria-haspopup': 'dialog',
-            'aria-expanded': state.isOpen,
-        }, onFocus: () => {
-            wasOpenBeforeClickRef.current = state.isOpen;
-        }, onClick: () => {
-            if (!wasOpenBeforeClickRef.current) {
-                state.setOpen(true);
-            }
-            wasOpenBeforeClickRef.current = false;
-        }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }));
-}
-exports.DesktopCalendarButton = DesktopCalendarButton;

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { type CalendarProps } from '../Calendar';
-import type { DatePickerProps } from './DatePicker';
-import type { DatePickerState } from './hooks/useDatePickerState';
-interface DesktopCalendarProps {
-    anchorRef: React.RefObject<HTMLElement>;
-    props: DatePickerProps;
-    state: DatePickerState;
-    renderCalendar?: (props: CalendarProps) => React.ReactNode;
-}
-export declare function DesktopCalendar({ anchorRef, props, state, renderCalendar }: DesktopCalendarProps): import("react/jsx-runtime").JSX.Element | null;
-interface DesktopCalendarButtonProps {
-    props: DatePickerProps;
-    state: DatePickerState;
-}
-export declare function DesktopCalendarButton({ props, state }: DesktopCalendarButtonProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

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

@@ -1,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Calendar as CalendarIcon } from '@gravity-ui/icons';
-import { Button, Icon, Popup, useFocusWithin } from '@gravity-ui/uikit';
-import { Calendar } from '../Calendar';
-import { DateField } from '../DateField';
-import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
-import { i18n } from './i18n';
-import { b } from './utils';
-export function DesktopCalendar({ anchorRef, props, state, renderCalendar }) {
-    var _a;
-    const { focusWithinProps } = useFocusWithin({
-        isDisabled: !state.isOpen,
-        onBlurWithin: () => {
-            state.setOpen(false);
-        },
-    });
-    if (!state.hasDate) {
-        return null;
-    }
-    const calendarProps = {
-        autoFocus: true,
-        size: props.size === 's' ? 'm' : props.size,
-        disabled: props.disabled,
-        readOnly: props.readOnly,
-        onUpdate: (d) => {
-            state.setDateValue(d);
-        },
-        defaultFocusedValue: (_a = state.dateValue) !== null && _a !== void 0 ? _a : undefined,
-        value: state.dateValue,
-        minValue: props.minValue,
-        maxValue: props.maxValue,
-        isDateUnavailable: props.isDateUnavailable,
-        timeZone: props.timeZone,
-    };
-    return (_jsx(Popup, { open: state.isOpen, anchorRef: anchorRef, onClose: () => {
-            state.setOpen(false);
-        }, restoreFocus: true, children: _jsxs("div", Object.assign({}, focusWithinProps, { className: b('popup-content'), tabIndex: -1, children: [typeof renderCalendar === 'function' ? (renderCalendar(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, { className: b('time-field'), size: props.size, readOnly: props.readOnly, value: state.timeValue, onUpdate: state.setTimeValue, placeholderValue: props.placeholderValue, minValue: props.minValue, maxValue: props.maxValue, timeZone: props.timeZone, format: state.timeFormat }) }))] })) }));
-}
-export function DesktopCalendarButton({ props, state }) {
-    const wasOpenBeforeClickRef = React.useRef(false);
-    if (!state.hasDate) {
-        return null;
-    }
-    return (_jsx(Button, { view: "flat", size: getButtonSizeForInput(props.size), disabled: props.disabled, extraProps: {
-            'aria-label': i18n('Calendar'),
-            'aria-haspopup': 'dialog',
-            'aria-expanded': state.isOpen,
-        }, onFocus: () => {
-            wasOpenBeforeClickRef.current = state.isOpen;
-        }, onClick: () => {
-            if (!wasOpenBeforeClickRef.current) {
-                state.setOpen(true);
-            }
-            wasOpenBeforeClickRef.current = false;
-        }, children: _jsx(Icon, { data: CalendarIcon }) }));
-}