@alfalab/core-components-calendar-with-skeleton 5.1.8 → 5.1.10

package/Component.d.ts

@@ -1,123 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { MouseEvent, ReactNode } from "react";
-type DayAddons = {
-    date: Date | number;
-    addon: ReactNode;
-};
-type View = "years" | "months" | "days";
-type SelectorView = "month-only" | "full";
-type CalendarDesktopProps = {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс шапки десктопного календаря
-     */
-    headerClassName?: string;
-    /**
-     * Дополнительный класс контента десктопного календаря
-     */
-    contentClassName?: string;
-    /**
-     * Вид по умолчанию (выбор дней, месяцев, лет)
-     */
-    defaultView?: View;
-    /**
-     * Вид шапки — месяц и год или только месяц
-     */
-    selectorView?: SelectorView;
-    /**
-     * Выбранная дата (timestamp)
-     */
-    value?: number;
-    /**
-     * Открытый месяц (timestamp)
-     */
-    month?: number;
-    /**
-     * Месяц, открытый по умолчанию (timestamp)
-     */
-    defaultMonth?: number;
-    /**
-     * Минимальная дата, доступная для выбора (timestamp)
-     */
-    minDate?: number;
-    /**
-     * Максимальная дата, доступная для выбора (timestamp)
-     */
-    maxDate?: number;
-    /**
-     * Начало выделенного периода (timestamp)
-     */
-    selectedFrom?: number;
-    /**
-     * Конец выделенного периода (timestamp)
-     */
-    selectedTo?: number;
-    /**
-     * Индикатор, что выбран полный период
-     */
-    rangeComplete?: boolean;
-    /**
-     * Список событий
-     */
-    events?: Array<Date | number>;
-    /**
-     * Список отключенных для выбора дней.
-     */
-    offDays?: Array<Date | number>;
-    /**
-     * Список выходных
-     */
-    holidays?: Array<Date | number>;
-    /**
-     * Обработчик изменения месяца (или года)
-     */
-    onMonthChange?: (month: number) => void;
-    /**
-     * Обработчик выбора даты
-     */
-    onChange?: (date?: number) => void;
-    /**
-     * Обработчик нажатия на кнопку месяца
-     */
-    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на кнопку года
-     */
-    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на период
-     */
-    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Нужно ли рендерить шапку календаря
-     */
-    hasHeader?: boolean;
-    /**
-     * Должен ли календарь подстраиваться под ширину родителя.
-     */
-    responsive?: boolean;
-    /**
-     * Дополнительный контент под числом
-     */
-    dayAddons?: DayAddons[];
-    /**
-     * Форма ячейки дня
-     */
-    shape?: "rounded" | "rectangular";
-    /**
-     * Отображать ли текущий год, если selectorView 'month-only'
-     * @default false
-     */
-    showCurrentYearSelector?: boolean;
-};
+import { CalendarDesktopProps } from "@alfalab/core-components-calendar/desktop";
 type CalendarWithSkeletonProps = CalendarDesktopProps & {
     /**
      * Флаг включения анимации скелета

package/Component.js

@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"calendar-with-skeleton__component_nqrpv","calendarVisible":"calendar-with-skeleton__calendarVisible_nqrpv","skeleton":"calendar-with-skeleton__skeleton_nqrpv","header":"calendar-with-skeleton__header_nqrpv","weekDays":"calendar-with-skeleton__weekDays_nqrpv","row":"calendar-with-skeleton__row_nqrpv","enter":"calendar-with-skeleton__enter_nqrpv","enterActive":"calendar-with-skeleton__enterActive_nqrpv","exit":"calendar-with-skeleton__exit_nqrpv","exitActive":"calendar-with-skeleton__exitActive_nqrpv"};
+var styles = {"component":"calendar-with-skeleton__component_v12z2","calendarVisible":"calendar-with-skeleton__calendarVisible_v12z2","skeleton":"calendar-with-skeleton__skeleton_v12z2","header":"calendar-with-skeleton__header_v12z2","weekDays":"calendar-with-skeleton__weekDays_v12z2","row":"calendar-with-skeleton__row_v12z2","enter":"calendar-with-skeleton__enter_v12z2","enterActive":"calendar-with-skeleton__enterActive_v12z2","exit":"calendar-with-skeleton__exit_v12z2","exitActive":"calendar-with-skeleton__exitActive_v12z2"};
 require('./index.css')
 
 var CalendarWithSkeleton = React.forwardRef(function (_a, ref) {

package/cssm/Component.d.ts

@@ -1,123 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { MouseEvent, ReactNode } from "react";
-type DayAddons = {
-    date: Date | number;
-    addon: ReactNode;
-};
-type View = "years" | "months" | "days";
-type SelectorView = "month-only" | "full";
-type CalendarDesktopProps = {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс шапки десктопного календаря
-     */
-    headerClassName?: string;
-    /**
-     * Дополнительный класс контента десктопного календаря
-     */
-    contentClassName?: string;
-    /**
-     * Вид по умолчанию (выбор дней, месяцев, лет)
-     */
-    defaultView?: View;
-    /**
-     * Вид шапки — месяц и год или только месяц
-     */
-    selectorView?: SelectorView;
-    /**
-     * Выбранная дата (timestamp)
-     */
-    value?: number;
-    /**
-     * Открытый месяц (timestamp)
-     */
-    month?: number;
-    /**
-     * Месяц, открытый по умолчанию (timestamp)
-     */
-    defaultMonth?: number;
-    /**
-     * Минимальная дата, доступная для выбора (timestamp)
-     */
-    minDate?: number;
-    /**
-     * Максимальная дата, доступная для выбора (timestamp)
-     */
-    maxDate?: number;
-    /**
-     * Начало выделенного периода (timestamp)
-     */
-    selectedFrom?: number;
-    /**
-     * Конец выделенного периода (timestamp)
-     */
-    selectedTo?: number;
-    /**
-     * Индикатор, что выбран полный период
-     */
-    rangeComplete?: boolean;
-    /**
-     * Список событий
-     */
-    events?: Array<Date | number>;
-    /**
-     * Список отключенных для выбора дней.
-     */
-    offDays?: Array<Date | number>;
-    /**
-     * Список выходных
-     */
-    holidays?: Array<Date | number>;
-    /**
-     * Обработчик изменения месяца (или года)
-     */
-    onMonthChange?: (month: number) => void;
-    /**
-     * Обработчик выбора даты
-     */
-    onChange?: (date?: number) => void;
-    /**
-     * Обработчик нажатия на кнопку месяца
-     */
-    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на кнопку года
-     */
-    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на период
-     */
-    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Нужно ли рендерить шапку календаря
-     */
-    hasHeader?: boolean;
-    /**
-     * Должен ли календарь подстраиваться под ширину родителя.
-     */
-    responsive?: boolean;
-    /**
-     * Дополнительный контент под числом
-     */
-    dayAddons?: DayAddons[];
-    /**
-     * Форма ячейки дня
-     */
-    shape?: "rounded" | "rectangular";
-    /**
-     * Отображать ли текущий год, если selectorView 'month-only'
-     * @default false
-     */
-    showCurrentYearSelector?: boolean;
-};
+import { CalendarDesktopProps } from "@alfalab/core-components-calendar/desktop";
 type CalendarWithSkeletonProps = CalendarDesktopProps & {
     /**
      * Флаг включения анимации скелета

package/esm/Component.d.ts

@@ -1,123 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { MouseEvent, ReactNode } from "react";
-type DayAddons = {
-    date: Date | number;
-    addon: ReactNode;
-};
-type View = "years" | "months" | "days";
-type SelectorView = "month-only" | "full";
-type CalendarDesktopProps = {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс шапки десктопного календаря
-     */
-    headerClassName?: string;
-    /**
-     * Дополнительный класс контента десктопного календаря
-     */
-    contentClassName?: string;
-    /**
-     * Вид по умолчанию (выбор дней, месяцев, лет)
-     */
-    defaultView?: View;
-    /**
-     * Вид шапки — месяц и год или только месяц
-     */
-    selectorView?: SelectorView;
-    /**
-     * Выбранная дата (timestamp)
-     */
-    value?: number;
-    /**
-     * Открытый месяц (timestamp)
-     */
-    month?: number;
-    /**
-     * Месяц, открытый по умолчанию (timestamp)
-     */
-    defaultMonth?: number;
-    /**
-     * Минимальная дата, доступная для выбора (timestamp)
-     */
-    minDate?: number;
-    /**
-     * Максимальная дата, доступная для выбора (timestamp)
-     */
-    maxDate?: number;
-    /**
-     * Начало выделенного периода (timestamp)
-     */
-    selectedFrom?: number;
-    /**
-     * Конец выделенного периода (timestamp)
-     */
-    selectedTo?: number;
-    /**
-     * Индикатор, что выбран полный период
-     */
-    rangeComplete?: boolean;
-    /**
-     * Список событий
-     */
-    events?: Array<Date | number>;
-    /**
-     * Список отключенных для выбора дней.
-     */
-    offDays?: Array<Date | number>;
-    /**
-     * Список выходных
-     */
-    holidays?: Array<Date | number>;
-    /**
-     * Обработчик изменения месяца (или года)
-     */
-    onMonthChange?: (month: number) => void;
-    /**
-     * Обработчик выбора даты
-     */
-    onChange?: (date?: number) => void;
-    /**
-     * Обработчик нажатия на кнопку месяца
-     */
-    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на кнопку года
-     */
-    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на период
-     */
-    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Нужно ли рендерить шапку календаря
-     */
-    hasHeader?: boolean;
-    /**
-     * Должен ли календарь подстраиваться под ширину родителя.
-     */
-    responsive?: boolean;
-    /**
-     * Дополнительный контент под числом
-     */
-    dayAddons?: DayAddons[];
-    /**
-     * Форма ячейки дня
-     */
-    shape?: "rounded" | "rectangular";
-    /**
-     * Отображать ли текущий год, если selectorView 'month-only'
-     * @default false
-     */
-    showCurrentYearSelector?: boolean;
-};
+import { CalendarDesktopProps } from "@alfalab/core-components-calendar/desktop";
 type CalendarWithSkeletonProps = CalendarDesktopProps & {
     /**
      * Флаг включения анимации скелета

package/esm/Component.js

@@ -5,7 +5,7 @@ import cn from 'classnames';
 import { CalendarDesktop } from '@alfalab/core-components-calendar/esm/desktop';
 import { Skeleton } from '@alfalab/core-components-skeleton/esm';
 
-var styles = {"component":"calendar-with-skeleton__component_nqrpv","calendarVisible":"calendar-with-skeleton__calendarVisible_nqrpv","skeleton":"calendar-with-skeleton__skeleton_nqrpv","header":"calendar-with-skeleton__header_nqrpv","weekDays":"calendar-with-skeleton__weekDays_nqrpv","row":"calendar-with-skeleton__row_nqrpv","enter":"calendar-with-skeleton__enter_nqrpv","enterActive":"calendar-with-skeleton__enterActive_nqrpv","exit":"calendar-with-skeleton__exit_nqrpv","exitActive":"calendar-with-skeleton__exitActive_nqrpv"};
+var styles = {"component":"calendar-with-skeleton__component_v12z2","calendarVisible":"calendar-with-skeleton__calendarVisible_v12z2","skeleton":"calendar-with-skeleton__skeleton_v12z2","header":"calendar-with-skeleton__header_v12z2","weekDays":"calendar-with-skeleton__weekDays_v12z2","row":"calendar-with-skeleton__row_v12z2","enter":"calendar-with-skeleton__enter_v12z2","enterActive":"calendar-with-skeleton__enterActive_v12z2","exit":"calendar-with-skeleton__exit_v12z2","exitActive":"calendar-with-skeleton__exitActive_v12z2"};
 require('./index.css')
 
 var CalendarWithSkeleton = forwardRef(function (_a, ref) {

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1w6wd */
+/* hash: 5lhgz */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -40,13 +40,13 @@
     /* disabled */
 
     /* marker */
-} .calendar-with-skeleton__component_nqrpv {
+} .calendar-with-skeleton__component_v12z2 {
     width: var(--calendar-width);
     height: var(--calendar-height);
     position: relative;
-} .calendar-with-skeleton__calendarVisible_nqrpv {
+} .calendar-with-skeleton__calendarVisible_v12z2 {
     height: auto;
-} .calendar-with-skeleton__skeleton_nqrpv {
+} .calendar-with-skeleton__skeleton_v12z2 {
     display: flex;
     flex-direction: column;
     padding: var(--gap-m);
@@ -60,20 +60,20 @@
     height: 100%;
     background-color: var(--color-light-bg-primary);
     background-clip: content-box;
-} .calendar-with-skeleton__header_nqrpv {
+} .calendar-with-skeleton__header_v12z2 {
     height: 48px;
     margin-bottom: var(--gap-l);
-} .calendar-with-skeleton__weekDays_nqrpv {
+} .calendar-with-skeleton__weekDays_v12z2 {
     height: 12px;
     margin-bottom: var(--gap-m);
-} .calendar-with-skeleton__row_nqrpv {
+} .calendar-with-skeleton__row_v12z2 {
     height: 32px
-} .calendar-with-skeleton__row_nqrpv + .calendar-with-skeleton__row_nqrpv {
+} .calendar-with-skeleton__row_v12z2 + .calendar-with-skeleton__row_v12z2 {
         margin-top: 10px;
-    } .calendar-with-skeleton__enter_nqrpv,
-.calendar-with-skeleton__enterActive_nqrpv,
-.calendar-with-skeleton__exit_nqrpv {
+    } .calendar-with-skeleton__enter_v12z2,
+.calendar-with-skeleton__enterActive_v12z2,
+.calendar-with-skeleton__exit_v12z2 {
     opacity: 1;
-} .calendar-with-skeleton__exitActive_nqrpv {
+} .calendar-with-skeleton__exitActive_v12z2 {
     opacity: 0;
 }

package/index.css

@@ -1,4 +1,4 @@
-/* hash: 1w6wd */
+/* hash: 5lhgz */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -40,13 +40,13 @@
     /* disabled */
 
     /* marker */
-} .calendar-with-skeleton__component_nqrpv {
+} .calendar-with-skeleton__component_v12z2 {
     width: var(--calendar-width);
     height: var(--calendar-height);
     position: relative;
-} .calendar-with-skeleton__calendarVisible_nqrpv {
+} .calendar-with-skeleton__calendarVisible_v12z2 {
     height: auto;
-} .calendar-with-skeleton__skeleton_nqrpv {
+} .calendar-with-skeleton__skeleton_v12z2 {
     display: flex;
     flex-direction: column;
     padding: var(--gap-m);
@@ -60,20 +60,20 @@
     height: 100%;
     background-color: var(--color-light-bg-primary);
     background-clip: content-box;
-} .calendar-with-skeleton__header_nqrpv {
+} .calendar-with-skeleton__header_v12z2 {
     height: 48px;
     margin-bottom: var(--gap-l);
-} .calendar-with-skeleton__weekDays_nqrpv {
+} .calendar-with-skeleton__weekDays_v12z2 {
     height: 12px;
     margin-bottom: var(--gap-m);
-} .calendar-with-skeleton__row_nqrpv {
+} .calendar-with-skeleton__row_v12z2 {
     height: 32px
-} .calendar-with-skeleton__row_nqrpv + .calendar-with-skeleton__row_nqrpv {
+} .calendar-with-skeleton__row_v12z2 + .calendar-with-skeleton__row_v12z2 {
         margin-top: 10px;
-    } .calendar-with-skeleton__enter_nqrpv,
-.calendar-with-skeleton__enterActive_nqrpv,
-.calendar-with-skeleton__exit_nqrpv {
+    } .calendar-with-skeleton__enter_v12z2,
+.calendar-with-skeleton__enterActive_v12z2,
+.calendar-with-skeleton__exit_v12z2 {
     opacity: 1;
-} .calendar-with-skeleton__exitActive_nqrpv {
+} .calendar-with-skeleton__exitActive_v12z2 {
     opacity: 0;
 }

package/modern/Component.d.ts

@@ -1,123 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { MouseEvent, ReactNode } from "react";
-type DayAddons = {
-    date: Date | number;
-    addon: ReactNode;
-};
-type View = "years" | "months" | "days";
-type SelectorView = "month-only" | "full";
-type CalendarDesktopProps = {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс шапки десктопного календаря
-     */
-    headerClassName?: string;
-    /**
-     * Дополнительный класс контента десктопного календаря
-     */
-    contentClassName?: string;
-    /**
-     * Вид по умолчанию (выбор дней, месяцев, лет)
-     */
-    defaultView?: View;
-    /**
-     * Вид шапки — месяц и год или только месяц
-     */
-    selectorView?: SelectorView;
-    /**
-     * Выбранная дата (timestamp)
-     */
-    value?: number;
-    /**
-     * Открытый месяц (timestamp)
-     */
-    month?: number;
-    /**
-     * Месяц, открытый по умолчанию (timestamp)
-     */
-    defaultMonth?: number;
-    /**
-     * Минимальная дата, доступная для выбора (timestamp)
-     */
-    minDate?: number;
-    /**
-     * Максимальная дата, доступная для выбора (timestamp)
-     */
-    maxDate?: number;
-    /**
-     * Начало выделенного периода (timestamp)
-     */
-    selectedFrom?: number;
-    /**
-     * Конец выделенного периода (timestamp)
-     */
-    selectedTo?: number;
-    /**
-     * Индикатор, что выбран полный период
-     */
-    rangeComplete?: boolean;
-    /**
-     * Список событий
-     */
-    events?: Array<Date | number>;
-    /**
-     * Список отключенных для выбора дней.
-     */
-    offDays?: Array<Date | number>;
-    /**
-     * Список выходных
-     */
-    holidays?: Array<Date | number>;
-    /**
-     * Обработчик изменения месяца (или года)
-     */
-    onMonthChange?: (month: number) => void;
-    /**
-     * Обработчик выбора даты
-     */
-    onChange?: (date?: number) => void;
-    /**
-     * Обработчик нажатия на кнопку месяца
-     */
-    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на кнопку года
-     */
-    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на период
-     */
-    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Нужно ли рендерить шапку календаря
-     */
-    hasHeader?: boolean;
-    /**
-     * Должен ли календарь подстраиваться под ширину родителя.
-     */
-    responsive?: boolean;
-    /**
-     * Дополнительный контент под числом
-     */
-    dayAddons?: DayAddons[];
-    /**
-     * Форма ячейки дня
-     */
-    shape?: "rounded" | "rectangular";
-    /**
-     * Отображать ли текущий год, если selectorView 'month-only'
-     * @default false
-     */
-    showCurrentYearSelector?: boolean;
-};
+import { CalendarDesktopProps } from "@alfalab/core-components-calendar/desktop";
 type CalendarWithSkeletonProps = CalendarDesktopProps & {
     /**
      * Флаг включения анимации скелета

package/modern/Component.js

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { CalendarDesktop } from '@alfalab/core-components-calendar/modern/desktop';
 import { Skeleton } from '@alfalab/core-components-skeleton/modern';
 
-const styles = {"component":"calendar-with-skeleton__component_nqrpv","calendarVisible":"calendar-with-skeleton__calendarVisible_nqrpv","skeleton":"calendar-with-skeleton__skeleton_nqrpv","header":"calendar-with-skeleton__header_nqrpv","weekDays":"calendar-with-skeleton__weekDays_nqrpv","row":"calendar-with-skeleton__row_nqrpv","enter":"calendar-with-skeleton__enter_nqrpv","enterActive":"calendar-with-skeleton__enterActive_nqrpv","exit":"calendar-with-skeleton__exit_nqrpv","exitActive":"calendar-with-skeleton__exitActive_nqrpv"};
+const styles = {"component":"calendar-with-skeleton__component_v12z2","calendarVisible":"calendar-with-skeleton__calendarVisible_v12z2","skeleton":"calendar-with-skeleton__skeleton_v12z2","header":"calendar-with-skeleton__header_v12z2","weekDays":"calendar-with-skeleton__weekDays_v12z2","row":"calendar-with-skeleton__row_v12z2","enter":"calendar-with-skeleton__enter_v12z2","enterActive":"calendar-with-skeleton__enterActive_v12z2","exit":"calendar-with-skeleton__exit_v12z2","exitActive":"calendar-with-skeleton__exitActive_v12z2"};
 require('./index.css')
 
 const CalendarWithSkeleton = forwardRef(({ calendarVisible = true, animate = true, className, ...restProps }, ref) => {