@cloud-ru/ds-calendar 1.0.0

package/src/helperComponents/DecadeView/index.ts

@@ -0,0 +1 @@
+export * from './DecadeView';

package/src/helperComponents/DecadeView/utils.ts

@@ -0,0 +1,19 @@
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
+import { BaseGrid, BaseGridItem } from '../../types';
+
+export const buildDecadeGrid = (date: Date): BaseGrid => {
+  const result: BaseGrid = [];
+  const year = date.getFullYear();
+  let shift = -1;
+  const { rows, columns } = GRID_SIZE[VIEW_MODE.Decade];
+
+  for (let i = 0; i < rows; i++) {
+    const row: BaseGridItem[] = [];
+    for (let j = 0; j < columns; j++) {
+      row.push({ date: new Date(year + shift++, 0, 1), address: [i, j] });
+    }
+    result.push(row);
+  }
+
+  return result;
+};

package/src/helperComponents/DesktopCalendarDropdown/DesktopCalendarDropdown.tsx

@@ -0,0 +1,80 @@
+import { Dropdown } from '@cloud-ru/ds-dropdown';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useCallback, useMemo } from 'react';
+
+import { Calendar } from '../../components/Calendar';
+import { CalendarDropdownProps } from '../../components/CalendarDropdown/CalendarDropdown';
+import styles from '../../components/CalendarDropdown/styles.module.scss';
+import { getTestIdBuilder } from '../../utils';
+import { Footer } from '../Footer';
+
+export function DesktopCalendarDropdown({
+  children,
+  closeOnApply = false,
+  onApply,
+  onCurrent,
+  open: openProp,
+  onOpenChange,
+  triggerClassName,
+  trigger = 'click',
+  placement = 'bottom-start',
+  hoverDelayOpen,
+  hoverDelayClose,
+  closeOnEscapeKey,
+  triggerClickByKeys,
+  triggerRef,
+  outsideClick,
+  fallbackPlacements,
+  disableSpanWrapper,
+  closeOnPopstate,
+  className,
+  'data-test-id': testId,
+  ...calendarProps
+}: CalendarDropdownProps) {
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+
+  const getTestId = useMemo(() => getTestIdBuilder(testId), [testId]);
+
+  const handleFooterApply = useCallback(() => {
+    onApply?.();
+
+    if (closeOnApply) {
+      setOpen(false);
+    }
+  }, [closeOnApply, onApply, setOpen]);
+
+  const content = (
+    <div className={cn(styles.calendarDropdownContent, className)} data-test-id={getTestId('content')}>
+      <Calendar {...calendarProps} bottomSlot={<Footer inline onApply={handleFooterApply} onCurrent={onCurrent} />} />
+    </div>
+  );
+
+  return (
+    <Dropdown
+      className={styles.dropdown}
+      // Календарь сам управляет внутренними отступами (header/body/footer) — общий padding
+      // dropdown-контейнера в макете отсутствует.
+      bodyPadding={false}
+      data-test-id={testId}
+      triggerClassName={triggerClassName}
+      trigger={trigger}
+      placement={placement}
+      hoverDelayOpen={hoverDelayOpen}
+      hoverDelayClose={hoverDelayClose}
+      closeOnEscapeKey={closeOnEscapeKey}
+      triggerClickByKeys={triggerClickByKeys}
+      triggerRef={triggerRef}
+      outsideClick={outsideClick}
+      fallbackPlacements={fallbackPlacements}
+      disableSpanWrapper={disableSpanWrapper}
+      closeOnPopstate={closeOnPopstate}
+      open={open}
+      onOpenChange={setOpen}
+      content={content}
+      widthStrategy='gte'
+    >
+      {children}
+    </Dropdown>
+  );
+}

package/src/helperComponents/DesktopCalendarDropdown/index.ts

@@ -0,0 +1 @@
+export * from './DesktopCalendarDropdown';

package/src/helperComponents/DesktopTimePickerDropdown/DesktopTimePickerDropdown.tsx

@@ -0,0 +1,209 @@
+import { Dropdown } from '@cloud-ru/ds-dropdown';
+import { ListProps } from '@cloud-ru/ds-list';
+import { useLang } from '@cloud-ru/ds-locale';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+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 { useTimePickerValueBridge } from '../../hooks';
+import { BuildCellPropsFunction } from '../../types';
+import { getLocale, getTestIdBuilder } from '../../utils';
+import { CalendarContext, CalendarContextType } from '../CalendarContext';
+import { Footer } from '../Footer';
+import { TimePickerBase } from '../TimePickerBase';
+
+const stubFunc = () => {};
+const stubBuildCellProps: BuildCellPropsFunction = () => ({ isDisabled: false, isHoliday: false });
+
+export function DesktopTimePickerDropdown({
+  className,
+  size = SIZE.M,
+  fitToContainer = false,
+  value: valueProp,
+  defaultValue,
+  onChangeValue,
+  onFocusLeave,
+  'data-test-id': testId,
+  navigationStartRef,
+  showSeconds = true,
+  today: todayProp,
+  children,
+  closeOnApply = false,
+  onApply,
+  onCurrent,
+  open: openProp,
+  onOpenChange,
+  triggerClassName,
+  trigger = 'click',
+  placement = 'bottom-start',
+  hoverDelayOpen,
+  hoverDelayClose,
+  closeOnEscapeKey,
+  triggerClickByKeys,
+  triggerRef,
+  outsideClick,
+  fallbackPlacements,
+  disableSpanWrapper,
+  closeOnPopstate,
+}: TimePickerDropdownProps) {
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+  const [focus, setFocus] = useState<string | undefined>(undefined);
+  const today = useMemo(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+
+  const {
+    internalValue,
+    setValue,
+    dateAndTime,
+    onTimeChange,
+    onDateChange,
+    onDateAndTimeChange,
+    isDateFilled,
+    isTimeFilled,
+    isDateAndTimeFilled,
+  } = useTimePickerValueBridge({ value: valueProp, defaultValue, onChangeValue, showSeconds });
+
+  const applyButtonRef = useRef<HTMLButtonElement>(null);
+  const currentButtonRef = useRef<HTMLButtonElement>(null);
+  const hoursKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => {} });
+  const minutesKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => {} });
+  const secondsKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => {} });
+
+  const getTestId = useMemo(() => getTestIdBuilder(testId), [testId]);
+
+  const ctxLang = useLang();
+
+  const locale = useMemo(() => getLocale({ localeProp: DEFAULT_LOCALE, ctxLang }), [ctxLang]);
+
+  const handleApply = useCallback(() => {
+    onApply?.();
+
+    if (closeOnApply) {
+      setOpen(false);
+    }
+  }, [closeOnApply, onApply, setOpen]);
+
+  const calendarContextValue = useMemo<CalendarContextType>(() => {
+    const stubDate = new Date();
+
+    return {
+      mode: 'time',
+      locale,
+      size,
+      value: internalValue,
+      fitToContainer,
+      focus,
+      setValue,
+      setFocus,
+      getTestId,
+      onFocusLeave,
+      navigationStartRef,
+      showSeconds,
+      dateAndTime,
+      onTimeChange,
+      onDateAndTimeChange,
+      isTimeFilled,
+      applyButtonRef,
+      currentButtonRef,
+      hoursKeyboardNavigationRef,
+      minutesKeyboardNavigationRef,
+      secondsKeyboardNavigationRef,
+      today,
+
+      // Stub props
+      viewMode: 'month',
+      showHolidays: false,
+      viewDate: stubDate,
+      referenceDate: stubDate,
+      preselectedRange: undefined,
+      viewShift: 0,
+      setViewMode: stubFunc,
+      setViewShift: stubFunc,
+      startPreselect: stubFunc,
+      continuePreselect: stubFunc,
+      completePreselect: stubFunc,
+      restartPreselect: stubFunc,
+      buildCellProps: stubBuildCellProps,
+      onDateChange,
+      isDateAndTimeFilled,
+      isDateFilled,
+    };
+  }, [
+    applyButtonRef,
+    currentButtonRef,
+    dateAndTime,
+    fitToContainer,
+    focus,
+    getTestId,
+    hoursKeyboardNavigationRef,
+    internalValue,
+    isDateAndTimeFilled,
+    isDateFilled,
+    isTimeFilled,
+    locale,
+    minutesKeyboardNavigationRef,
+    navigationStartRef,
+    onDateAndTimeChange,
+    onDateChange,
+    onFocusLeave,
+    onTimeChange,
+    secondsKeyboardNavigationRef,
+    setFocus,
+    setValue,
+    showSeconds,
+    size,
+    today,
+  ]);
+
+  const content = (
+    <div
+      className={cn(styles.timePickerDropdownContent, className)}
+      data-size={size}
+      data-test-id={getTestId('content')}
+    >
+      <CalendarContext.Provider value={calendarContextValue}>
+        <TimePickerBase className={styles.timePickerBaseLimited} />
+      </CalendarContext.Provider>
+    </div>
+  );
+
+  // Футер вынесен в `bottomBar` дропдауна (`footer` + `footerDivider`) — divider и
+  // паддинги даёт сам Dropdown. Провайдер контекста дублируется здесь, т.к. `footer` —
+  // отдельный от `content` регион.
+  const footer = (
+    <CalendarContext.Provider value={calendarContextValue}>
+      <Footer onApply={handleApply} onCurrent={onCurrent} />
+    </CalendarContext.Provider>
+  );
+
+  return (
+    <Dropdown
+      className={styles.dropdown}
+      data-test-id={testId}
+      triggerClassName={triggerClassName}
+      trigger={trigger}
+      placement={placement}
+      hoverDelayOpen={hoverDelayOpen}
+      hoverDelayClose={hoverDelayClose}
+      closeOnEscapeKey={closeOnEscapeKey}
+      triggerClickByKeys={triggerClickByKeys}
+      triggerRef={triggerRef}
+      outsideClick={outsideClick}
+      fallbackPlacements={fallbackPlacements}
+      disableSpanWrapper={disableSpanWrapper}
+      closeOnPopstate={closeOnPopstate}
+      open={open}
+      onOpenChange={setOpen}
+      content={content}
+      footer={footer}
+      footerDivider
+      bodyPadding={false}
+      widthStrategy='gte'
+    >
+      {children}
+    </Dropdown>
+  );
+}

package/src/helperComponents/DesktopTimePickerDropdown/index.ts

@@ -0,0 +1 @@
+export * from './DesktopTimePickerDropdown';

package/src/helperComponents/Footer/Footer.tsx

@@ -0,0 +1,163 @@
+import { FooterActions } from '@cloud-ru/ds-bottom-sheet';
+import { VIEW } from '@cloud-ru/ds-button';
+import { Divider } from '@cloud-ru/ds-divider';
+import { getDefaultItemId } from '@cloud-ru/ds-list';
+import { KeyboardEventHandler, RefObject } from 'react';
+
+import { CALENDAR_MODE } from '../../constants';
+import { useCalendarContext } from '../../hooks';
+import { calendarLocale } from '../../locale';
+import { getMonthShift } from '../../utils';
+import styles from './styles.module.scss';
+
+export type FooterProps = {
+  /** Колбек по клику на Apply */
+  onApply?(): void;
+  /** Колбек по клику на Current */
+  onCurrent?(): void;
+  /**
+   * Inline-раскладка: футер рендерится внутри тела дропдауна (bottomSlot календаря),
+   * поэтому сам рисует divider, паддинги и полную ширину. По умолчанию (`false`)
+   * возвращает голые кнопки для `bottomBar`-слота дропдауна (`footer` + `footerDivider`),
+   * где обвязку даёт сам Dropdown.
+   */
+  inline?: boolean;
+};
+
+/**
+ * Футер календарных дропдаунов (Apply / Current). Кнопки собираются общим
+ * `FooterActions` из `@cloud-ru/ds-bottom-sheet` — единый источник правды с футерами
+ * modal / drawer / bottom-sheet (Figma `popupDropdownFooter`). Читает состояние из
+ * `CalendarContext`, поэтому рендерится только внутри провайдера контекста.
+ */
+export function Footer({ onApply, onCurrent, inline = false }: FooterProps) {
+  const {
+    viewMode,
+    mode,
+    today,
+    setValue,
+    dateAndTime,
+    isTimeFilled,
+    isDateAndTimeFilled,
+    onDateAndTimeChange,
+    applyButtonRef,
+    currentButtonRef,
+    hoursKeyboardNavigationRef,
+    minutesKeyboardNavigationRef,
+    secondsKeyboardNavigationRef,
+    showSeconds,
+    getTestId,
+    referenceDate,
+    setViewShift,
+    onFocusLeave,
+    size,
+  } = useCalendarContext();
+
+  const { t } = calendarLocale.useTranslations();
+
+  if (![CALENDAR_MODE.DateTime, 'time'].includes(mode) || viewMode !== 'month') {
+    return null;
+  }
+
+  const isApplyButtonDisabled = mode === 'time' ? !isTimeFilled() : !isDateAndTimeFilled();
+
+  const handleCurrentKeyDown: KeyboardEventHandler = event => {
+    if (event.key === 'Tab') {
+      if (event.shiftKey) {
+        event.preventDefault();
+
+        if (showSeconds) {
+          secondsKeyboardNavigationRef.current?.focusItem(getDefaultItemId(dateAndTime?.seconds ?? 0));
+        } else {
+          minutesKeyboardNavigationRef.current?.focusItem(getDefaultItemId(dateAndTime?.minutes ?? 0));
+        }
+      } else {
+        if (isApplyButtonDisabled) {
+          onFocusLeave?.('next');
+        }
+      }
+    }
+  };
+
+  const handleApplyKeyDown: KeyboardEventHandler = event => {
+    if (event.key === 'Tab' && !event.shiftKey) {
+      onFocusLeave?.('next');
+    }
+  };
+
+  const handleCurrentClick = () => {
+    const todayDate = today || new Date();
+
+    onDateAndTimeChange(todayDate);
+    setViewShift(getMonthShift(referenceDate, todayDate));
+
+    hoursKeyboardNavigationRef.current?.focusItem(getDefaultItemId(todayDate.getHours() ?? 0));
+    minutesKeyboardNavigationRef.current?.focusItem(getDefaultItemId(todayDate.getMinutes() ?? 0));
+    secondsKeyboardNavigationRef.current?.focusItem(getDefaultItemId(todayDate.getSeconds() ?? 0));
+
+    applyButtonRef.current?.focus();
+    onCurrent?.();
+  };
+
+  const handleApplySelection = () => {
+    if (!dateAndTime) {
+      return;
+    }
+
+    const todayDate = today || new Date();
+
+    const {
+      year = todayDate.getFullYear(),
+      month = todayDate.getMonth(),
+      day = todayDate.getDay(),
+      hours,
+      minutes,
+      seconds,
+    } = dateAndTime;
+
+    const newDate = new Date(year, month, day, hours, minutes, showSeconds ? seconds : 0);
+
+    setValue([newDate, newDate]);
+    onApply?.();
+  };
+
+  const actions = (
+    <FooterActions
+      // Кнопки футера следуют размеру календаря: в мастере дропдаунов они 24 / 32 / 40 при s / m / l.
+      size={size}
+      approveButton={{
+        label: t('apply'),
+        disabled: isApplyButtonDisabled,
+        innerRef: applyButtonRef as RefObject<HTMLButtonElement>,
+        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,
+      }}
+      testIds={{
+        approve: getTestId('apply-button') ?? '',
+        additional: getTestId('current-button') ?? '',
+        cancel: '',
+      }}
+      actionsClassName={inline ? styles.actions : undefined}
+    />
+  );
+
+  if (!inline) {
+    return actions;
+  }
+
+  return (
+    <div className={styles.inline}>
+      <Divider className={styles.divider} />
+      {actions}
+    </div>
+  );
+}

package/src/helperComponents/Footer/index.ts

@@ -0,0 +1 @@
+export * from './Footer';

package/src/helperComponents/Footer/styles.module.scss

@@ -0,0 +1,19 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/popupPrivate.module' as popupPrivate;
+
+// Inline-раскладка футера для календарного дропдауна: футер живёт внутри `bodyWrapper`
+// дропдауна (bottomSlot календаря), поэтому сам рисует divider, паддинги и полную
+// ширину — в отличие от `bottomBar`-слота дропдауна (time-picker), где это делает сам
+// Dropdown (`footer` + `footerDivider`).
+.inline {
+  display: flex;
+  flex-direction: column;
+}
+
+.divider {
+  flex-shrink: 0;
+}
+
+.actions {
+  @include base.composite-var(popupPrivate.$popupPrivate, 'anatomy', 'dropdown', 'footer');
+}

package/src/helperComponents/Grid/Grid.tsx

@@ -0,0 +1,52 @@
+import { CSSProperties, useMemo } from 'react';
+
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
+import { useCalendarContext } from '../../hooks';
+import { Cell } from '../../types';
+import { Item } from '../Item';
+import { WeekRow } from '../WeekRow';
+import styles from './styles.module.scss';
+
+export type GridProps = {
+  grid: Cell[][];
+};
+
+export function Grid({ grid }: GridProps) {
+  const { size, viewMode, fitToContainer } = useCalendarContext();
+
+  const gridConfig: CSSProperties = useMemo(() => {
+    const { columns } = GRID_SIZE[viewMode];
+    return {
+      gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    };
+  }, [viewMode]);
+
+  return (
+    <div className={styles.grid} data-fit-to-container={fitToContainer || undefined} style={gridConfig}>
+      {viewMode === VIEW_MODE.Month && <WeekRow />}
+      {grid.map((row, rowIndex) =>
+        row.map((cell, colIndex) => (
+          <Item
+            key={`${cell.label}_${rowIndex}_${colIndex}`}
+            label={cell.label}
+            size={size}
+            checked={cell.checked}
+            rangePosition={cell.rangePosition}
+            disabled={cell.disabled}
+            holiday={cell.holiday}
+            another={cell.another}
+            current={cell.current}
+            visible
+            tabIndex={cell.tabIndex}
+            address={cell.address}
+            date={cell.date}
+            onSelect={cell.onSelect}
+            onPreselect={cell.onPreselect}
+            onLeave={cell.onLeave}
+            onKeyDown={cell.onKeyDown}
+          />
+        )),
+      )}
+    </div>
+  );
+}

package/src/helperComponents/Grid/index.ts

@@ -0,0 +1 @@
+export * from './Grid';

package/src/helperComponents/Grid/styles.module.scss

@@ -0,0 +1,5 @@
+.grid {
+  display: grid;
+  width: 100%;
+  height: 100%;
+}

package/src/helperComponents/Header/Header.tsx

@@ -0,0 +1,123 @@
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+
+import { GRID_SIZE, SIZE, VIEW_MODE } from '../../constants';
+import { useCalendarContext } from '../../hooks';
+import { calendarLocale } from '../../locale';
+import { stringifyAddress } from '../../utils';
+import { NavButton } from '../NavButton';
+import { LEVEL_BUTTON_FOCUS_NAME, NEXT_PERIOD_BUTTON_FOCUS_NAME, PREV_PERIOD_BUTTON_FOCUS_NAME } from './constants';
+import { usePeriodName } from './hooks';
+import styles from './styles.module.scss';
+import { getShift } from './utils';
+
+const VIEW_MODE_MAP = {
+  [VIEW_MODE.Month]: VIEW_MODE.Year,
+  [VIEW_MODE.Year]: VIEW_MODE.Decade,
+  [VIEW_MODE.Decade]: VIEW_MODE.Decade,
+};
+
+const PERIOD_NAV_ARIA_KEYS = {
+  prev: {
+    [VIEW_MODE.Month]: 'prevPeriodMonth',
+    [VIEW_MODE.Year]: 'prevPeriodYear',
+    [VIEW_MODE.Decade]: 'prevPeriodDecade',
+  },
+  next: {
+    [VIEW_MODE.Month]: 'nextPeriodMonth',
+    [VIEW_MODE.Year]: 'nextPeriodYear',
+    [VIEW_MODE.Decade]: 'nextPeriodDecade',
+  },
+} as const;
+
+const ICONS = {
+  UP: {
+    [SIZE.S]: <ChevronUpSVG size={16} />,
+    [SIZE.M]: <ChevronUpSVG />,
+    [SIZE.L]: <ChevronUpSVG />,
+  },
+  DOWN: {
+    [SIZE.S]: <ChevronDownSVG size={16} />,
+    [SIZE.M]: <ChevronDownSVG />,
+    [SIZE.L]: <ChevronDownSVG />,
+  },
+};
+
+export function Header() {
+  const {
+    referenceDate,
+    viewDate,
+    viewShift,
+    setViewShift,
+    viewMode,
+    setViewMode,
+    focus,
+    setFocus,
+    getTestId,
+    size,
+    firstNotDisableCell,
+  } = useCalendarContext();
+  const periodName = usePeriodName();
+  const { t } = calendarLocale.useTranslations();
+
+  const prevPeriodAriaLabel = t(PERIOD_NAV_ARIA_KEYS.prev[viewMode]);
+  const nextPeriodAriaLabel = t(PERIOD_NAV_ARIA_KEYS.next[viewMode]);
+
+  const levelButtonDisabled = viewMode === VIEW_MODE.Decade;
+
+  const isArrowButtonFocused = focus && [NEXT_PERIOD_BUTTON_FOCUS_NAME, PREV_PERIOD_BUTTON_FOCUS_NAME].includes(focus);
+
+  const gridForMode = GRID_SIZE[viewMode];
+
+  return (
+    <div className={styles.header} data-size={size}>
+      <NavButton
+        disabled={levelButtonDisabled}
+        onClick={() => {
+          if (viewMode === VIEW_MODE.Year) {
+            setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME);
+          }
+          setViewShift(getShift(referenceDate, viewDate, viewMode));
+          setViewMode(VIEW_MODE_MAP[viewMode]);
+        }}
+        label={periodName}
+        data-test-id={getTestId('period-level')}
+        focusName={LEVEL_BUTTON_FOCUS_NAME}
+        tabIndex={levelButtonDisabled || isArrowButtonFocused ? -1 : 0}
+        icon={viewMode !== VIEW_MODE.Decade ? ICONS.DOWN[size] : undefined}
+        onRightArrowKeyDown={() => setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME)}
+        onDownArrowKeyDown={() => setFocus(stringifyAddress(firstNotDisableCell?.current ?? [0, 0]))}
+        useNavigationStartRef
+      />
+      <div className={styles.scrollControlWrapper}>
+        <NavButton
+          onClick={() => setViewShift(viewShift - 1)}
+          aria-label={prevPeriodAriaLabel}
+          data-test-id={getTestId('period-prev')}
+          focusName={PREV_PERIOD_BUTTON_FOCUS_NAME}
+          tabIndex={
+            focus === PREV_PERIOD_BUTTON_FOCUS_NAME || (levelButtonDisabled && focus !== NEXT_PERIOD_BUTTON_FOCUS_NAME)
+              ? 0
+              : -1
+          }
+          icon={ICONS.UP[size]}
+          onRightArrowKeyDown={() => setFocus(NEXT_PERIOD_BUTTON_FOCUS_NAME)}
+          onLeftArrowKeyDown={() => setFocus(LEVEL_BUTTON_FOCUS_NAME)}
+          onDownArrowKeyDown={() => {
+            const rightGap = viewMode === VIEW_MODE.Month ? 2 : 1;
+            setFocus(stringifyAddress([0, gridForMode.columns - rightGap]));
+          }}
+        />
+        <NavButton
+          onClick={() => setViewShift(viewShift + 1)}
+          aria-label={nextPeriodAriaLabel}
+          data-test-id={getTestId('period-next')}
+          focusName={NEXT_PERIOD_BUTTON_FOCUS_NAME}
+          tabIndex={focus === NEXT_PERIOD_BUTTON_FOCUS_NAME ? 0 : -1}
+          icon={ICONS.DOWN[size]}
+          onLeftArrowKeyDown={() => setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME)}
+          onDownArrowKeyDown={() => setFocus(stringifyAddress([0, gridForMode.columns - 1]))}
+        />
+      </div>
+    </div>
+  );
+}