@sprinklrjs/spaceweb 10.1.0

package/esm/date-picker/Calendar.js

@@ -0,0 +1,221 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from 'react';
+import { Calendar as BaseCalendar } from 'baseui/datepicker';
+import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import { DENSITY } from 'baseui/datepicker/constants';
+import ChevronDown from '../icon/components/chevron-down';
+import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import { Popover } from '../popover';
+import { Menu, MenuItem } from '../menu';
+import { IconButton } from '../button';
+import { ThemeProvider } from '../theme';
+import { DateTimeContainer } from './DateTimeContainer';
+import withThemeOverride from '../helpers/baseui/withThemeOverride';
+import { getDayStyles, getCalendarContainerStyles } from './styled-components';
+import { DEFAULT_FORMAT_STRING } from './constants';
+import { prepareLocale } from './utils';
+var CALENDAR_CUSTOM_THEME = { theme: { input: { borderRadius: '4px' } } };
+var MonthYearSelectMenu = function (props) {
+    var _a = __read(useState(props.initialState.highlightedIndex), 2), highlightedIndex = _a[0], setHighlightedIndex = _a[1];
+    var onItemSelect = props.onItemSelect;
+    var onClick = useCallback(function (_a) {
+        var item = _a.item, event = _a.event, index = _a.index;
+        onItemSelect({ item: item, event: event });
+        setHighlightedIndex(index);
+    }, [onItemSelect]);
+    return (_jsx(Menu, __assign({ className: [
+            'overflow-y-scroll',
+            {
+                maxHeight: '25rem',
+            },
+        ] }, { children: props.items.map(function (item, index) { return (_jsx(MenuItem, __assign({ selected: index === highlightedIndex, onClick: function (event) { return onClick({ item: item, event: event, index: index }); }, role: "option" }, { children: item.label }), item.id)); }) }), void 0));
+};
+var isHiddenPaginationButton = function (direction, order, monthsShown) {
+    if (direction === 'next') {
+        return order !== monthsShown - 1;
+    }
+    return order !== 0;
+};
+var ArrowButton = function (_a) {
+    var $order = _a.$order, monthsShown = _a.monthsShown, direction = _a.direction, nextButtonProps = __rest(_a, ["$order", "monthsShown", "direction"]);
+    var isHidden = isHiddenPaginationButton(direction, $order, monthsShown);
+    return (_jsx(IconButton, __assign({ className: [
+            'h-6 w-6',
+            isHidden ? 'invisible' : 'visible',
+            function (_a) {
+                var px2rem = _a.px2rem;
+                return ({
+                    minWidth: px2rem(24),
+                });
+            },
+        ] }, nextButtonProps, { children: _jsx(ChevronDown, { size: 8, className: ['transform', direction === 'next' ? '-rotate-90' : 'rotate-90'] }, void 0) }), void 0));
+};
+var Calendar = function (_a) {
+    var overrides = _a.overrides, _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, _c = _a.formatString, formatString = _c === void 0 ? DEFAULT_FORMAT_STRING : _c, weekStartsOn = _a.weekStartsOn, props = __rest(_a, ["overrides", "adapter", "formatString", "weekStartsOn"]);
+    var dateHelpers = useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
+    var todaySOD = adapter.startOfDay(new Date());
+    var _d = props.monthsShown, monthsShown = _d === void 0 ? 1 : _d, value = props.value, onChange = props.onChange, range = props.range, timeSelectStart = props.timeSelectStart, timeSelectEnd = props.timeSelectEnd;
+    var dateFnsLocale = useMemo(function () { return prepareLocale(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
+    var setTime = useCallback(function (_a) {
+        var date = _a.date, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
+        return dateHelpers.setSeconds(dateHelpers.setMinutes(dateHelpers.setHours(date, hours), minutes), seconds);
+    }, [dateHelpers]);
+    var handleCalendarDateChange = useCallback(function (_a) {
+        var _b;
+        var date = _a.date;
+        if (Array.isArray(date)) {
+            var nextDate = date;
+            // if we have start date previously selected, then copy time from it, same for end date.
+            if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[0]) && nextDate[0] && props.timeSelectStart) {
+                nextDate[0] = setTime({
+                    date: nextDate[0],
+                    hours: adapter.getHours(props.value[0]),
+                    minutes: adapter.getMinutes(props.value[0]),
+                    seconds: adapter.getSeconds(props.value[0]),
+                });
+            }
+            else if (nextDate[0]) {
+                nextDate[0] = adapter.startOfDay(date[0]);
+            }
+            if (nextDate[1]) {
+                nextDate[1] = adapter.endOfDay(date[1]);
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                date: nextDate,
+            });
+        }
+        else {
+            var nextDate = date;
+            if (props.value && date && props.timeSelectStart) {
+                nextDate = setTime({
+                    date: nextDate,
+                    hours: adapter.getHours(props.value),
+                    minutes: adapter.getMinutes(props.value),
+                    seconds: adapter.getSeconds(props.value),
+                });
+            }
+            else {
+                nextDate = adapter.startOfDay(date);
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                date: nextDate,
+            });
+        }
+    }, [adapter, onChange, props.value, setTime, props.timeSelectStart]);
+    var convertedOverrides = useConvertOverrides({
+        MonthYearSelectPopover: {
+            // @ts-ignore
+            component: Popover,
+            props: {
+                showArrow: false,
+            },
+        },
+        NextButton: {
+            component: function (nextButtonProps) { return _jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "next" }, nextButtonProps), void 0); },
+        },
+        PrevButton: {
+            component: function (nextButtonProps) { return (_jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "previous" }, nextButtonProps), void 0)); },
+        },
+        MonthYearSelectStatefulMenu: {
+            // @ts-ignore
+            component: MonthYearSelectMenu,
+        },
+        CalendarContainer: {
+            style: getCalendarContainerStyles,
+            props: {
+                'data-testid': 'calendar-container',
+            },
+        },
+        WeekdayHeader: {
+            style: 'text-12 font-normal leading-8 spr-text-01 w-9 h-9',
+            props: {
+                'data-testid': 'week-day-header',
+            },
+        },
+        MonthHeader: {
+            style: function (_a) {
+                var theme = _a.theme;
+                return ({
+                    borderBottomColor: theme.spr.border02,
+                    borderBottomStyle: 'solid',
+                    borderBottomWidth: theme.borderWidth.default,
+                    color: theme.spr.text01,
+                });
+            },
+        },
+        Root: {
+            style: function (_a) {
+                var theme = _a.theme;
+                return (__assign({}, theme.typography.bl3));
+            },
+        },
+        TimeSelectContainer: {
+            props: {
+                range: range,
+                adapter: adapter,
+                timeSelectStart: timeSelectStart,
+                timeSelectEnd: timeSelectEnd,
+                value: value,
+                monthsShown: monthsShown,
+                onChange: onChange,
+                overrides: overrides,
+                locale: dateFnsLocale,
+                minDate: props.minDate,
+                maxDate: props.maxDate,
+            },
+            // @ts-ignore
+            component: DateTimeContainer,
+        },
+        Day: {
+            style: getDayStyles(todaySOD),
+        },
+        MonthContainer: {
+            style: 'flex-row',
+        },
+        CalendarHeader: {
+            style: 'py-3',
+        },
+        MonthYearSelectButton: {
+            style: 'typography-bs1',
+        },
+        Week: {
+            style: 'mb-1',
+        },
+    }, overrides, [
+        overrides,
+        todaySOD,
+        monthsShown,
+        range,
+        timeSelectEnd,
+        timeSelectStart,
+        dateFnsLocale,
+        value,
+        adapter,
+        formatString,
+        props.minDate,
+        props.maxDate,
+    ]);
+    return (_jsx(ThemeProvider, __assign({ theme: CALENDAR_CUSTOM_THEME }, { children: _jsx(BaseCalendar, __assign({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, 
+            //@ts-ignore baseweb has type inconsistency in declaration file
+            density: DENSITY.high }), void 0) }), void 0));
+};
+export default withThemeOverride(Calendar, function (theme) { return ({
+    colors: {
+        calendarHeaderBackground: theme.spr.ui01,
+        calendarHeaderForeground: theme.spr.text01,
+        accent: theme.spr.ui04,
+        mono400: theme.spr.border02,
+        mono300: theme.spr.ui05,
+        calendarDayBackgroundSelectedHighlighted: theme.spr.ui04,
+        calendarDayForegroundSelected: theme.spr.text05,
+        calendarBackground: theme.spr.ui01,
+    },
+    sizing: {
+        scale1000: '36px',
+        scale800: '20px',
+        scale300: '8px',
+        scale200: '6px',
+    },
+}); });

package/esm/date-picker/DateInput.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+export declare const isDateValid: (value: any) => boolean;
+declare type DateInputProps = {
+    locale?: any;
+    dateHelpers: DateHelpers;
+    onChange: (date: Date) => void;
+    date?: Date | null;
+    minDate?: Date;
+    maxDate?: Date;
+};
+export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate }: DateInputProps) => JSX.Element>;
+export {};

package/esm/date-picker/DateInput.js

@@ -0,0 +1,216 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import getDaysInMonth from 'date-fns/getDaysInMonth';
+import InputMask from 'react-input-mask';
+import { borderColor } from '../helpers/longHandHelpers';
+import { Input } from '../input';
+import { isDayInRange } from './utils';
+import { Box } from '../box';
+var COMMON_STYLE = [
+    'px-0 py-0 rounded-2 font-mono focus:spr-ui-04 focus:spr-text-05 text-center',
+    function (_a) {
+        var theme = _a.theme, px2rem = _a.px2rem;
+        return ({
+            '::selection': {
+                backgroundColor: 'transparent',
+            },
+            ':focus': {
+                caretColor: theme.spr.ui01,
+            },
+            fontVariantNumeric: 'tabular-nums',
+            lineHeight: px2rem(16),
+        });
+    },
+];
+var DATE_CLASSNAME = [
+    'text-center flex-none',
+    {
+        maxWidth: '1.8rem',
+    },
+];
+var DATE_OVERRIDES = {
+    InputContainer: {
+        style: 'border-0',
+    },
+    Input: {
+        style: COMMON_STYLE,
+        props: {
+            'data-testid': 'date-spin-input',
+        },
+    },
+};
+var MONTH_CLASSNAME = [
+    'text-center flex-none',
+    {
+        maxWidth: '2.6rem',
+    },
+];
+var MONTH_OVERRIDES = {
+    InputContainer: {
+        style: 'border-0',
+    },
+    Input: {
+        style: COMMON_STYLE,
+        props: {
+            'data-testid': 'month-spin-input',
+        },
+    },
+};
+var YEAR_CLASSNAME = [
+    'text-center flex-none',
+    {
+        maxWidth: '3.6rem',
+    },
+];
+var YEAR_OVERRIDES = {
+    InputContainer: {
+        style: 'border-0',
+    },
+    Input: {
+        style: COMMON_STYLE,
+        props: {
+            'data-testid': 'year-spin-input',
+        },
+    },
+};
+var MONTH_LABELS = [
+    //TODO: Should we use localization here
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+];
+var MIN_YEAR = 1900;
+var MAX_YEAR = 2100;
+export var isDateValid = function (value) { return value > 0 && value <= 31; };
+// eslint-disable-next-line max-statements
+export var DateInput = React.memo(function (_a) {
+    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate;
+    var _b = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _b[0], setDay = _b[1];
+    var _c = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'yyyy') : ''); }), 2), year = _c[0], setYear = _c[1];
+    var _d = __read(React.useState(false), 2), error = _d[0], setError = _d[1];
+    var minAllowedDate = 1;
+    var maxAllowedDate = getDaysInMonth(date || new Date());
+    var minYear = minDate ? dateHelpers.getYear(minDate) : MIN_YEAR;
+    var maxYear = maxDate ? dateHelpers.getYear(maxDate) : MAX_YEAR;
+    React.useEffect(function () {
+        if (isDayInRange(date, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers })) {
+            setError(false);
+        }
+        else {
+            setError(true);
+        }
+        setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
+        setYear(date ? dateHelpers.formatDate(date, 'yyyy') : '');
+    }, [date, minDate, maxDate, dateHelpers]);
+    var updateDate = function (nextDate) {
+        if (isDateValid(nextDate)) {
+            var newDate = dateHelpers.setDate(date || new Date(), nextDate);
+            onChange(newDate);
+        }
+        else {
+            setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
+        }
+    };
+    var dateBlur = function (event) {
+        setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
+    };
+    var dayChange = function (event) {
+        setDay(event.target.value);
+        if (event.target.value >= minAllowedDate && event.target.value <= maxAllowedDate) {
+            updateDate(event.target.value);
+        }
+    };
+    var dateKeyDown = function (event) {
+        var key = event.key;
+        var _value = parseInt(event.target.value, 10);
+        if (key === 'ArrowDown' || key === 'ArrowUp') {
+            event.preventDefault(); //to prevent arrow keys to change pointer in input field
+            var nextDate = (_value || 0) + (key === 'ArrowDown' ? -1 : 1);
+            if (nextDate === minAllowedDate - 1) {
+                nextDate = maxAllowedDate;
+            }
+            else if (nextDate === maxAllowedDate + 1) {
+                nextDate = minAllowedDate;
+            }
+            updateDate(nextDate);
+        }
+    };
+    var changeMonth = function (sign) {
+        var currentMonthIndex = dateHelpers.getMonth(date || new Date());
+        var nextMonth = currentMonthIndex + sign;
+        var newDate = dateHelpers.setMonth(date || new Date(), (nextMonth + MONTH_LABELS.length) % MONTH_LABELS.length);
+        onChange(newDate);
+    };
+    var monthKeyDown = function (event) {
+        var key = event.key;
+        if (key === 'ArrowDown' || key === 'ArrowUp') {
+            event.preventDefault(); //to prevent arrow keys to change pointer in input field
+            changeMonth(key === 'ArrowDown' ? -1 : 1);
+        }
+        else {
+            var monthLabel_1 = event.key.toLowerCase();
+            var currentMonthIndex_1 = dateHelpers.getMonth(date || new Date());
+            var monthIndex = MONTH_LABELS.findIndex(function (month, index) { return index > currentMonthIndex_1 && monthLabel_1 === month[0].toLowerCase(); });
+            if (monthIndex === -1) {
+                monthIndex = MONTH_LABELS.findIndex(function (month) { return monthLabel_1 === month[0].toLowerCase(); });
+            }
+            if (monthIndex === -1 || monthIndex === currentMonthIndex_1) {
+                return;
+            }
+            var newDate = dateHelpers.setMonth(date || new Date(), monthIndex);
+            onChange(newDate);
+        }
+    };
+    // year
+    var updateYear = function (nextYear) {
+        if (nextYear >= minYear && nextYear <= maxYear) {
+            var newDate = dateHelpers.setYear(date || new Date(), nextYear);
+            onChange(newDate);
+        }
+        else {
+            setYear(date ? dateHelpers.getYear(date) : '');
+        }
+    };
+    var yearBlur = function (event) {
+        setYear(date ? dateHelpers.formatDate(date, 'yyyy') : '');
+    };
+    var yearChange = function (event) {
+        setYear(event.target.value);
+        if (event.target.value >= minYear && event.target.value <= maxYear) {
+            updateYear(event.target.value);
+        }
+    };
+    var yearKeyDown = function (event) {
+        var key = event.key;
+        var _value = parseInt(event.target.value, 10);
+        if (key === 'ArrowDown' || key === 'ArrowUp') {
+            event.preventDefault(); //to prevent arrow keys to change pointer in input field
+            var nextYear = (_value || minYear) + (key === 'ArrowDown' ? -1 : 1);
+            if (nextYear === minYear - 1) {
+                nextYear = maxYear;
+            }
+            else if (nextYear === maxYear + 1) {
+                nextYear = minYear;
+            }
+            updateYear(nextYear);
+        }
+    };
+    var month = date ? dateHelpers.formatDate(date, 'MMM') : '';
+    return (_jsxs(Box, __assign({ "data-testid": "date-input", className: [
+            'px-3 flex items-center border-1 border-solid rounded-4 border-box',
+            function (_a) {
+                var theme = _a.theme, px2rem = _a.px2rem;
+                return (__assign(__assign({}, borderColor(error ? theme.spr.supportError : theme.spr.ui03)), { height: px2rem(35) }));
+            },
+        ] }, { children: [_jsx(InputMask, __assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_" }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm" }), void 0)); } }), void 0), _jsx(InputMask, __assign({ value: month, onKeyDown: monthKeyDown, mask: "aaa", maskChar: "_" }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: MONTH_CLASSNAME, overrides: MONTH_OVERRIDES, placeholder: "MM", size: "sm" }), void 0)); } }), void 0), _jsx(InputMask, __assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_" }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm" }), void 0)); } }), void 0)] }), void 0));
+});

package/esm/date-picker/DatePicker.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { DatePickerProps } from './types';
+export declare const DatePicker: (props: DatePickerProps) => ReactElement;

package/esm/date-picker/DatePicker.js

@@ -0,0 +1,5 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import StatefulContainer from './stateful-container';
+import { StatelessDatePicker } from './StatelessDatePicker';
+export var DatePicker = function (props) { return (_jsx(StatefulContainer, __assign({}, props, { value: props.value }, { children: function (extendedProps) { return _jsx(StatelessDatePicker, __assign({}, extendedProps), void 0); } }), void 0)); };

package/esm/date-picker/DatePickerContent.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { DatepickerOverrides, CalendarProps } from './types';
+declare type DatePickerContentProps = Omit<CalendarProps, 'timeSelectEnd' | 'timeSelectStart'> & {
+    overrides?: DatepickerOverrides;
+    timeSelect?: boolean;
+    onClose: () => void;
+};
+export declare const DatePickerContent: ({ value: _value, onChange, overrides, autoFocusCalendar, onClose, adapter, ...props }: DatePickerContentProps) => React.ReactElement;
+export {};

package/esm/date-picker/DatePickerContent.js

@@ -0,0 +1,41 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
+import Calendar from './Calendar';
+import { Box } from '../box';
+import { Stack } from '../stack';
+import { Button } from '../button';
+import { StyledFooter } from './styled-components';
+import { useOverrides } from '../overrides';
+import { useLocale } from '../locale';
+import { isTimeInRange } from './utils';
+export var DatePickerContent = function (_a) {
+    var _value = _a.value, onChange = _a.onChange, overrides = _a.overrides, autoFocusCalendar = _a.autoFocusCalendar, onClose = _a.onClose, _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, props = __rest(_a, ["value", "onChange", "overrides", "autoFocusCalendar", "onClose", "adapter"]);
+    var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
+    var _c = __read(React.useState(_value), 2), value = _c[0], setValue = _c[1];
+    var _d = __read(React.useState(false), 2), hasError = _d[0], setHasError = _d[1];
+    React.useEffect(function () {
+        if (isTimeInRange(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
+            setHasError(false);
+        }
+        else {
+            setHasError(true);
+        }
+    }, [dateHelpers, props.maxDate, props.minDate, value]);
+    var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Footer, StyledFooter), 2), Footer = _e[0], footerProps = _e[1];
+    var locale = useLocale();
+    var handleChange = React.useCallback(function (data) {
+        setValue(data.date);
+        if (!props.timeSelect) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(data);
+        }
+    }, [onChange, props.timeSelect]);
+    var handleSubmit = React.useCallback(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange({ date: value });
+    }, [onChange, value]);
+    return (_jsxs(Box, { children: [_jsx(Calendar, __assign({ trapTabbing: !props.timeSelect }, props, { value: value, onChange: handleChange, 
+                // @ts-ignore
+                overrides: overrides, autoFocusCalendar: autoFocusCalendar, timeSelectEnd: props.timeSelect, timeSelectStart: props.timeSelect, adapter: adapter }), void 0), props.timeSelect ? (_jsx(Footer, __assign({ "$onSubmit": handleSubmit, "$onClose": onClose, className: "justify-end" }, footerProps, { children: _jsxs(Stack, __assign({ direction: "horizontal", gap: 3, className: "items-center" }, { children: [_jsx(Button, __assign({ size: "sm", onClick: onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __assign({ size: "sm", onClick: handleSubmit, "data-testid": "save", disabled: hasError }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0) }), void 0)) : null] }, void 0));
+};

package/esm/date-picker/DatePickerInput.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { InputProps } from '../input';
+declare type DatePickerInputProps = InputProps & {
+    isOpen?: boolean;
+    autoSizeInput?: boolean;
+};
+declare const DatePickerInput: ({ onFocus, value, autoSizeInput, overrides, isOpen, disabled, ...props }: DatePickerInputProps) => ReactElement;
+export default DatePickerInput;

package/esm/date-picker/DatePickerInput.js

@@ -0,0 +1,109 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from 'react';
+import _noop from 'lodash/noop';
+import { Box } from '../box';
+import { chevronStyles } from '../helpers/commonStyles';
+import { borderColor } from '../helpers/longHandHelpers';
+import { Input } from '../input';
+import ChevronDown from '../icon/components/chevron-down';
+import CalendarIcon from '../icon/components/calendar-solid';
+import ClearIconButton from '../helpers/ClearIconButton';
+import { mergeOverrides } from '../overrides';
+import { getComponentSizeTheme } from '../helpers/themeHelpers';
+import cx from '../classNames';
+var InputBeforeEnhancer = function (_a) {
+    var disabled = _a.disabled, onClick = _a.onClick;
+    return (_jsx(Box, __assign({ className: cx('flex items-center pl-3', { 'cursor-pointer': !disabled }), onClick: disabled ? _noop : onClick }, { children: _jsx(CalendarIcon, { className: "".concat(disabled ? 'spr-icon-03' : 'spr-icon-01'), size: 14 }, void 0) }), void 0));
+};
+var InputAfterEnhancer = function (_a) {
+    var onClick = _a.onClick, isOpen = _a.isOpen, disabled = _a.disabled;
+    return (_jsx(Box, __assign({ className: cx('flex items-center pr-3', { 'cursor-pointer': !disabled }), onClick: disabled ? _noop : onClick }, { children: _jsx(ChevronDown, { className: chevronStyles, "$isOpen": isOpen }, void 0) }), void 0));
+};
+var DEFAULT_INPUT_WIDTH = 62;
+var DatePickerInput = function (_a) {
+    var onFocus = _a.onFocus, value = _a.value, autoSizeInput = _a.autoSizeInput, overrides = _a.overrides, isOpen = _a.isOpen, disabled = _a.disabled, props = __rest(_a, ["onFocus", "value", "autoSizeInput", "overrides", "isOpen", "disabled"]);
+    var _b = __read(useState(DEFAULT_INPUT_WIDTH), 2), inputWidth = _b[0], setInputWidth = _b[1];
+    var ref = useRef(null);
+    useEffect(function () {
+        var _a;
+        if (!ref.current || typeof ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) === 'undefined') {
+            return;
+        }
+        var newInputWidth = ref.current.scrollWidth;
+        setInputWidth(newInputWidth);
+    }, [value]);
+    var INPUT_OVERRIDES = useMemo(function () {
+        return mergeOverrides({
+            Before: {
+                component: InputBeforeEnhancer,
+                props: {
+                    onClick: onFocus,
+                    disabled: disabled,
+                },
+            },
+            After: {
+                component: InputAfterEnhancer,
+                props: {
+                    onClick: onFocus,
+                    isOpen: isOpen,
+                    disabled: disabled,
+                },
+            },
+            Input: {
+                props: {
+                    readOnly: true,
+                },
+                style: function (_a, _b) {
+                    var px2rem = _a.px2rem;
+                    var $variant = _b.$variant;
+                    var styles = __assign(__assign({}, (autoSizeInput && { width: "".concat(inputWidth, "px") })), { caretColor: 'transparent' });
+                    styles.cursor = disabled ? 'not-allowed' : 'pointer';
+                    if ($variant === 'line') {
+                        styles.paddingLeft = px2rem(12);
+                    }
+                    return styles;
+                },
+            },
+            InputContainer: {
+                style: function (_a, _b) {
+                    var theme = _a.theme;
+                    var $intent = _b.$intent;
+                    if (isOpen && $intent === 'default') {
+                        return borderColor(theme.spr.focus01);
+                    }
+                    return {};
+                },
+            },
+            ClearIcon: {
+                component: function (clearIconProps) { return (_jsx(ClearIconButton, __assign({}, clearIconProps, { onClick: function (e) {
+                        e.stopPropagation();
+                        clearIconProps.onClick();
+                    } }), void 0)); },
+            },
+        }, overrides);
+    }, [overrides, onFocus, isOpen, inputWidth, disabled, autoSizeInput]);
+    return (_jsxs(_Fragment, { children: [_jsx(Input, __assign({}, props, { value: value, onFocus: onFocus, disabled: disabled, overrides: INPUT_OVERRIDES }), void 0), _jsx(Box, __assign({ ref: ref, className: [
+                    function (_a) {
+                        var theme = _a.theme;
+                        var inputSizeTheme = getComponentSizeTheme(theme, 'input', props.size, 'lg');
+                        return {
+                            lineHeight: inputSizeTheme.lineHeight,
+                            paddingLeft: inputSizeTheme.paddingX,
+                            paddingRight: inputSizeTheme.paddingX,
+                            fontSize: inputSizeTheme.fontSize,
+                        };
+                    },
+                    {
+                        position: 'absolute',
+                        top: 0,
+                        visibility: 'hidden',
+                        height: 0,
+                        overflow: 'scroll',
+                        whiteSpace: 'pre',
+                        letterSpacing: 'normal',
+                        wordSpacing: 'normal',
+                    },
+                ] }, { children: value || props.placeholder }), void 0)] }, void 0));
+};
+export default DatePickerInput;

package/esm/date-picker/DateTimeContainer.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { CalendarProps as BaseCalendarProps } from 'baseui/datepicker';
+import { DatepickerOverrides } from './types';
+declare type Props = {
+    range?: boolean;
+    adapter?: any;
+    timeSelectStart?: boolean;
+    timeSelectEnd?: boolean;
+    value?: Date | Date[] | null;
+    monthsShown: number;
+    onChange: BaseCalendarProps['onChange'];
+    overrides?: DatepickerOverrides;
+    locale?: any;
+    minDate?: Date;
+    maxDate?: Date;
+};
+export declare const DateTimeContainer: React.MemoExoticComponent<({ range, adapter, timeSelectStart, timeSelectEnd, value, monthsShown, onChange, overrides, locale: dateFnsLocale, minDate, maxDate, }: Props) => JSX.Element>;
+export {};