@sprinklrjs/spaceweb 10.1.0

package/esm/date-picker/DateTimeContainer.js

@@ -0,0 +1,121 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import { Stack, StackItem } from '../stack';
+import { DateInput } from './DateInput';
+import { TimeInput } from './TimeInput';
+import { FormControl } from '../form-control';
+import { useOverrides } from '../overrides';
+import { useLocale } from '../locale';
+var DateAndTimeSelect = function (_a) {
+    var time = _a.time, onTimeChange = _a.onTimeChange, onDateChange = _a.onDateChange, dateInputLabel = _a.dateInputLabel, timePickerLabel = _a.timePickerLabel, overrides = _a.overrides, locale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate, adapter = _a.adapter;
+    var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.TimePickerFormControl, FormControl), 2), TimePickerFormControl = _b[0], timePickerFormControlProps = _b[1];
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DateInputFormControl, FormControl), 2), DateInputFormControl = _c[0], dateInputFormControlProps = _c[1];
+    return (_jsxs(Stack, __assign({ direction: "horizontal", gap: 2, className: "items-center" }, { children: [_jsx(StackItem, __assign({ className: ['flex-1', function (_a) {
+                        var px2rem = _a.px2rem;
+                        return ({ width: px2rem(120) });
+                    }] }, { children: _jsx(DateInputFormControl, __assign({ className: "mb-0", label: dateInputLabel }, dateInputFormControlProps, { children: _jsx(DateInput, { dateHelpers: dateHelpers, date: time, onChange: onDateChange, minDate: minDate, maxDate: maxDate, locale: locale }, void 0) }), void 0) }), void 0), _jsx(StackItem, __assign({ className: ['flex-1', function (_a) {
+                        var px2rem = _a.px2rem;
+                        return ({ width: px2rem(120) });
+                    }] }, { children: _jsx(TimePickerFormControl, __assign({ className: "mb-0", label: timePickerLabel }, timePickerFormControlProps, { children: _jsx(TimeInput, { time: time, dateHelpers: dateHelpers, onChange: onTimeChange, overrides: overrides, minTime: minDate, maxTime: maxDate }, void 0) }), void 0) }), void 0)] }), void 0));
+};
+export var DateTimeContainer = React.memo(function (_a) {
+    var range = _a.range, _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, timeSelectStart = _a.timeSelectStart, timeSelectEnd = _a.timeSelectEnd, value = _a.value, monthsShown = _a.monthsShown, onChange = _a.onChange, overrides = _a.overrides, dateFnsLocale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate;
+    var _c = __read([].concat(value), 2), startDate = _c[0], endDate = _c[1];
+    var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
+    var locale = useLocale();
+    var _d = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DateTimeSelect, StackItem), 2), DateTimeSelectContainer = _d[0], dateTimeSelectContainerProps = _d[1];
+    var handleTimeChange = React.useCallback(function (time, index) {
+        var _a, _b;
+        var epoch = new Date().setMilliseconds(0);
+        var dateWithZeroMs = new Date(epoch);
+        if (Array.isArray(value)) {
+            var dates = value.map(function (date, i) {
+                if (index === i) {
+                    return dateHelpers.applyTimeToDate(date, time);
+                }
+                return date;
+            });
+            if (index === 0 && !value[0]) {
+                dates[0] = dateHelpers.applyTimeToDate(dateWithZeroMs, time);
+            }
+            if (index === 1) {
+                if (!value[0]) {
+                    dates[0] = adapter.startOfDay(dateWithZeroMs);
+                    dates[1] = dateHelpers.applyTimeToDate(dates[0], time);
+                }
+                else if (!value[1]) {
+                    dates[1] = dateHelpers.applyTimeToDate(dates[0], time);
+                }
+            }
+            /*
+            Here we have to manually set 0 ms on endDate, because we set 999 ms in endTime when user selects preset like for preset `TODAY` endTime is 11:59:59:999.
+            But when user selects time from TimeInput we want to have 0 ms, for example when user select 8:15 as endTime, we want to send 8:15:00:000, instead of 8:15:00:999
+          */
+            if (index === 1) {
+                (_a = dates[1]) === null || _a === void 0 ? void 0 : _a.setMilliseconds(999);
+                (_b = dates[1]) === null || _b === void 0 ? void 0 : _b.setSeconds(59);
+            }
+            // if user selects the time such that made the time range invalid, then make it valid by setting the range equal to what user is editing
+            // For example - if selected range is 8 march, 2020 12:00AM to 8 march, 2020 11:59PM. Now user selects start time 2:00PM, and end time
+            // 1:00PM, then make the range valid by setting new range as 1:00PM in both start and end date. Similarly when user selects
+            // starttime greater then end time then set start time in both start and end date
+            if (dateHelpers.isAfter(dates[0], dates[1])) {
+                onChange === null || onChange === void 0 ? void 0 : onChange({ date: index === 0 ? [dates[0], dates[0]] : [dates[1], dates[1]] });
+            }
+            else {
+                onChange === null || onChange === void 0 ? void 0 : onChange({ date: dates });
+            }
+        }
+        else if (!value) {
+            onChange === null || onChange === void 0 ? void 0 : onChange({ date: dateHelpers.applyTimeToDate(dateWithZeroMs, time) });
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange({ date: dateHelpers.applyTimeToDate(value, time) });
+        }
+    }, [onChange, dateHelpers, value, adapter]);
+    var handleDateInputChange = React.useCallback(function (date, index) {
+        if (range && Array.isArray(value)) {
+            var nextStartDate = 
+            // eslint-disable-next-line no-nested-ternary
+            index === 0
+                ? value[0]
+                    ? dateHelpers.applyTimeToDate(date, value[0])
+                    : adapter.startOfDay(date)
+                : value[0];
+            var nextEndDate = 
+            // if user is editing already selected endDate then we don't want to change the selected time, else set endtime as end of the day
+            // eslint-disable-next-line no-nested-ternary
+            index === 1 ? (value[1] ? dateHelpers.applyTimeToDate(date, value[1]) : adapter.endOfDay(date)) : value[1];
+            if (index === 1) {
+                nextEndDate.setMilliseconds(999);
+                nextEndDate.setSeconds(59);
+            }
+            // if startdate is not selected yet then set the endDate as valid range.
+            if (!nextStartDate) {
+                onChange === null || onChange === void 0 ? void 0 : onChange({ date: [adapter.startOfDay(nextEndDate), nextEndDate] });
+            }
+            // if end date is not selected yet then set the startDate as valid range.
+            else if (!nextEndDate) {
+                onChange === null || onChange === void 0 ? void 0 : onChange({ date: [nextStartDate, adapter.endOfDay(nextStartDate)] });
+            }
+            else if (dateHelpers.isAfter(nextStartDate, nextEndDate)) {
+                onChange === null || onChange === void 0 ? void 0 : onChange({
+                    date: index === 0
+                        ? [nextStartDate, adapter.endOfDay(nextStartDate)]
+                        : [adapter.startOfDay(nextEndDate), nextEndDate],
+                });
+            }
+            else {
+                onChange === null || onChange === void 0 ? void 0 : onChange({ date: [nextStartDate, nextEndDate] });
+            }
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange({ date: date });
+        }
+    }, [dateHelpers, onChange, range, adapter, value]);
+    return (_jsxs(Stack, __assign({ gap: 4, className: "px-4 pb-4", direction: monthsShown === 1 ? 'vertical' : 'horizontal' }, { children: [timeSelectStart && (_jsx(DateTimeSelectContainer, __assign({ className: "flex-1", "$timeSelect": "start" }, dateTimeSelectContainerProps, { children: _jsx(DateAndTimeSelect, { time: startDate, onTimeChange: function (date) { return handleTimeChange(date, 0); }, onDateChange: function (date) { return handleDateInputChange(date, 0); }, dateInputLabel: locale.calendar.dateInputStartLabel, timePickerLabel: locale.calendar.timePickerStartLabel, adapter: adapter, locale: locale, maxDate: maxDate, minDate: minDate, overrides: overrides }, void 0) }), void 0)), range && timeSelectEnd && (_jsx(DateTimeSelectContainer, __assign({ className: "flex-1", "$timeSelect": "end" }, dateTimeSelectContainerProps, { children: _jsx(DateAndTimeSelect, { time: endDate, onTimeChange: function (date) { return handleTimeChange(date, 1); }, onDateChange: function (date) { return handleDateInputChange(date, 1); }, dateInputLabel: locale.calendar.dateInputEndLabel, timePickerLabel: locale.calendar.timePickerEndLabel, adapter: adapter, locale: locale, maxDate: maxDate, minDate: minDate, overrides: overrides }, void 0) }), void 0))] }), void 0));
+});

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

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { StatelessDatePickerProps } from './types';
+export declare const StatelessDatePicker: ({ onChange, onBlur, adapter, size, formatString, isOpen, onFocus, clearable, displayValueAtRangeIndex, variant, overrides, intent, value, formatDisplayValue, autoSizeInput, weekStartsOn, ...props }: StatelessDatePickerProps) => ReactElement;

package/esm/date-picker/StatelessDatePicker.js

@@ -0,0 +1,137 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import _noop from 'lodash/noop';
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
+import { PLACEMENT } from 'baseui/popover';
+import { Popover } from '../popover';
+import { StyledInputWrapper } from './styled-components';
+import { Typography } from '../typography';
+import DatePickerInput from './DatePickerInput';
+import { useLocale } from '../locale';
+import useUniqueId from '../hooks/useUniqueId';
+import { mergeOverrides, useOverrides } from '../overrides';
+import { DEFAULT_FORMAT_STRING } from './constants';
+import { formatDate, getAriaLabel, isTimeInRange, normalizeDashes, prepareLocale } from './utils';
+import { DatePickerContent } from './DatePickerContent';
+var accessibilityStyles = {
+    position: 'fixed',
+    width: '0px',
+    height: '0px',
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    borderBottomWidth: 0,
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    clipPath: 'inset(100%)',
+};
+// eslint-disable-next-line max-statements
+export var StatelessDatePicker = function (_a) {
+    var _b, _c;
+    var onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.adapter, adapter = _d === void 0 ? dateFnsAdapter : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.formatString, formatString = _f === void 0 ? DEFAULT_FORMAT_STRING : _f, _g = _a.isOpen, isOpen = _g === void 0 ? false : _g, onFocus = _a.onFocus, clearable = _a.clearable, displayValueAtRangeIndex = _a.displayValueAtRangeIndex, _h = _a.variant, variant = _h === void 0 ? 'default' : _h, overrides = _a.overrides, intent = _a.intent, value = _a.value, formatDisplayValue = _a.formatDisplayValue, _j = _a.autoSizeInput, autoSizeInput = _j === void 0 ? false : _j, weekStartsOn = _a.weekStartsOn, props = __rest(_a, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn"]);
+    var locale = useLocale();
+    var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
+    var dateFnsLocale = React.useMemo(function () { return prepareLocale(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
+    // this state is required for a11y of calendar, this will be set to true when user first press down arrow key on opened calendar
+    // and we will set this to false when calendar will be closed.
+    var _k = __read(React.useState(false), 2), autoFocusCalendar = _k[0], setAutoFocusCalendar = _k[1];
+    var _l = __read(React.useState(false), 2), error = _l[0], setError = _l[1];
+    React.useEffect(function () {
+        if (isTimeInRange(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
+            setError(false);
+        }
+        else {
+            setError(true);
+        }
+    }, [value, props.minDate, props.maxDate, dateHelpers]);
+    var screenReaderMsgId = useUniqueId();
+    var _m = props["aria-describedby"], ariaDescribedBy = _m === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _m;
+    var defaultFormatDisplayValue = React.useCallback(function (date) {
+        var normalizedFormatString = normalizeDashes(formatString);
+        if (formatDisplayValue) {
+            if (!date) {
+                return '';
+            }
+            return formatDisplayValue(date, normalizedFormatString);
+        }
+        return formatDate({ date: date, dateHelpers: dateHelpers, formatString: normalizedFormatString, locale: dateFnsLocale });
+    }, [formatString, formatDisplayValue, dateHelpers, dateFnsLocale]);
+    var mergedOverrides = React.useMemo(function () {
+        return mergeOverrides({
+            Popover: {
+                props: {
+                    overrides: {
+                        Body: {
+                            props: {
+                                role: 'dialog',
+                                'aria-label': locale.datePicker.popoverAriaLabel,
+                            },
+                        },
+                    },
+                },
+            },
+            TimePickerFormControl: {
+                props: {
+                    label: null,
+                },
+            },
+            DateInputFormControl: {
+                props: {
+                    label: null,
+                },
+            },
+            Root: {
+                style: 'rounded-8',
+            },
+            CalendarHeader: {
+                style: 'rounded-8',
+            },
+        }, overrides);
+    }, [overrides]);
+    var displayValue = React.useMemo(function () { return defaultFormatDisplayValue(value) || ''; }, [value, defaultFormatDisplayValue]);
+    var handleDateChange = React.useCallback(function (data) {
+        onChange === null || onChange === void 0 ? void 0 : onChange({ value: data.date });
+    }, [onChange]);
+    var onClose = React.useCallback(function () {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        setAutoFocusCalendar(false);
+    }, [onBlur, setAutoFocusCalendar]);
+    React.useEffect(function () {
+        if (!isOpen) {
+            setAutoFocusCalendar(false);
+        }
+    }, [isOpen]);
+    var handleKeyDown = React.useCallback(function (event) {
+        if (!isOpen && (event.key === 'Enter' || event.key === 'ArrowDown')) {
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+            event.preventDefault();
+        }
+        else if (isOpen && event.key === 'ArrowDown') {
+            // next line prevents the page jump on the initial arrowDown
+            event.preventDefault();
+            setAutoFocusCalendar(true);
+        }
+        else if (isOpen && event.key === 'Tab') {
+            onClose();
+        }
+    }, [isOpen, onFocus, onClose]);
+    var handleInputChange = React.useCallback(function (e) {
+        var inputValue = e.currentTarget.value;
+        if (clearable && inputValue.length === 0) {
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                value: undefined,
+            });
+        }
+    }, [clearable, onChange]);
+    var dateAriaLabel = React.useMemo(function () { return getAriaLabel(value, defaultFormatDisplayValue, locale); }, [value, defaultFormatDisplayValue, locale]);
+    var _o = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput), 2), InputComponent = _o[0], inputProps = _o[1];
+    var _p = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, Popover), 2), PopoverComponent = _p[0], popoverProps = _p[1];
+    var _q = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, StyledInputWrapper), 2), InputWrapper = _q[0], inputWrapperProps = _q[1];
+    var placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : 'MM/DD/YYYY';
+    return (_jsxs(_Fragment, { children: [_jsx(PopoverComponent, __assign({ focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, onClick: props.disabled ? _noop : onFocus, content: _jsx(DatePickerContent, __assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale }), void 0) }, popoverProps, { children: _jsx(InputWrapper, __assign({}, inputWrapperProps, { children: _jsx(InputComponent, __assign({ "aria-disabled": props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-required": props.required || null, disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
+                        // onFocus={onFocus}
+                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps), void 0) }), void 0) }), void 0), _jsx(Typography, __assign({ id: ariaDescribedBy, style: accessibilityStyles }, { children: locale.timeRangePicker.screenReaderMessageInput }), void 0), _jsx(Typography, __assign({ "aria-live": "assertive", style: accessibilityStyles }, { children: dateAriaLabel }), void 0)] }, void 0));
+};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+declare type TimeInputProps = {
+    time?: Date | null;
+    overrides?: any;
+    onChange: (date: Date) => void;
+    dateHelpers: DateHelpers;
+    minTime?: Date;
+    maxTime?: Date;
+};
+export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, }: TimeInputProps) => JSX.Element;
+export {};

package/esm/date-picker/TimeInput.js

@@ -0,0 +1,69 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { TimePicker as DefaultTimePicker } from '../time-picker';
+import { mergeOverrides, useOverrides } from '../overrides';
+import { isTimeInRange } from './utils';
+export var TimeInput = function (_a) {
+    var overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime;
+    var _b = __read(useState(time), 2), value = _b[0], setValue = _b[1];
+    var _c = __read(useState(false), 2), error = _c[0], setError = _c[1];
+    useEffect(function () {
+        setValue(time);
+        if (isTimeInRange(time, { minDate: minTime, maxDate: maxTime, dateHelpers: dateHelpers })) {
+            setError(false);
+        }
+        else {
+            setError(true);
+        }
+    }, [time, minTime, maxTime, dateHelpers]);
+    var handleChange = function (nextTime) {
+        setValue(nextTime);
+        if (nextTime) {
+            setError(false);
+            onChange(nextTime);
+        }
+        else {
+            setError(true);
+        }
+    };
+    var mergedOverrides = useMemo(function () {
+        return mergeOverrides({
+            TimePicker: {
+                props: {
+                    overrides: {
+                        Select: {
+                            props: __assign(__assign({ clearable: false, intent: error ? 'error' : 'default', backspaceRemoves: true }, (!value && { value: [] })), { onBlur: function () {
+                                    setValue(time);
+                                    if (isTimeInRange(time, { minDate: minTime, maxDate: maxTime, dateHelpers: dateHelpers })) {
+                                        setError(false);
+                                    }
+                                    else {
+                                        setError(true);
+                                    }
+                                }, overrides: {
+                                    Root: {
+                                        props: {
+                                            'data-testid': 'time-input-container',
+                                        },
+                                    },
+                                    Input: {
+                                        props: {
+                                            'data-testid': 'time-input',
+                                        },
+                                    },
+                                    ValueContainer: {
+                                        style: {
+                                            fontVariantNumeric: 'tabular-nums',
+                                        },
+                                    },
+                                } }),
+                        },
+                    },
+                },
+            },
+        }, overrides);
+    }, [error, value, overrides, time, minTime, maxTime, dateHelpers]);
+    var _d = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.TimePicker, DefaultTimePicker), 2), TimePicker = _d[0], timeSelectProps = _d[1];
+    return _jsx(TimePicker, __assign({ size: "sm", value: value, onChange: handleChange, creatable: true, clearable: true }, timeSelectProps), void 0);
+};

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

@@ -0,0 +1 @@
+export declare const DEFAULT_FORMAT_STRING = "MM/dd/yyyy";

package/esm/date-picker/constants.js

@@ -0,0 +1 @@
+export var DEFAULT_FORMAT_STRING = 'MM/dd/yyyy';

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

@@ -0,0 +1,10 @@
+import Calendar from './Calendar';
+import DatePickerInput from './DatePickerInput';
+export { Calendar };
+export { StyledCalendarContainer, StyledCalendarHeader, StyledInputWrapper, StyledMonth, StyledMonthContainer, StyledMonthHeader, StyledMonthYearSelectButton, StyledMonthYearSelectIconContainer, StyledNextButton, StyledPrevButton, StyledRoot, StyledSelectorContainer, StyledWeek, StyledWeekdayHeader, } from 'baseui/datepicker/styled-components';
+export { DatePicker } from './DatePicker';
+export { DatePickerInput };
+export { StatelessDatePicker } from './StatelessDatePicker';
+export { useDatePickerState } from './useDatePickerState';
+export { formatDate } from './utils';
+export * from './types';

package/esm/date-picker/index.js

@@ -0,0 +1,10 @@
+import Calendar from './Calendar';
+import DatePickerInput from './DatePickerInput';
+export { Calendar };
+export { StyledCalendarContainer, StyledCalendarHeader, StyledInputWrapper, StyledMonth, StyledMonthContainer, StyledMonthHeader, StyledMonthYearSelectButton, StyledMonthYearSelectIconContainer, StyledNextButton, StyledPrevButton, StyledRoot, StyledSelectorContainer, StyledWeek, StyledWeekdayHeader, } from 'baseui/datepicker/styled-components';
+export { DatePicker } from './DatePicker';
+export { DatePickerInput };
+export { StatelessDatePicker } from './StatelessDatePicker';
+export { useDatePickerState } from './useDatePickerState';
+export { formatDate } from './utils';
+export * from './types';

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

@@ -0,0 +1,3 @@
+export declare type DatePickerLocale = {
+    popoverAriaLabel: string;
+};

package/esm/date-picker/locale.js

@@ -0,0 +1 @@
+export {};

package/esm/date-picker/stateful-container.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { StatefulContainerProps } from './types';
+declare const StatefulContainer: {
+    ({ adapter, onChange, value, startOpen, ...props }: StatefulContainerProps): ReactElement;
+    defaultProps: {
+        adapter: any;
+    };
+};
+export default StatefulContainer;

package/esm/date-picker/stateful-container.js

@@ -0,0 +1,26 @@
+import { __assign, __read, __rest } from "tslib";
+import * as React from 'react';
+import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
+import { useDatePickerState } from './useDatePickerState';
+var StatefulContainer = function (_a) {
+    var _b;
+    var adapter = _a.adapter, onChange = _a.onChange, value = _a.value, _c = _a.startOpen, startOpen = _c === void 0 ? false : _c, props = __rest(_a, ["adapter", "onChange", "value", "startOpen"]);
+    var _d = __read(React.useState(value), 2), date = _d[0], setDate = _d[1];
+    var _e = useDatePickerState({ startOpen: startOpen }), isOpen = _e.isOpen, handleOpen = _e.handleOpen, handleClose = _e.handleClose, setIsOpen = _e.setIsOpen;
+    React.useEffect(function () {
+        setDate(value);
+    }, [value]);
+    var handleDateChange = React.useCallback(function (_a) {
+        var _value = _a.value;
+        var prevValue = date;
+        setDate(_value);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ value: _value });
+        setIsOpen(false);
+    }, [setDate, setIsOpen, onChange, date]);
+    var children = props.children, restProps = __rest(props, ["children"]);
+    return (_b = props.children) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, restProps), { value: date, adapter: adapter, onChange: handleDateChange, onFocus: handleOpen, onBlur: handleClose, isOpen: isOpen, range: false }));
+};
+StatefulContainer.defaultProps = {
+    adapter: dateFnsAdapter,
+};
+export default StatefulContainer;

package/esm/date-picker/styled-components.d.ts

@@ -0,0 +1,8 @@
+import { SharedStyleProps } from './types';
+import { StyleFn, Styles } from '../types';
+export declare const StyledInputWrapper: import("../style/styled").StyledComponent;
+export declare const getDayStyles: (todaySOD: any) => Styles;
+export declare const StyledWeekdayHeader: import("../style/styled").StyledComponent;
+export declare const StyledFooter: import("../style/styled").StyledComponent;
+export declare const StyledFooterBeforeEnhancer: import("../style/styled").StyledComponent;
+export declare const getCalendarContainerStyles: StyleFn<SharedStyleProps>;

package/esm/date-picker/styled-components.js

@@ -0,0 +1,133 @@
+import { __assign } from "tslib";
+import { getWeekdayInLocale } from 'baseui/datepicker/utils';
+import getDayStateCode from 'baseui/datepicker/utils/day-state';
+import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
+import { styled } from '../style';
+export var StyledInputWrapper = styled('div');
+var getWeekdayHeaderStyle = function (utils, props) {
+    var getStyle = utils.getStyle, px2rem = utils.px2rem, theme = utils.theme;
+    var _a = props.$date, $date = _a === void 0 ? [new Date()] : _a, alt = props.alt, range = props.range;
+    // no highlight required if range is true or no date is selected
+    var isHighlighted;
+    if (range || !$date[0]) {
+        isHighlighted = false;
+    }
+    else {
+        isHighlighted = getWeekdayInLocale(Array.isArray($date) ? $date[0] : $date) === alt;
+    }
+    return getStyle('border-b-2 box-border cursor-default h-9 inline-block m-0 pb-2 pt-2 relative text-center w-9', {
+        marginBottom: '-1px',
+        borderBottomStyle: 'solid',
+        borderBottomColor: isHighlighted ? theme.spr.ui04 : 'transparent',
+        color: isHighlighted ? theme.spr.text04 : 'inherit',
+        lineHeight: px2rem(20),
+        paddingLeft: px2rem(6),
+        paddingRight: px2rem(6),
+    });
+};
+var getEdgeDayBeforeStyle = function (code, firstChild, peekNextMonth) {
+    var firstChildStyle = firstChild ? { content: 'none' } : {};
+    var lastChildStyle = firstChild ? {} : { content: 'none' };
+    var pseudoSelectedStyle = firstChild
+        ? {
+            borderLeftWidth: '2px',
+            borderTopLeftRadius: '100%',
+            borderBottomLeftRadius: '100%',
+        }
+        : {
+            borderRightWidth: '2px',
+            borderTopRightRadius: '100%',
+            borderBottomRightRadius: '100%',
+        };
+    // See the baseui/datepicker/utils/day-state.js file for the description of all available states
+    // rdhsrSsDeDpSrHpHrRrLsMeMoM
+    // '0000000000000000'
+    return ({
+        // selected - hasRangeSelected - startDate
+        '100111000000000': lastChildStyle,
+        // selected - hasRangeSelected - endDate
+        '100110100000000': firstChildStyle,
+        // selected and hasRangeHighlighted on the right from a selected date
+        '100100001010000': lastChildStyle,
+        // selected and hasRangeHighlighted on the left from a selected date
+        '100100001001000': firstChildStyle,
+        // only one date selected in a range
+        // '100100000000000': {content: 'none'},
+        // pseudo-selected date
+        '100010010000000': pseudoSelectedStyle,
+        '100010010000100': pseudoSelectedStyle,
+        '100010010000010': pseudoSelectedStyle,
+        // pseudo-highlighted date
+        '100000001100000': pseudoSelectedStyle,
+        '100000001100100': pseudoSelectedStyle,
+        '100000001100010': pseudoSelectedStyle,
+        // highlighted date and hasRangeHighlighted on the right from a selected date
+        '101000001010000': firstChildStyle,
+        // highlighted date and hasRangeHighlighted on the left from a selected date
+        '101000001001000': lastChildStyle,
+        // highlighted pseudo-selected date
+        '101010010000000': pseudoSelectedStyle,
+        // highlighted pseudo-selected date that is first day of the month
+        '101010010000100': !peekNextMonth && !firstChild ? { content: 'none' } : pseudoSelectedStyle,
+        // highlighted pseudo-selected date that is last day of the month
+        '101010010000010': !peekNextMonth && firstChild ? { content: 'none' } : pseudoSelectedStyle,
+    }[code] || {});
+};
+export var getDayStyles = function (todaySOD) { return [
+    'text-12 leading-8 w-9',
+    function (_a, props) {
+        var theme = _a.theme, px2rem = _a.px2rem;
+        var $isHighlighted = props.$isHighlighted, $hasRangeHighlighted = props.$hasRangeHighlighted, $date = props.$date, $selected = props.$selected, $isHovered = props.$isHovered, $range = props.$range, $outsideMonthWithinRange = props.$outsideMonthWithinRange, $startOfMonth = props.$startOfMonth, $endOfMonth = props.$endOfMonth, $hasDateLabel = props.$hasDateLabel, $month = props.$month;
+        var code = getDayStateCode(props);
+        var $outsideMonth = new Date($date).getMonth() !== $month;
+        var backgroundColor = 'transparent';
+        if ($selected) {
+            backgroundColor = theme.spr.ui04;
+        }
+        else if (props.$pseudoSelected && $isHighlighted) {
+            backgroundColor = theme.spr.ui03;
+        }
+        else if ($isHovered || $isHighlighted || props.$pseudoHighlighted) {
+            backgroundColor = theme.spr.ui05;
+        }
+        return __assign(__assign({ height: $hasDateLabel ? px2rem('60px') : px2rem('36px'), paddingLeft: px2rem('6px'), paddingRight: px2rem('6px'), ':after': __assign(__assign({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($isHighlighted &&
+                !$selected &&
+                !$isHovered &&
+                !$hasRangeHighlighted && {
+                backgroundColor: 'transparent',
+            })), { backgroundColor: backgroundColor, height: '100%', top: 0 }), ':before': __assign(__assign(__assign(__assign({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($outsideMonthWithinRange ? { content: '' } : {})), ($startOfMonth
+                ? {
+                    borderTopLeftRadius: '100%',
+                    borderBottomLeftRadius: '100%',
+                }
+                : {})), ($endOfMonth
+                ? {
+                    borderTopRightRadius: '100%',
+                    borderBottomRightRadius: '100%',
+                }
+                : {})), ($outsideMonth ? { backgroundColor: 'transparent' } : {})), ':first-child': __assign({}, ($range
+                ? {
+                    ':before': __assign({}, getEdgeDayBeforeStyle(code, true, props.$peekNextMonth)),
+                }
+                : {})), ':last-child': __assign({}, ($range
+                ? {
+                    ':before': __assign({}, getEdgeDayBeforeStyle(code, false, props.$peekNextMonth)),
+                }
+                : {})) }, (dateFnsAdapter.isEqual($date, todaySOD) &&
+            !$selected && {
+            color: theme.spr.text04,
+        })), ($outsideMonth && { color: theme.spr.text03 }));
+    },
+]; };
+export var StyledWeekdayHeader = styled('div', getWeekdayHeaderStyle);
+export var StyledFooter = styled('div', 'flex px-4 py-3');
+export var StyledFooterBeforeEnhancer = styled('div', 'flex-none');
+export var getCalendarContainerStyles = function (_a) {
+    var px2rem = _a.px2rem;
+    return ({
+        paddingTop: px2rem('10px'),
+        paddingBottom: px2rem('12px'),
+        paddingRight: px2rem('16px'),
+        paddingLeft: px2rem('16px'),
+    });
+};