feat(CalendarView): cellFocusable prop

src/components/Calendar/README.md

@@ -183,6 +183,7 @@ LANDING_BLOCK-->
 | aria-label                            | The control's `aria-label` attribute                                                                                 |                             `string`                             |                                                             |
 | aria-labelledby                       | The control's `aria-labelledby` attribute                                                                            |                             `string`                             |                                                             |
 | autoFocus                             | The control's `autofocus` attribute                                                                                  |                            `boolean`                             |                                                             |
+| cellFocusable                         | The control's `cellFocusable` attribute                                                                              |                            `boolean`                             |                                                             |
 | className                             | The control's wrapper class name                                                                                     |                             `string`                             |                                                             |
 | [defaultFocusedValue](#focused-value) | The date that is focused when the calendar first mounts (uncontrolled)                                               |                            `DateTime`                            |                                                             |
 | [defaultMode](#mode)                  | Initial mode to show in calendar                                                                                     |                `days` `months` `quarters` `years`                |                                                             |

src/components/Calendar/__stories__/Calendar.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {dateTime, dateTimeParse} from '@gravity-ui/date-utils';
 import type {DateTime} from '@gravity-ui/date-utils';
-import {Tab, TabList, TabPanel, TabProvider} from '@gravity-ui/uikit';
+import {Popup, Tab, TabList, TabPanel, TabProvider, Text, TextInput} from '@gravity-ui/uikit';
 import {toaster} from '@gravity-ui/uikit/toaster-singleton';
 import {action} from '@storybook/addon-actions';
 import type {Meta, StoryObj} from '@storybook/react';
@@ -169,3 +169,41 @@ export const Custom: Story = {
         controls: {exclude: ['mode', 'defaultMode', 'modes']},
     },
 };
+
+export const InputFocus: Story = {
+    ...Default,
+    render: function InputFocus(args) {
+        const [inputFocused, setInputFocused] = React.useState(false);
+
+        // Code from Tokenized Input
+        // Prevent losing focus on the input when clicking on the popup
+        const onMouseDown = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+            e.preventDefault();
+        }, []);
+
+        const inputRef = React.useRef<HTMLInputElement>(null);
+
+        return (
+            <div>
+                <Text as="h3">
+                    When clicking in the calendar, the focus on the input should not be lost.
+                </Text>
+                <TextInput
+                    style={{width: 200}}
+                    ref={inputRef}
+                    type="text"
+                    onFocus={() => {
+                        setInputFocused(true);
+                    }}
+                    onBlur={() => {
+                        setInputFocused(false);
+                    }}
+                />
+                <Popup anchorElement={inputRef?.current} open={inputFocused} returnFocus={false}>
+                    {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions*/}
+                    <div onMouseDown={onMouseDown}>{Default.render?.({...args})}</div>
+                </Popup>
+            </div>
+        );
+    },
+};

src/components/CalendarView/hooks/types.ts

@@ -25,6 +25,10 @@ export interface CalendarStateOptionsBase extends InputBase {
     autoFocus?: boolean;
     /** Controls the currently focused date within the calendar. */
     focusedValue?: DateTime | null;
+    /** Whether to automatically focus the cell
+     * * @default true
+     */
+    cellFocusable?: boolean;
     /** The date that is focused when the calendar first mounts (uncontrolled). */
     defaultFocusedValue?: DateTime;
     /** Handler that is called when the focused date changes. */

src/components/CalendarView/hooks/useCalendarState.ts

@@ -46,6 +46,8 @@ export function useCalendarState(props: CalendarStateOptions): CalendarState {
     );
     const timeZone = props.timeZone || inputTimeZone;
 
+    const cellFocusable = props.cellFocusable ?? true;
+
     const minValue = React.useMemo(
         () => (props.minValue ? props.minValue.timeZone(timeZone) : undefined),
         [timeZone, props.minValue],
@@ -225,7 +227,12 @@ export function useCalendarState(props: CalendarStateOptions): CalendarState {
             }
         },
         isCellFocused(date: DateTime) {
-            return this.isFocused && focusedDate && date.isSame(focusedDate, currentMode);
+            return (
+                cellFocusable &&
+                this.isFocused &&
+                focusedDate &&
+                date.isSame(focusedDate, currentMode)
+            );
         },
         isCellDisabled(date: DateTime) {
             return this.disabled || this.isInvalid(date);