@gravity-ui/date-components 2.5.0 → 2.6.0

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { CalendarProps } from '../Calendar';
-import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import type { DatePickerStateOptions } from './hooks/datePickerStateFactory';
 import './DatePicker.css';
-export interface DatePickerProps<T = DateTime> extends DateFieldBase<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
+export interface DatePickerProps<T = DateTime> extends DatePickerStateOptions<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
     children?: (props: CalendarProps<T>) => React.ReactNode;
+    disablePortal?: boolean;
+    disableFocusTrap?: boolean;
 }
 export declare function DatePicker({ className, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/DatePicker/hooks/datePickerStateFactory.d.ts

@@ -1,6 +1,7 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { DateFieldState } from '../../DateField';
-import type { DateFieldBase } from '../../types';
+import type { DateFieldBase, PopupTriggerProps } from '../../types';
+type OpenChangeReason = 'EscapeKeyDown' | 'FocusOut' | 'ClickOutside' | 'ValueSelected' | 'TriggerButtonClick' | 'ShortcutKeyDown';
 export interface DatePickerState<T = DateTime> {
     /** The currently selected date. */
     value: T | null;
@@ -36,7 +37,7 @@ export interface DatePickerState<T = DateTime> {
     /** Whether the calendar popover is currently open. */
     isOpen: boolean;
     /** Sets whether the calendar popover is open. */
-    setOpen: (isOpen: boolean) => void;
+    setOpen: (isOpen: boolean, reason: OpenChangeReason) => void;
     dateFieldState: DateFieldState<T>;
 }
 export interface DatePickerStateFactoryOptions<T, O extends DateFieldBase<T>> {
@@ -46,4 +47,7 @@ export interface DatePickerStateFactoryOptions<T, O extends DateFieldBase<T>> {
     getDateTime: (date: T | null | undefined) => DateTime | undefined;
     useDateFieldState: (props: O) => DateFieldState<T>;
 }
-export declare function datePickerStateFactory<T, O extends DateFieldBase<T>>({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }: DatePickerStateFactoryOptions<T, O>): (props: O) => DatePickerState<T>;
+export interface DatePickerStateOptions<T> extends DateFieldBase<T>, PopupTriggerProps<[OpenChangeReason]> {
+}
+export declare function datePickerStateFactory<T, O extends DatePickerStateOptions<T>>({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }: DatePickerStateFactoryOptions<T, O>): (props: O) => DatePickerState<T>;
+export {};

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

@@ -7,10 +7,11 @@ const uikit_1 = require("@gravity-ui/uikit");
 const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
 function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }) {
     return function useDatePickerState(props) {
-        var _a;
+        var _a, _b;
         const { disabled, readOnly } = props;
-        const [isOpen, setOpen] = react_1.default.useState(false);
-        const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
+        const [isOpen, _setOpen] = (0, uikit_1.useControlledState)(props.open, (_a = props.defaultOpen) !== null && _a !== void 0 ? _a : false, props.onOpenChange);
+        const setOpen = _setOpen;
+        const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_b = props.defaultValue) !== null && _b !== void 0 ? _b : null, props.onUpdate);
         const [selectedDateInner, setSelectedDate] = react_1.default.useState(null);
         const [selectedTimeInner, setSelectedTime] = react_1.default.useState(null);
         const inputTimeZone = (0, useDefaultTimeZone_1.useDefaultTimeZone)(getDateTime(props.value) || getDateTime(props.defaultValue) || props.placeholderValue);
@@ -65,7 +66,7 @@ function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setTimezone
                 commitValue(newValue, newValue);
             }
             if (shouldClose) {
-                setOpen(false);
+                setOpen(false, 'ValueSelected');
             }
         };
         const selectTime = (newValue) => {
@@ -108,11 +109,11 @@ function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setTimezone
             timeFormat,
             timeZone,
             isOpen,
-            setOpen(newIsOpen) {
+            setOpen(newIsOpen, reason) {
                 if (!newIsOpen && !value && selectedDate && dateFieldState.hasTime) {
                     commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
                 }
-                setOpen(newIsOpen);
+                setOpen(newIsOpen, reason);
             },
             dateFieldState,
         };

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePickerProps = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const date_utils_1 = require("@gravity-ui/date-utils");
 const uikit_1 = require("@gravity-ui/uikit");
 const DateField_1 = require("../../DateField");
 const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput");
@@ -12,13 +13,31 @@ const utils_1 = require("../utils");
 function useDatePickerProps(state, _a) {
     var { onFocus, onBlur } = _a, props = tslib_1.__rest(_a, ["onFocus", "onBlur"]);
     const [isActive, setActive] = react_1.default.useState(false);
+    const [focusedDate, setFocusedDate] = react_1.default.useState((0, date_utils_1.isDateTime)(state.dateFieldState.displayValue)
+        ? state.dateFieldState.displayValue
+        : state.dateFieldState.displayValue.start);
+    const [prevDateValue, setPrevDateValue] = react_1.default.useState(state.dateFieldState.displayValue);
+    if ((0, date_utils_1.isDateTime)(state.dateFieldState.displayValue)) {
+        if (!state.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {
+            setPrevDateValue(state.dateFieldState.displayValue);
+            setFocusedDate(state.dateFieldState.displayValue);
+        }
+    }
+    else if (!state.dateFieldState.displayValue.start.isSame(prevDateValue.start, 'day')) {
+        setPrevDateValue(state.dateFieldState.displayValue);
+        setFocusedDate(state.dateFieldState.displayValue.start);
+    }
+    else if (!state.dateFieldState.displayValue.end.isSame(prevDateValue.end, 'day')) {
+        setPrevDateValue(state.dateFieldState.displayValue);
+        setFocusedDate(state.dateFieldState.displayValue.end);
+    }
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
         onFocusWithin: onFocus,
         onBlurWithin: onBlur,
         onFocusWithinChange(isFocusWithin) {
             setActive(isFocusWithin);
             if (!isFocusWithin) {
-                state.setOpen(false);
+                state.setOpen(false, 'FocusOut');
             }
         },
     });
@@ -40,7 +59,7 @@ function useDatePickerProps(state, _a) {
                 if (!onlyTime && e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
                     e.preventDefault();
                     e.stopPropagation();
-                    state.setOpen(true);
+                    state.setOpen(true, 'ShortcutKeyDown');
                 }
             } }),
         fieldProps: (0, mergeProps_1.mergeProps)(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
@@ -58,25 +77,31 @@ function useDatePickerProps(state, _a) {
             view: 'flat-secondary',
             onClick: () => {
                 setActive(true);
-                state.setOpen(!state.isOpen);
+                state.setOpen(!state.isOpen, 'TriggerButtonClick');
             },
         },
         popupProps: {
             open: state.isOpen,
             onEscapeKeyDown: () => {
-                state.setOpen(false);
+                state.setOpen(false, 'EscapeKeyDown');
                 focusInput();
             },
             onOutsideClick: (e) => {
                 var _a;
                 if (e.target !== calendarButtonRef.current) {
-                    state.setOpen(false);
+                    state.setOpen(false, 'ClickOutside');
                 }
                 if (e.target && ((_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                     focusInput();
                 }
             },
-            focusTrap: true,
+            onTransitionExited: () => {
+                setFocusedDate((0, date_utils_1.isDateTime)(state.dateFieldState.displayValue)
+                    ? state.dateFieldState.displayValue
+                    : state.dateFieldState.displayValue.start);
+            },
+            focusTrap: !props.disableFocusTrap,
+            disablePortal: props.disablePortal,
         },
         calendarProps: {
             ref: calendarRef,
@@ -95,6 +120,8 @@ function useDatePickerProps(state, _a) {
             maxValue: props.maxValue,
             isDateUnavailable: props.isDateUnavailable,
             timeZone: state.timeZone,
+            focusedValue: focusedDate,
+            onFocusUpdate: setFocusedDate,
         },
         timeInputProps: {
             value: state.timeValue,

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

@@ -55,7 +55,7 @@ function RelativeRangeDatePicker(props) {
         }), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
     const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
     const errorMessage = (_a = props.errorMessage) !== null && _a !== void 0 ? _a : state.errors.join('\n');
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { id: props.id, autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
                     if (!props.readOnly && !v) {
                         state.setValue(null, 'default');
                     }

package/dist/cjs/components/types/datePicker.d.ts

@@ -17,3 +17,11 @@ export interface DateFieldBase<T = DateTime> extends ValueBase<T | null>, InputB
      */
     timeZone?: string;
 }
+export interface PopupTriggerProps<Args extends unknown[] = []> {
+    /** Whether the popup is open (controlled). */
+    open?: boolean;
+    /** Whether the popup is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the popup's open state changes. */
+    onOpenChange?: (open: boolean, ...args: Args) => void;
+}

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { CalendarProps } from '../Calendar';
-import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import type { DatePickerStateOptions } from './hooks/datePickerStateFactory';
 import './DatePicker.css';
-export interface DatePickerProps<T = DateTime> extends DateFieldBase<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
+export interface DatePickerProps<T = DateTime> extends DatePickerStateOptions<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
     children?: (props: CalendarProps<T>) => React.ReactNode;
+    disablePortal?: boolean;
+    disableFocusTrap?: boolean;
 }
 export declare function DatePicker({ className, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/DatePicker/hooks/datePickerStateFactory.d.ts

@@ -1,6 +1,7 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { DateFieldState } from '../../DateField';
-import type { DateFieldBase } from '../../types';
+import type { DateFieldBase, PopupTriggerProps } from '../../types';
+type OpenChangeReason = 'EscapeKeyDown' | 'FocusOut' | 'ClickOutside' | 'ValueSelected' | 'TriggerButtonClick' | 'ShortcutKeyDown';
 export interface DatePickerState<T = DateTime> {
     /** The currently selected date. */
     value: T | null;
@@ -36,7 +37,7 @@ export interface DatePickerState<T = DateTime> {
     /** Whether the calendar popover is currently open. */
     isOpen: boolean;
     /** Sets whether the calendar popover is open. */
-    setOpen: (isOpen: boolean) => void;
+    setOpen: (isOpen: boolean, reason: OpenChangeReason) => void;
     dateFieldState: DateFieldState<T>;
 }
 export interface DatePickerStateFactoryOptions<T, O extends DateFieldBase<T>> {
@@ -46,4 +47,7 @@ export interface DatePickerStateFactoryOptions<T, O extends DateFieldBase<T>> {
     getDateTime: (date: T | null | undefined) => DateTime | undefined;
     useDateFieldState: (props: O) => DateFieldState<T>;
 }
-export declare function datePickerStateFactory<T, O extends DateFieldBase<T>>({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }: DatePickerStateFactoryOptions<T, O>): (props: O) => DatePickerState<T>;
+export interface DatePickerStateOptions<T> extends DateFieldBase<T>, PopupTriggerProps<[OpenChangeReason]> {
+}
+export declare function datePickerStateFactory<T, O extends DatePickerStateOptions<T>>({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }: DatePickerStateFactoryOptions<T, O>): (props: O) => DatePickerState<T>;
+export {};

package/dist/esm/components/DatePicker/hooks/datePickerStateFactory.js

@@ -3,10 +3,11 @@ import { useControlledState } from '@gravity-ui/uikit';
 import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
 export function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }) {
     return function useDatePickerState(props) {
-        var _a;
+        var _a, _b;
         const { disabled, readOnly } = props;
-        const [isOpen, setOpen] = React.useState(false);
-        const [value, setValue] = useControlledState(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
+        const [isOpen, _setOpen] = useControlledState(props.open, (_a = props.defaultOpen) !== null && _a !== void 0 ? _a : false, props.onOpenChange);
+        const setOpen = _setOpen;
+        const [value, setValue] = useControlledState(props.value, (_b = props.defaultValue) !== null && _b !== void 0 ? _b : null, props.onUpdate);
         const [selectedDateInner, setSelectedDate] = React.useState(null);
         const [selectedTimeInner, setSelectedTime] = React.useState(null);
         const inputTimeZone = useDefaultTimeZone(getDateTime(props.value) || getDateTime(props.defaultValue) || props.placeholderValue);
@@ -61,7 +62,7 @@ export function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setT
                 commitValue(newValue, newValue);
             }
             if (shouldClose) {
-                setOpen(false);
+                setOpen(false, 'ValueSelected');
             }
         };
         const selectTime = (newValue) => {
@@ -104,11 +105,11 @@ export function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setT
             timeFormat,
             timeZone,
             isOpen,
-            setOpen(newIsOpen) {
+            setOpen(newIsOpen, reason) {
                 if (!newIsOpen && !value && selectedDate && dateFieldState.hasTime) {
                     commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
                 }
-                setOpen(newIsOpen);
+                setOpen(newIsOpen, reason);
             },
             dateFieldState,
         };

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import React from 'react';
+import { isDateTime } from '@gravity-ui/date-utils';
 import { useFocusWithin, useForkRef } from '@gravity-ui/uikit';
 import { useDateFieldProps } from '../../DateField';
 import { getButtonSizeForInput } from '../../utils/getButtonSizeForInput';
@@ -9,13 +10,31 @@ import { getDateTimeValue } from '../utils';
 export function useDatePickerProps(state, _a) {
     var { onFocus, onBlur } = _a, props = __rest(_a, ["onFocus", "onBlur"]);
     const [isActive, setActive] = React.useState(false);
+    const [focusedDate, setFocusedDate] = React.useState(isDateTime(state.dateFieldState.displayValue)
+        ? state.dateFieldState.displayValue
+        : state.dateFieldState.displayValue.start);
+    const [prevDateValue, setPrevDateValue] = React.useState(state.dateFieldState.displayValue);
+    if (isDateTime(state.dateFieldState.displayValue)) {
+        if (!state.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {
+            setPrevDateValue(state.dateFieldState.displayValue);
+            setFocusedDate(state.dateFieldState.displayValue);
+        }
+    }
+    else if (!state.dateFieldState.displayValue.start.isSame(prevDateValue.start, 'day')) {
+        setPrevDateValue(state.dateFieldState.displayValue);
+        setFocusedDate(state.dateFieldState.displayValue.start);
+    }
+    else if (!state.dateFieldState.displayValue.end.isSame(prevDateValue.end, 'day')) {
+        setPrevDateValue(state.dateFieldState.displayValue);
+        setFocusedDate(state.dateFieldState.displayValue.end);
+    }
     const { focusWithinProps } = useFocusWithin({
         onFocusWithin: onFocus,
         onBlurWithin: onBlur,
         onFocusWithinChange(isFocusWithin) {
             setActive(isFocusWithin);
             if (!isFocusWithin) {
-                state.setOpen(false);
+                state.setOpen(false, 'FocusOut');
             }
         },
     });
@@ -37,7 +56,7 @@ export function useDatePickerProps(state, _a) {
                 if (!onlyTime && e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
                     e.preventDefault();
                     e.stopPropagation();
-                    state.setOpen(true);
+                    state.setOpen(true, 'ShortcutKeyDown');
                 }
             } }),
         fieldProps: mergeProps(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
@@ -55,25 +74,31 @@ export function useDatePickerProps(state, _a) {
             view: 'flat-secondary',
             onClick: () => {
                 setActive(true);
-                state.setOpen(!state.isOpen);
+                state.setOpen(!state.isOpen, 'TriggerButtonClick');
             },
         },
         popupProps: {
             open: state.isOpen,
             onEscapeKeyDown: () => {
-                state.setOpen(false);
+                state.setOpen(false, 'EscapeKeyDown');
                 focusInput();
             },
             onOutsideClick: (e) => {
                 var _a;
                 if (e.target !== calendarButtonRef.current) {
-                    state.setOpen(false);
+                    state.setOpen(false, 'ClickOutside');
                 }
                 if (e.target && ((_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                     focusInput();
                 }
             },
-            focusTrap: true,
+            onTransitionExited: () => {
+                setFocusedDate(isDateTime(state.dateFieldState.displayValue)
+                    ? state.dateFieldState.displayValue
+                    : state.dateFieldState.displayValue.start);
+            },
+            focusTrap: !props.disableFocusTrap,
+            disablePortal: props.disablePortal,
         },
         calendarProps: {
             ref: calendarRef,
@@ -92,6 +117,8 @@ export function useDatePickerProps(state, _a) {
             maxValue: props.maxValue,
             isDateUnavailable: props.isDateUnavailable,
             timeZone: state.timeZone,
+            focusedValue: focusedDate,
+            onFocusUpdate: setFocusedDate,
         },
         timeInputProps: {
             value: state.timeValue,

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

@@ -51,7 +51,7 @@ export function RelativeRangeDatePicker(props) {
         }), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
     const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
     const errorMessage = (_a = props.errorMessage) !== null && _a !== void 0 ? _a : state.errors.join('\n');
-    return (_jsxs("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [_jsx(TextInput, { autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
+    return (_jsxs("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [_jsx(TextInput, { id: props.id, autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
                     if (!props.readOnly && !v) {
                         state.setValue(null, 'default');
                     }

package/dist/esm/components/types/datePicker.d.ts

@@ -17,3 +17,11 @@ export interface DateFieldBase<T = DateTime> extends ValueBase<T | null>, InputB
      */
     timeZone?: string;
 }
+export interface PopupTriggerProps<Args extends unknown[] = []> {
+    /** Whether the popup is open (controlled). */
+    open?: boolean;
+    /** Whether the popup is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the popup's open state changes. */
+    onOpenChange?: (open: boolean, ...args: Args) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -61,17 +61,18 @@
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^6.15.0",
-    "@storybook/addon-a11y": "^8.1.3",
-    "@storybook/addon-essentials": "^8.1.3",
-    "@storybook/addon-viewport": "^8.1.3",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-storysource": "8.1.10",
+    "@storybook/addon-viewport": "^8.1.10",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.1.3",
-    "@storybook/manager-api": "^8.1.3",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/manager-api": "^8.1.10",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.1.3",
-    "@storybook/react-webpack5": "^8.1.3",
-    "@storybook/theming": "^8.1.3",
-    "@storybook/types": "^8.1.3",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@storybook/theming": "^8.1.10",
+    "@storybook/types": "^8.1.10",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -98,7 +99,7 @@
     "react-dom": "^18.3.1",
     "rimraf": "^5.0.7",
     "sass": "^1.77.1",
-    "storybook": "^8.1.3",
+    "storybook": "^8.1.10",
     "stylelint": "^15.11.0",
     "stylelint-use-logical": "^2.1.2",
     "ts-jest": "^29.1.5",