@cloud-ru/ds-calendar 1.0.22 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-calendar",
-  "version": "1.0.22",
+  "version": "1.1.1",
   "description": "Пакет календаря и выбора времени — Calendar с режимами даты, диапазона и месяца/года, TimePicker и TimePickerDropdown для времени в составе полей ввода.",
   "repository": {
     "type": "git",
@@ -48,16 +48,16 @@
     "@tanstack/react-virtual": "^3.14.8",
     "classnames": "^2.5.1",
     "weekstart": "^2.0.0",
-    "@cloud-ru/ds-button": "^1.0.4",
     "@cloud-ru/ds-adaptive": "^1.0.2",
     "@cloud-ru/ds-bottom-sheet": "^1.1.6",
-    "@cloud-ru/ds-divider": "^1.0.2",
-    "@cloud-ru/ds-list": "^2.2.4",
     "@cloud-ru/ds-dropdown": "^1.0.13",
+    "@cloud-ru/ds-button": "^1.0.4",
+    "@cloud-ru/ds-divider": "^1.0.2",
     "@cloud-ru/ds-icons": "^1.3.0",
     "@cloud-ru/ds-locale": "^1.0.0",
     "@cloud-ru/ds-materials": "^2.0.1",
-    "@cloud-ru/ds-utils": "^1.2.0",
-    "@cloud-ru/ds-scroll": "^1.0.5"
+    "@cloud-ru/ds-scroll": "^1.0.5",
+    "@cloud-ru/ds-list": "^2.2.5",
+    "@cloud-ru/ds-utils": "^1.2.0"
   }
 }

package/src/components/TimePickerDropdown/TimePickerDropdown.tsx

@@ -5,6 +5,7 @@ import { ReactNode } from 'react';
 
 import { DesktopTimePickerDropdown } from '../../helperComponents/DesktopTimePickerDropdown';
 import { MobileTimePickerDropdown } from '../../helperComponents/MobileTimePickerDropdown';
+import { TimePickerFooterMode } from '../../types';
 import { TimePickerProps } from '../TimePicker';
 
 type DropdownBridgeProps = Pick<
@@ -35,6 +36,8 @@ export type TimePickerDropdownProps = WithSupportProps<
     DropdownBridgeProps & {
       /** Контент триггера открытия dropdown */
       children?: ReactNode;
+      /** Режим футера. По умолчанию — current-time-and-apply */
+      footerMode?: TimePickerFooterMode;
       /** Закрыть dropdown после нажатия кнопки Apply */
       closeOnApply?: boolean;
       /** Колбек по нажатию Apply */

package/src/constants.ts

@@ -14,6 +14,11 @@ export const CALENDAR_MODE = {
   YearRange: 'year-range',
 } as const;
 
+export const TIME_PICKER_FOOTER_MODE = {
+  CurrentTimeAndApply: 'current-time-and-apply',
+  ApplyOnly: 'apply-only',
+} as const;
+
 export const RANGE_POSITION = {
   Out: 'out',
   Start: 'start',

package/src/helperComponents/DesktopTimePickerDropdown/DesktopTimePickerDropdown.tsx

@@ -8,7 +8,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { DEFAULT_LOCALE } from '../../components/TimePicker/constants';
 import styles from '../../components/TimePickerDropdown/styles.module.scss';
 import { TimePickerDropdownProps } from '../../components/TimePickerDropdown/TimePickerDropdown';
-import { SIZE } from '../../constants';
+import { SIZE, TIME_PICKER_FOOTER_MODE } from '../../constants';
 import { useTimePickerValueBridge } from '../../hooks';
 import { BuildCellPropsFunction } from '../../types';
 import { getLocale, getTestIdBuilder } from '../../utils';
@@ -33,6 +33,7 @@ export function DesktopTimePickerDropdown({
   today: todayProp,
   children,
   closeOnApply = false,
+  footerMode = TIME_PICKER_FOOTER_MODE.CurrentTimeAndApply,
   onApply,
   onCurrent,
   open: openProp,
@@ -175,7 +176,11 @@ export function DesktopTimePickerDropdown({
   // отдельный от `content` регион.
   const footer = (
     <CalendarContext.Provider value={calendarContextValue}>
-      <Footer onApply={handleApply} onCurrent={onCurrent} />
+      <Footer
+        onApply={handleApply}
+        onCurrent={onCurrent}
+        showCurrent={footerMode === TIME_PICKER_FOOTER_MODE.CurrentTimeAndApply}
+      />
     </CalendarContext.Provider>
   );
 

package/src/helperComponents/Footer/Footer.tsx

@@ -22,6 +22,7 @@ export type FooterProps = {
    * где обвязку даёт сам Dropdown.
    */
   inline?: boolean;
+  showCurrent?: boolean;
 };
 
 /**
@@ -30,7 +31,7 @@ export type FooterProps = {
  * modal / drawer / bottom-sheet (Figma `popupDropdownFooter`). Читает состояние из
  * `CalendarContext`, поэтому рендерится только внутри провайдера контекста.
  */
-export function Footer({ onApply, onCurrent, inline = false }: FooterProps) {
+export function Footer({ onApply, onCurrent, inline = false, showCurrent = true }: FooterProps) {
   const {
     viewMode,
     mode,
@@ -80,6 +81,10 @@ export function Footer({ onApply, onCurrent, inline = false }: FooterProps) {
   };
 
   const handleApplyKeyDown: KeyboardEventHandler = event => {
+    if (event.key === 'Tab' && event.shiftKey && !showCurrent) {
+      handleCurrentKeyDown(event);
+    }
+
     if (event.key === 'Tab' && !event.shiftKey) {
       onFocusLeave?.('next');
     }
@@ -132,15 +137,19 @@ export function Footer({ onApply, onCurrent, inline = false }: FooterProps) {
         onClick: handleApplySelection,
         onKeyDown: handleApplyKeyDown,
       }}
-      additionalButton={{
-        label: t('current'),
-        // `popupDropdownFooter` держит третью кнопку на `function`, а не на дефолтном
-        // из `FooterActions` `simple`: у `simple` остаётся горизонтальный паддинг.
-        view: VIEW.Function,
-        innerRef: currentButtonRef as RefObject<HTMLButtonElement>,
-        onClick: handleCurrentClick,
-        onKeyDown: handleCurrentKeyDown,
-      }}
+      additionalButton={
+        showCurrent
+          ? {
+              label: t('current'),
+              // `popupDropdownFooter` держит третью кнопку на `function`, а не на дефолтном
+              // из `FooterActions` `simple`: у `simple` остаётся горизонтальный паддинг.
+              view: VIEW.Function,
+              innerRef: currentButtonRef as RefObject<HTMLButtonElement>,
+              onClick: handleCurrentClick,
+              onKeyDown: handleCurrentKeyDown,
+            }
+          : undefined
+      }
       testIds={{
         approve: getTestId('apply-button') ?? '',
         additional: getTestId('current-button') ?? '',

package/src/helperComponents/MobileTimePickerDropdown/MobileTimePickerDropdown.tsx

@@ -3,7 +3,7 @@ import { extractSupportProps, useLayoutEffect, useUncontrolledProp, useValueCont
 import { useCallback, useMemo, useRef } from 'react';
 
 import { TimePickerDropdownProps } from '../../components/TimePickerDropdown/TimePickerDropdown';
-import { SIZE, TEST_IDS } from '../../constants';
+import { SIZE, TEST_IDS, TIME_PICKER_FOOTER_MODE } from '../../constants';
 import { useDateAndTime, useOpenTrigger, useTimeDrumHandlers } from '../../hooks';
 import { calendarLocale } from '../../locale';
 import { TimeValue } from '../../types';
@@ -22,6 +22,7 @@ export function MobileTimePickerDropdown({
   showSeconds = true,
   today: todayProp,
   closeOnApply = false,
+  footerMode = TIME_PICKER_FOOTER_MODE.CurrentTimeAndApply,
   onApply,
   onCurrent,
   open: openProp,
@@ -105,7 +106,11 @@ export function MobileTimePickerDropdown({
         title={t('time')}
         closeOnPopstate={closeOnPopstate}
         approveButton={{ label: t('apply'), disabled: !isTimeFilled(), onClick: handleApply }}
-        additionalButton={{ label: t('current'), view: 'function', onClick: handleCurrent }}
+        additionalButton={
+          footerMode === TIME_PICKER_FOOTER_MODE.CurrentTimeAndApply
+            ? { label: t('current'), view: 'function', onClick: handleCurrent }
+            : undefined
+        }
         footerTestIds={{ approve: TEST_IDS.timePickerMobileApply, additional: TEST_IDS.timePickerMobileCurrent }}
         content={
           <TimePickerDrum

package/src/helperComponents/TimePickerBase/TimePickerBase.tsx

@@ -102,7 +102,7 @@ export function TimePickerBase({ className, fixedWidth }: TimePickerBaseProps) {
             if (showSeconds) {
               secondsKeyboardNavigationRef.current?.focusItem(getDefaultItemId(seconds ?? 0));
             } else {
-              currentButtonRef.current?.focus();
+              (currentButtonRef.current ?? applyButtonRef.current)?.focus();
             }
           }
           break;
@@ -138,7 +138,7 @@ export function TimePickerBase({ className, fixedWidth }: TimePickerBaseProps) {
           if (event.shiftKey) {
             minutesKeyboardNavigationRef.current?.focusItem(getDefaultItemId(minutes ?? 0));
           } else {
-            currentButtonRef.current?.focus();
+            (currentButtonRef.current ?? applyButtonRef.current)?.focus();
           }
           break;
         case 'Enter':

package/src/types.ts

@@ -1,7 +1,7 @@
 import { ValueOf } from '@cloud-ru/ds-utils';
 import { KeyboardEventHandler } from 'react';
 
-import { CALENDAR_MODE, RANGE_POSITION, SIZE, VIEW_MODE } from './constants';
+import { CALENDAR_MODE, RANGE_POSITION, SIZE, TIME_PICKER_FOOTER_MODE, VIEW_MODE } from './constants';
 
 export type RangePosition = ValueOf<typeof RANGE_POSITION>;
 
@@ -54,6 +54,8 @@ export type FocusDirection = 'prev' | 'next';
 export type BuildCellProps = { isDisabled?: boolean; isHoliday?: boolean };
 export type BuildCellPropsFunction = (date: Date, viewMode: ViewMode) => BuildCellProps;
 
+export type TimePickerFooterMode = ValueOf<typeof TIME_PICKER_FOOTER_MODE>;
+
 export type TimeValue = {
   hours?: number;
   minutes?: number;