@cloud-ru/ds-calendar 1.0.0

package/src/constants.ts

@@ -0,0 +1,68 @@
+export const VIEW_MODE = {
+  Month: 'month',
+  Year: 'year',
+  Decade: 'decade',
+} as const;
+
+export const CALENDAR_MODE = {
+  Date: 'date',
+  DateTime: 'date-time',
+  DateRange: 'date-range',
+  Month: 'month',
+  MonthRange: 'month-range',
+  Year: 'year',
+  YearRange: 'year-range',
+} as const;
+
+export const RANGE_POSITION = {
+  Out: 'out',
+  Start: 'start',
+  In: 'in',
+  End: 'end',
+  StartEnd: 'start-end', // equals to 'out'
+} as const;
+
+export const SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
+
+export const GRID_SIZE = {
+  [VIEW_MODE.Month]: { rows: 6, columns: 7 },
+  [VIEW_MODE.Year]: { rows: 4, columns: 3 },
+  [VIEW_MODE.Decade]: { rows: 4, columns: 3 },
+} as const;
+
+export const AUTOFOCUS = 'autofocus';
+
+/** Playground / E2E — синхронизировать со stories (`data-test-id`). */
+export const TEST_IDS = {
+  calendarPlayground: 'calendar-playground',
+  calendarValueHolder: 'calendar-value-holder',
+  calendarDropdown: 'calendar-dropdown',
+  calendarDropdownTrigger: 'calendar-dropdown-trigger',
+  calendarDropdownContent: 'content-calendar-dropdown',
+  timePickerPlayground: 'timepicker-playground',
+  timePickerValueHolder: 'timepicker-value-holder',
+  timePickerDropdown: 'time-picker-dropdown',
+  timePickerDropdownTrigger: 'time-picker-dropdown-trigger',
+  timePickerDropdownContent: 'content-time-picker-dropdown',
+  timePickerDrum: 'time-picker-drum',
+  calendarItem: 'calendar-item',
+  // Mobile (bottom-sheet) surfaces — FF-8654.
+  timePickerMobileApply: 'time-picker-mobile-apply',
+  timePickerMobileCurrent: 'time-picker-mobile-current',
+  calendarMobileHeaderLevel: 'calendar-mobile-header-level',
+  calendarMobileTimeButton: 'calendar-mobile-time-button',
+  calendarMobilePresetsButton: 'calendar-mobile-presets-button',
+  calendarMobilePeriodBlock: 'calendar-mobile-period-block',
+  calendarMobileApply: 'calendar-mobile-apply',
+  calendarMobileCurrent: 'calendar-mobile-current',
+  // Префикс для `getTestId` (даёт `selected-<testId>` на строке «Выбрано:»).
+  calendarMobileSelected: 'selected',
+} as const;
+
+export const HOURS = 24;
+export const MINUTES = 60;
+export const SECONDS = 60;

package/src/helperComponents/CalendarBase/CalendarBase.tsx

@@ -0,0 +1,299 @@
+import { Button } from '@cloud-ru/ds-button';
+import { Divider } from '@cloud-ru/ds-divider';
+import { ChevronDownSVG } from '@cloud-ru/ds-icons/interface/system';
+import { ListProps } from '@cloud-ru/ds-list';
+import { extractSupportProps, useUncontrolledProp, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { CSSProperties, ReactNode, RefObject, useCallback, useMemo, useRef, useState } from 'react';
+
+import { AUTOFOCUS, CALENDAR_MODE, SIZE, VIEW_MODE } from '../../constants';
+import { useDateAndTime } from '../../hooks';
+import { calendarLocale } from '../../locale';
+import {
+  BuildCellPropsFunction,
+  CalendarMode,
+  FocusDirection,
+  PresetsOptions,
+  Range,
+  Size,
+  ViewMode,
+} from '../../types';
+import { getLocale, getTestIdBuilder, normalizeRangeForMode } from '../../utils';
+import { CalendarBody } from '../CalendarBody';
+import { CalendarContext, CalendarContextType } from '../CalendarContext';
+import { Header } from '../Header';
+import { PeriodPresetsList } from '../PeriodPresetsList';
+import { getDefaultPresets } from '../PeriodPresetsList/utils';
+import { TimePickerBase } from '../TimePickerBase';
+import { useGetViewDate, useRange } from './hooks';
+import styles from './styles.module.scss';
+
+export type CalendarBaseProps = WithSupportProps<{
+  mode: CalendarMode;
+  onChangeValue(value: Range): void;
+  onFocusLeave?(direction: FocusDirection): void;
+  size?: Size;
+  value?: Range;
+  today?: Date | number;
+  buildCellProps?: BuildCellPropsFunction;
+  showHolidays?: boolean;
+  showSeconds?: boolean;
+  style?: CSSProperties;
+  className?: string;
+  defaultValue?: Range;
+  fitToContainer?: boolean;
+  autofocus?: boolean;
+  locale?: Intl.Locale;
+  navigationStartRef?: RefObject<{ focus(): void }>;
+  presets?: PresetsOptions;
+  /** Рендерится после основной разметки календаря, внутри `CalendarContext` (например футер с Apply в дропдауне). */
+  bottomSlot?: ReactNode;
+}>;
+
+const CALENDAR_DEFAULT_MODE_MAP: Record<CalendarMode, ViewMode> = {
+  [CALENDAR_MODE.Date]: VIEW_MODE.Month,
+  [CALENDAR_MODE.DateTime]: VIEW_MODE.Month,
+  [CALENDAR_MODE.DateRange]: VIEW_MODE.Month,
+  [CALENDAR_MODE.MonthRange]: VIEW_MODE.Year,
+  [CALENDAR_MODE.Month]: VIEW_MODE.Year,
+  [CALENDAR_MODE.YearRange]: VIEW_MODE.Decade,
+  [CALENDAR_MODE.Year]: VIEW_MODE.Decade,
+};
+
+export function CalendarBase({
+  className,
+  mode,
+  size = SIZE.M,
+  autofocus,
+  fitToContainer = true,
+  value: valueProp,
+  defaultValue,
+  onChangeValue,
+  today: todayProp,
+  showHolidays = false,
+  showSeconds = true,
+  style,
+  locale: localeProp,
+  onFocusLeave,
+  buildCellProps,
+  'data-test-id': testId,
+  navigationStartRef,
+  presets,
+  bottomSlot,
+  ...rest
+}: CalendarBaseProps) {
+  const { t, lang: ctxLang } = calendarLocale.useTranslations();
+
+  const [viewMode, setViewMode] = useState<ViewMode>(CALENDAR_DEFAULT_MODE_MAP[mode]);
+  const [viewShift, setViewShift] = useState<number>(0);
+  const [value, setValueState] = useUncontrolledProp<Range | undefined>(valueProp, defaultValue, onChangeValue);
+  const today = useMemo(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+  const [referenceDate] = useState(value?.[0] || today || new Date());
+  const viewDate = useGetViewDate(referenceDate, viewMode, viewShift);
+  const [focus, setFocus] = useState<string | undefined>(autofocus ? AUTOFOCUS : undefined);
+
+  const {
+    dateAndTime,
+    onTimeChange,
+    onDateChange,
+    onDateAndTimeChange,
+    isDateFilled,
+    isTimeFilled,
+    isDateAndTimeFilled,
+  } = useDateAndTime({ showSeconds, value: mode === CALENDAR_MODE.DateTime ? value : undefined });
+
+  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 setValue = useCallback(
+    (dates: Range) => {
+      setValueState(normalizeRangeForMode(mode, dates));
+    },
+    [mode, setValueState],
+  );
+
+  const { preselectedRange, continuePreselect, completePreselect, restartPreselect, startPreselect } = useRange({
+    setValue,
+  });
+
+  const getTestId = useMemo(() => getTestIdBuilder(testId), [testId]);
+
+  const locale = useMemo(() => getLocale({ localeProp, ctxLang }), [ctxLang, localeProp]);
+
+  const firstNotDisableCell = useRef<[number, number]>([0, 0]);
+
+  const presetsItems = useMemo(() => {
+    if (!presets?.enabled) {
+      return undefined;
+    }
+
+    if (presets?.items && presets.items.length > 0) {
+      return presets.items;
+    }
+
+    return getDefaultPresets(t, today);
+  }, [presets, t, today]);
+
+  const showPresets =
+    mode === CALENDAR_MODE.DateRange && !buildCellProps && presets?.enabled && presetsItems && presetsItems?.length > 0; // TODO PDS-3139
+  const showTimePicker = mode === CALENDAR_MODE.DateTime && viewMode === VIEW_MODE.Month;
+
+  const onPresetClick = useCallback(
+    (selectedPeriod: Range) => {
+      setValue(selectedPeriod);
+    },
+    [setValue],
+  );
+
+  const calendarContextValue = useMemo<CalendarContextType>(
+    () => ({
+      locale,
+      size,
+      value,
+      firstNotDisableCell,
+      fitToContainer,
+      today,
+      showHolidays,
+      viewDate,
+      referenceDate,
+      preselectedRange,
+      mode,
+      viewMode,
+      viewShift,
+      focus,
+      setValue,
+      setViewMode,
+      setViewShift,
+      startPreselect,
+      continuePreselect,
+      completePreselect,
+      restartPreselect,
+      setFocus,
+      getTestId,
+      onFocusLeave,
+      buildCellProps,
+      navigationStartRef,
+      showSeconds,
+      dateAndTime,
+      onTimeChange,
+      onDateChange,
+      onDateAndTimeChange,
+      isDateAndTimeFilled,
+      isDateFilled,
+      isTimeFilled,
+      applyButtonRef,
+      currentButtonRef,
+      hoursKeyboardNavigationRef,
+      minutesKeyboardNavigationRef,
+      secondsKeyboardNavigationRef,
+    }),
+    [
+      applyButtonRef,
+      buildCellProps,
+      completePreselect,
+      continuePreselect,
+      dateAndTime,
+      firstNotDisableCell,
+      fitToContainer,
+      focus,
+      getTestId,
+      isDateAndTimeFilled,
+      isDateFilled,
+      isTimeFilled,
+      locale,
+      mode,
+      navigationStartRef,
+      onDateAndTimeChange,
+      onDateChange,
+      onFocusLeave,
+      onTimeChange,
+      preselectedRange,
+      referenceDate,
+      restartPreselect,
+      setFocus,
+      setValue,
+      setViewMode,
+      setViewShift,
+      showHolidays,
+      showSeconds,
+      size,
+      startPreselect,
+      today,
+      value,
+      viewDate,
+      viewMode,
+      viewShift,
+    ],
+  );
+
+  return (
+    <div
+      className={cn(styles.root, className)}
+      data-fit-to-container={fitToContainer || undefined}
+      data-mode={mode}
+      data-show-holidays={showHolidays || undefined}
+      data-show-seconds={mode === CALENDAR_MODE.DateTime ? String(showSeconds) : undefined}
+      data-size={size}
+      data-test-id={testId}
+    >
+      <CalendarContext.Provider value={calendarContextValue}>
+        <div className={styles.dateWrapper}>
+          {showPresets && (
+            <>
+              <div className={styles.leftPanel}>
+                <div className={styles.leftPanelHeader} data-size={size}>
+                  <Button
+                    label={t('presets')}
+                    view='function'
+                    appearance='neutral'
+                    icon={<ChevronDownSVG />}
+                    iconPosition='after'
+                    size={size}
+                    data-test-id={getTestId('presets-header')}
+                  />
+                </div>
+                <Divider orientation='horizontal' />
+                <PeriodPresetsList
+                  items={presetsItems}
+                  className={styles.presetsList}
+                  onChange={onPresetClick}
+                  data-test-id={getTestId('presets')}
+                />
+              </div>
+              <div className={styles.verticalDividerWrap}>
+                <Divider orientation='vertical' />
+              </div>
+            </>
+          )}
+          <div
+            className={styles.calendarWrapper}
+            {...extractSupportProps(rest)}
+            style={style}
+            data-fit-to-container={fitToContainer || undefined}
+          >
+            <Header />
+
+            <Divider orientation='horizontal' />
+
+            <div className={styles.body} data-size={size} data-fit-to-container={fitToContainer || undefined}>
+              <CalendarBody />
+            </div>
+          </div>
+
+          {showTimePicker && (
+            <>
+              <div className={styles.verticalDividerWrap}>
+                <Divider orientation='vertical' />
+              </div>
+              <TimePickerBase fixedWidth />
+            </>
+          )}
+        </div>
+        {bottomSlot}
+      </CalendarContext.Provider>
+    </div>
+  );
+}

package/src/helperComponents/CalendarBase/hooks.ts

@@ -0,0 +1,48 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { VIEW_MODE } from '../../constants';
+import { Range, ViewMode } from '../../types';
+
+export function useGetViewDate(referenceDate: Date, viewMode: ViewMode, viewShift: number) {
+  return useMemo(() => {
+    switch (viewMode) {
+      case VIEW_MODE.Decade: {
+        const decadeFirstYear = Math.floor(referenceDate.getFullYear() / 10) * 10;
+        return new Date(decadeFirstYear + viewShift * 10, 0, 1);
+      }
+      case VIEW_MODE.Year:
+        return new Date(referenceDate.getFullYear() + viewShift, 0, 1);
+      case VIEW_MODE.Month:
+      default:
+        return new Date(referenceDate.getFullYear(), referenceDate.getMonth() + viewShift, 1);
+    }
+  }, [referenceDate, viewMode, viewShift]);
+}
+
+export function useRange({ setValue }: { setValue(value: Range): void }) {
+  const [preselectedRange, setPreselectedRange] = useState<Range | undefined>();
+
+  const startPreselect = useCallback((date: Date) => {
+    setPreselectedRange([date, date]);
+  }, []);
+
+  const continuePreselect = useCallback((date: Date) => {
+    setPreselectedRange(prevState => prevState && [prevState[0], date]);
+  }, []);
+
+  const restartPreselect = useCallback(() => {
+    setPreselectedRange(prevState => prevState && [prevState[0], prevState[0]]);
+  }, []);
+
+  const completePreselect = useCallback(
+    (date: Date) => {
+      if (preselectedRange) {
+        setPreselectedRange(undefined);
+        setValue([preselectedRange[0], date]);
+      }
+    },
+    [preselectedRange, setValue],
+  );
+
+  return { preselectedRange, startPreselect, continuePreselect, restartPreselect, completePreselect };
+}

package/src/helperComponents/CalendarBase/index.ts

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

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

@@ -0,0 +1,84 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/calendar.module' as calendar;
+
+$sizes: 's', 'm', 'l';
+
+.root {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  box-sizing: border-box;
+  width: fit-content;
+
+  &[data-fit-to-container] {
+    min-width: 100%;
+    height: 100%;
+  }
+}
+
+.dateWrapper {
+  display: flex;
+  height: 100%;
+}
+
+.calendarWrapper {
+  display: flex;
+  flex-direction: column;
+
+  &[data-fit-to-container] {
+    width: 100%;
+  }
+}
+
+.body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(calendar.$calendar, 'anatomy', 'size', $size, 'gridDate');
+
+      width: base.simple-var(calendar.$calendar, 'anatomy', 'size', $size, 'gridDate', 'min-width');
+      min-height: base.simple-var(calendar.$calendar, 'anatomy', 'size', $size, 'gridDate', 'min-height');
+    }
+  }
+
+  &[data-fit-to-container] {
+    width: 100%;
+  }
+}
+
+.divider {
+  flex-shrink: 0;
+  height: auto;
+}
+
+.verticalDividerWrap {
+  flex-shrink: 0;
+  align-self: stretch;
+}
+
+.leftPanel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.leftPanelHeader {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: base.$sn-theme-color-available-version-textMain;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(calendar.$calendar, 'anatomy', 'size', $size, 'header');
+    }
+  }
+}
+
+.presetsList {
+  width: 144px; // TODO: validate this hardcoded value in new list https://www.figma.com/design/aNPU3MHwRJiEwbk5F82zux/Snack-Ui-Kit-variables?node-id=18512-102811&m=dev
+}

package/src/helperComponents/CalendarBody/CalendarBody.tsx

@@ -0,0 +1,19 @@
+import { VIEW_MODE } from '../../constants';
+import { useCalendarContext } from '../../hooks';
+import { DecadeView } from '../DecadeView';
+import { MonthView } from '../MonthView';
+import { YearView } from '../YearView';
+
+export function CalendarBody() {
+  const { viewMode } = useCalendarContext();
+
+  switch (viewMode) {
+    case VIEW_MODE.Decade:
+      return <DecadeView />;
+    case VIEW_MODE.Year:
+      return <YearView />;
+    case VIEW_MODE.Month:
+    default:
+      return <MonthView />;
+  }
+}

package/src/helperComponents/CalendarBody/index.ts

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

package/src/helperComponents/CalendarContext/CalendarContext.tsx

@@ -0,0 +1,107 @@
+import { ListProps } from '@cloud-ru/ds-list';
+import { createContext, MutableRefObject, RefObject } from 'react';
+
+import { CALENDAR_MODE, SIZE, VIEW_MODE } from '../../constants';
+import {
+  BuildCellPropsFunction,
+  CalendarMode,
+  DateAndTime,
+  FocusDirection,
+  Range,
+  Size,
+  TimeValue,
+  ViewMode,
+} from '../../types';
+import { getLocale } from '../../utils';
+
+export type CalendarContextType = {
+  size: Size;
+  /** Дата текущего дня */
+  today?: Date;
+  /** Дата базового дня,  */
+  referenceDate: Date;
+  /** Дата начала текущего видимого периода, высчитывается от referenceDate, viewShift и viewMode */
+  viewDate: Date;
+  showHolidays: boolean;
+  showSeconds: boolean;
+  fitToContainer: boolean;
+  value?: Range;
+  firstNotDisableCell?: MutableRefObject<[number, number]>; // TODO: validate
+  mode: CalendarMode | 'time';
+  /** Предвыбранный период, когда выбрана первая дата, а вторая под ховером или фокусом */
+  preselectedRange?: Range;
+  viewMode: ViewMode;
+  viewShift: number;
+  focus?: string;
+  locale: Intl.Locale;
+  onFocusLeave?(direction: FocusDirection): void;
+  buildCellProps?: BuildCellPropsFunction;
+  setFocus(address: string | undefined): void;
+  setValue(value: Range): void;
+  setViewMode(viewMode: ViewMode): void;
+  setViewShift(shift: number): void;
+  startPreselect(date: Date): void;
+  restartPreselect(): void;
+  continuePreselect(date: Date): void;
+  completePreselect(date: Date): void;
+  getTestId(prefix: string): string | undefined;
+  navigationStartRef?: RefObject<{ focus(): void }>;
+  dateAndTime?: DateAndTime;
+  onDateChange(dateAndTime: Date | DateAndTime): void;
+  onTimeChange(dateAndTime: Date | TimeValue): void;
+  onDateAndTimeChange(dateAndTime: Date | DateAndTime): void;
+  isDateAndTimeFilled(): boolean;
+  isTimeFilled(): boolean;
+  isDateFilled(): boolean;
+  applyButtonRef: RefObject<HTMLButtonElement | null>;
+  currentButtonRef: RefObject<HTMLButtonElement | null>;
+  hoursKeyboardNavigationRef: NonNullable<ListProps['keyboardNavigationRef']>;
+  minutesKeyboardNavigationRef: NonNullable<ListProps['keyboardNavigationRef']>;
+  secondsKeyboardNavigationRef: NonNullable<ListProps['keyboardNavigationRef']>;
+};
+
+const stub = () => {
+  /* it is a stub */
+};
+
+const refStub: RefObject<HTMLButtonElement | null> = { current: null };
+
+const listKeyboardNavigationRefStub: NonNullable<ListProps['keyboardNavigationRef']> = {
+  current: { focusItem: stub },
+};
+
+const firstNotDisableCellStub: MutableRefObject<[number, number]> = { current: [0, 0] };
+
+export const CalendarContext = createContext<CalendarContextType>({
+  locale: getLocale(),
+  size: SIZE.M,
+  viewDate: new Date(),
+  referenceDate: new Date(),
+  mode: CALENDAR_MODE.Date,
+  viewMode: VIEW_MODE.Month,
+  viewShift: 0,
+  firstNotDisableCell: firstNotDisableCellStub, // TODO: validate that is required
+  setFocus: stub,
+  setValue: stub,
+  setViewMode: stub,
+  showHolidays: false,
+  showSeconds: true,
+  fitToContainer: true,
+  setViewShift: stub,
+  startPreselect: stub,
+  continuePreselect: stub,
+  completePreselect: stub,
+  restartPreselect: stub,
+  onDateAndTimeChange: stub,
+  onTimeChange: stub,
+  onDateChange: stub,
+  isDateAndTimeFilled: () => false,
+  isDateFilled: () => false,
+  isTimeFilled: () => false,
+  getTestId: () => undefined,
+  applyButtonRef: refStub,
+  currentButtonRef: refStub,
+  hoursKeyboardNavigationRef: listKeyboardNavigationRefStub,
+  minutesKeyboardNavigationRef: listKeyboardNavigationRefStub,
+  secondsKeyboardNavigationRef: listKeyboardNavigationRefStub,
+});

package/src/helperComponents/CalendarContext/index.ts

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

package/src/helperComponents/DecadeView/DecadeView.tsx

@@ -0,0 +1,68 @@
+import { useCallback } from 'react';
+
+import { CALENDAR_MODE, VIEW_MODE } from '../../constants';
+import { useCalendarContext, useGrid } from '../../hooks';
+import { getYearLabel, getYearShift, isTheSameDecade, isTheSameYear } from '../../utils';
+import { Grid } from '../Grid';
+import { buildDecadeGrid } from './utils';
+
+export function DecadeView() {
+  const {
+    referenceDate,
+    setViewMode,
+    setViewShift,
+    preselectedRange,
+    continuePreselect,
+    restartPreselect,
+    mode,
+    setValue,
+    startPreselect,
+    completePreselect,
+  } = useCalendarContext();
+
+  const onSelect = useCallback(
+    (date: Date) => {
+      if (mode === CALENDAR_MODE.YearRange) {
+        preselectedRange ? completePreselect(date) : startPreselect(date);
+        return;
+      }
+
+      if (mode === CALENDAR_MODE.Year) {
+        setValue([date, date]);
+        return;
+      }
+
+      setViewShift(getYearShift(referenceDate, date));
+      setViewMode(VIEW_MODE.Year);
+    },
+    [completePreselect, mode, preselectedRange, referenceDate, setValue, setViewMode, setViewShift, startPreselect],
+  );
+
+  const onPreselect = useCallback(
+    (date: Date) => {
+      if (preselectedRange) {
+        continuePreselect(date);
+      }
+    },
+    [continuePreselect, preselectedRange],
+  );
+
+  const onLeave = useCallback(() => {
+    if (preselectedRange) {
+      restartPreselect();
+    }
+  }, [preselectedRange, restartPreselect]);
+
+  const grid = useGrid({
+    buildGrid: buildDecadeGrid,
+    isTheSameItem: isTheSameYear,
+    isInPeriod: isTheSameDecade,
+    getItemLabel: getYearLabel,
+
+    onSelect,
+    onPreselect,
+    onLeave,
+  });
+
+  return <Grid grid={grid} />;
+}