@alfalab/core-components-date-time-input 3.0.6 → 3.0.8

package/cssm/components/date-time-input/Component.d.ts

@@ -0,0 +1,192 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ElementType } from "react";
+import { CalendarMobileProps, CalendarProps } from "@alfalab/core-components-calendar";
+import { InputProps } from "@alfalab/core-components-input";
+import { PopoverProps } from "@alfalab/core-components-popover";
+type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+    /**
+     * Обработчик изменения значения
+     */
+    picker?: boolean;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
+        date: Date;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
+        date: Date;
+        value: string;
+    }) => void;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: ElementType;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: 'desktop' | 'mobile';
+};
+declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    picker?: boolean | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
+        date: Date;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
+        date: Date;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: React.ElementType<any> | undefined;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
+        open: boolean;
+        title?: string | undefined;
+        onClose?: (() => void) | undefined;
+        yearsAmount?: number | undefined;
+        hasHeader?: boolean | undefined;
+        allowSelectionFromEmptyRange?: boolean | undefined;
+    } & Record<string, unknown>) | undefined;
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number | undefined;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number | undefined;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number | undefined;
+    /**
+     * Список событий
+     */
+    events?: (number | Date)[] | undefined;
+    /**
+     * Список выходных
+     */
+    offDays?: (number | Date)[] | undefined;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean | undefined;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean | undefined;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean | undefined;
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: "mobile" | "desktop" | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { DateTimeInputProps, DateTimeInput };

package/cssm/components/date-time-input/Component.js

@@ -1,20 +1,154 @@
 'use strict';
 
-var components_dateTimeInput_Component = require('../../Component-b91f18e8.js');
-require('react');
-require('react-merge-refs');
-require('classnames');
-require('@alfalab/core-components-calendar/cssm');
-require('@alfalab/core-components-icon-button/cssm');
-require('@alfalab/core-components-input/cssm');
-require('@alfalab/core-components-popover/cssm');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/CalendarMIcon');
-require('../../utils/format.js');
-require('./index.module.css');
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
+var coreComponentsIconButton = require('@alfalab/core-components-icon-button/cssm');
+var coreComponentsInput = require('@alfalab/core-components-input/cssm');
+var coreComponentsPopover = require('@alfalab/core-components-popover/cssm');
+var hooks = require('@alfalab/hooks');
+var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
+var utils_format = require('../../utils/format.js');
+var styles = require('./index.module.css');
 require('date-fns/isValid');
 require('date-fns/parse');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-exports.DateTimeInput = components_dateTimeInput_Component.DateTimeInput;
+/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
+var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d;
+    var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, picker = _a.picker, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _f = _a.popoverPosition, popoverPosition = _f === void 0 ? 'bottom-start' : _f, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _g = _a.Calendar, Calendar = _g === void 0 ? coreComponentsCalendar.Calendar : _g, _h = _a.calendarProps, calendarProps = _h === void 0 ? {} : _h, defaultMonth = _a.defaultMonth, _j = _a.minDate, minDate = _j === void 0 ? calendarProps.minDate : _j, _k = _a.maxDate, maxDate = _k === void 0 ? calendarProps.maxDate : _k, _l = _a.offDays, offDays = _l === void 0 ? calendarProps.offDays || [] : _l, _m = _a.events, events = _m === void 0 ? calendarProps.events || [] : _m, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, error = _a.error, _p = _a.view, view = _p === void 0 ? 'desktop' : _p, restProps = tslib.__rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "picker", "defaultValue", "value", "onChange", "onComplete", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen", "error", "view"]);
+    var inputRef = React.useRef(null);
+    var calendarRef = React.useRef(null);
+    var _q = React.useState(propValue || defaultValue), value = _q[0], setValue = _q[1];
+    var _r = React.useState(false), open = _r[0], setOpen = _r[1];
+    var calendarValue = value ? utils_format.getDateWithoutTime(value).getTime() : undefined;
+    var inputDisabled = disabled || readOnly;
+    var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
+    React.useEffect(function () {
+        setOpen(defaultOpen);
+    }, [defaultOpen]);
+    hooks.useDidUpdateEffect(function () {
+        var newPropValue = propValue || '';
+        setValue(function (prevValue) { return (prevValue === propValue ? prevValue : newPropValue); });
+    }, [propValue]);
+    var checkInputValueIsValid = function (newInputValue) {
+        if (!newInputValue || error)
+            return false;
+        var dateValue = utils_format.getDateWithoutTime(newInputValue).getTime();
+        return (dateValue &&
+            coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
+            !offDays.includes(dateValue));
+    };
+    var setTimeToDate = function () {
+        setValue(function (prevValue) {
+            var dateWithTime = utils_format.addTimeToDate(prevValue);
+            if (dateWithTime !== prevValue && dateWithTime.length === utils_format.DATE_WITH_TIME_LENGTH) {
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete(null, {
+                    date: utils_format.getFullDateTime(dateWithTime),
+                    value: dateWithTime,
+                });
+            }
+            return dateWithTime;
+        });
+    };
+    var handleInputWrapperFocus = function (event) {
+        if (view === 'desktop') {
+            if (picker) {
+                setOpen(true);
+            }
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
+        }
+    };
+    var handleBlur = function (event) {
+        if (view === 'desktop') {
+            var target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current && calendarRef.current.contains(target) === false) {
+                setOpen(false);
+                setTimeToDate();
+            }
+        }
+    };
+    var handleChange = function (event) {
+        var newValue = event.target.value;
+        if (newValue.length > utils_format.DATE_WITH_TIME_LENGTH)
+            return;
+        // Позволяем вводить только цифры, точки, запятую, двоеточие и пробел
+        if (/[^\d., :]/.test(newValue)) {
+            return;
+        }
+        var dots = newValue.match(/\./g);
+        var colon = newValue.match(/:/g);
+        var comma = newValue.match(/,/g);
+        // Не даем вводить больше, чем 2 точки, 1 двоеточие и 1 запятую
+        if ((dots && dots.length > 2) ||
+            (colon && colon.length > 1) ||
+            (comma && comma.length > 1)) {
+            return;
+        }
+        var formattedValue = utils_format.format(newValue);
+        var date = utils_format.getFullDateTime(formattedValue);
+        setValue(formattedValue);
+        if (onChange)
+            onChange(event, { date: date, value: formattedValue });
+        if (utils_format.isCompleteDateInput(formattedValue)) {
+            var valid = utils_format.isValid(formattedValue);
+            if (!valid)
+                return;
+            if (onComplete) {
+                onComplete(event, { date: date, value: formattedValue });
+            }
+        }
+    };
+    var handleMobileCalendarClose = function () {
+        setOpen(false);
+        setTimeToDate();
+    };
+    var handleClear = function () {
+        setValue('');
+    };
+    var handleCalendarChange = function (date) {
+        if (date) {
+            var newValue = utils_format.parseTimestampToDate(date);
+            setValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(null, { date: utils_format.getFullDateTime(newValue), value: newValue });
+        }
+    };
+    var handleCalendarWrapperMouseDown = function (event) {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    };
+    var handleIconButtonClick = function () {
+        if (!open)
+            setOpen(true);
+        if (view === 'desktop' && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    var renderCalendar = function () { return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React__default.default.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
+        React__default.default.createElement(Calendar, tslib.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleMobileCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(value) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {},
+            _b[styles__default.default.block] = block,
+            _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
+        React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
+                rightAddons,
+                picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
+        picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles__default.default.calendarContainer, (_c = {},
+                _c[styles__default.default.calendarResponsive] = calendarResponsive,
+                _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+});
+
+exports.DateTimeInput = DateTimeInput;

package/cssm/components/date-time-input/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-b91f18e8";
+export * from "./Component";

package/cssm/components/date-time-input/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var components_dateTimeInput_Component = require('../../Component-b91f18e8.js');
+var components_dateTimeInput_Component = require('./Component.js');
+require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');

package/cssm/desktop.js

@@ -1,8 +1,9 @@
 'use strict';
 
 var Component_desktop = require('./Component.desktop.js');
-require('./Component-b91f18e8.js');
+require('tslib');
 require('react');
+require('./components/date-time-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-calendar/cssm');

package/cssm/index.js

@@ -1,21 +1,22 @@
 'use strict';
 
 var Component_responsive = require('./Component.responsive.js');
-require('./Component-b91f18e8.js');
+require('tslib');
 require('react');
+require('@alfalab/hooks');
+require('./Component.desktop.js');
+require('./components/date-time-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-calendar/cssm');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/core-components-input/cssm');
 require('@alfalab/core-components-popover/cssm');
-require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./utils/format.js');
 require('date-fns/isValid');
 require('date-fns/parse');
 require('./components/date-time-input/index.module.css');
-require('./Component.desktop.js');
 require('./Component.mobile.js');
 
 

package/cssm/mobile.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var Component_mobile = require('./Component.mobile.js');
-require('./Component-b91f18e8.js');
+require('tslib');
 require('react');
+require('@alfalab/core-components-calendar/cssm');
+require('./components/date-time-input/Component.js');
 require('react-merge-refs');
 require('classnames');
-require('@alfalab/core-components-calendar/cssm');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/core-components-input/cssm');
 require('@alfalab/core-components-popover/cssm');

package/cssm/responsive.js

@@ -1,21 +1,22 @@
 'use strict';
 
 var Component_responsive = require('./Component.responsive.js');
-require('./Component-b91f18e8.js');
+require('tslib');
 require('react');
+require('@alfalab/hooks');
+require('./Component.desktop.js');
+require('./components/date-time-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-calendar/cssm');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/core-components-input/cssm');
 require('@alfalab/core-components-popover/cssm');
-require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./utils/format.js');
 require('date-fns/isValid');
 require('date-fns/parse');
 require('./components/date-time-input/index.module.css');
-require('./Component.desktop.js');
 require('./Component.mobile.js');
 
 

package/desktop.js

@@ -1,8 +1,9 @@
 'use strict';
 
 var Component_desktop = require('./Component.desktop.js');
-require('./Component-45618e75.js');
+require('tslib');
 require('react');
+require('./components/date-time-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-calendar');

package/esm/Component.desktop.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { DateTimeInputProps } from "./Component-9d1d72a0";
+/// <reference types="react" />
+import React from 'react';
+import { DateTimeInputProps } from "./components/date-time-input/Component";
 type DateTimeInputDesktopProps = Omit<DateTimeInputProps, 'view'>;
-declare const DateTimeInputDesktop: FC<DateTimeInputDesktopProps>;
+declare const DateTimeInputDesktop: React.ForwardRefExoticComponent<DateTimeInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
 export { DateTimeInputDesktopProps, DateTimeInputDesktop };

package/esm/Component.desktop.js

@@ -1,5 +1,6 @@
-import { D as DateTimeInput, _ as __assign } from './Component-9d1d72a0.js';
-import React from 'react';
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { DateTimeInput } from './components/date-time-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/core-components-calendar/esm';
@@ -12,6 +13,6 @@ import './utils/format.js';
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-var DateTimeInputDesktop = function (props) { return (React.createElement(DateTimeInput, __assign({}, props))); };
+var DateTimeInputDesktop = forwardRef(function (props, ref) { return React.createElement(DateTimeInput, __assign({}, props, { ref: ref })); });
 
 export { DateTimeInputDesktop };

package/esm/Component.mobile.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { DateTimeInputProps } from "./Component-9d1d72a0";
+/// <reference types="react" />
+import React from 'react';
+import { DateTimeInputProps } from "./components/date-time-input/Component";
 type DateTimeInputMobileProps = Omit<DateTimeInputProps, 'view'>;
-declare const DateTimeInputMobile: FC<DateTimeInputMobileProps>;
+declare const DateTimeInputMobile: React.ForwardRefExoticComponent<DateTimeInputMobileProps & React.RefAttributes<HTMLInputElement>>;
 export { DateTimeInputMobileProps, DateTimeInputMobile };

package/esm/Component.mobile.js

@@ -1,6 +1,7 @@
-import { D as DateTimeInput, _ as __assign } from './Component-9d1d72a0.js';
-import React from 'react';
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
 import { CalendarMobile } from '@alfalab/core-components-calendar/esm';
+import { DateTimeInput } from './components/date-time-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/core-components-icon-button/esm';
@@ -12,6 +13,6 @@ import './utils/format.js';
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-var DateTimeInputMobile = function (props) { return (React.createElement(DateTimeInput, __assign({ Calendar: CalendarMobile, view: 'mobile' }, props))); };
+var DateTimeInputMobile = forwardRef(function (props, ref) { return React.createElement(DateTimeInput, __assign({ Calendar: CalendarMobile, view: 'mobile' }, props, { ref: ref })); });
 
 export { DateTimeInputMobile };

package/esm/Component.responsive.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { DateTimeInputProps } from "./Component-9d1d72a0";
+/// <reference types="react" />
+import React from 'react';
+import { DateTimeInputProps } from "./components/date-time-input/Component";
 type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view'> & {
     /**
      * Контрольная точка, с нее начинается desktop версия
@@ -8,5 +9,11 @@ type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view'> & {
     breakpoint?: number;
 };
 type DateTimeInputMedia = 'desktop' | 'mobile';
-declare const DateTimeInputResponsive: FC<DateTimeInputResponsiveProps>;
+declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<DateTimeInputProps, "view"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
 export { DateTimeInputResponsiveProps, DateTimeInputMedia, DateTimeInputResponsive };

package/esm/Component.responsive.js

@@ -1,8 +1,9 @@
-import { a as __rest, _ as __assign } from './Component-9d1d72a0.js';
-import React from 'react';
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef } from 'react';
 import { useMedia } from '@alfalab/hooks';
 import { DateTimeInputDesktop } from './Component.desktop.js';
 import { DateTimeInputMobile } from './Component.mobile.js';
+import './components/date-time-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/core-components-calendar/esm';
@@ -14,13 +15,13 @@ import './utils/format.js';
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-var DateTimeInputResponsive = function (_a) {
+var DateTimeInputResponsive = forwardRef(function (_a, ref) {
     var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
     var view = useMedia([
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],
     ], 'desktop')[0];
-    return view === 'desktop' ? (React.createElement(DateTimeInputDesktop, __assign({}, restProps))) : (React.createElement(DateTimeInputMobile, __assign({}, restProps)));
-};
+    return view === 'desktop' ? (React.createElement(DateTimeInputDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(DateTimeInputMobile, __assign({}, restProps, { ref: ref })));
+});
 
 export { DateTimeInputResponsive };