@spscommerce/ds-react 5.20.2 → 5.20.3-ie

package/dist/out-tsc/dateRangePicker/SpsDateRangePicker.js

@@ -0,0 +1,635 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+/* eslint-disable */
+import { SelectMode, } from '@spscommerce/ds-shared';
+import { Position, PositioningService } from '@spscommerce/positioning';
+import clsx from 'clsx';
+import * as momentImport from 'moment-timezone';
+import * as React from 'react';
+import * as PropTypes from '../prop-types';
+var propsDoc = {
+    placeholder: 'string',
+    disabled: 'boolean',
+    format: 'string',
+    minDate: 'string',
+    maxDate: 'string',
+    availablePresets: 'Array<Duration>',
+    onChange: '(newValue: MomentRange) => void',
+    value: 'MomentRange',
+    preset: 'Duration',
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { placeholder: PropTypes.string, disabled: PropTypes.bool, format: PropTypes.string, minDate: PropTypes.string, maxDate: PropTypes.string, availablePresets: PropTypes.array, onChange: PropTypes.fun(), value: PropTypes.impl(), preset: PropTypes.impl() });
+export function weekOfMonth(mmt) {
+    return Math.floor((mmt.clone().date(1).day() + mmt.date() - 1) / 7);
+}
+var moment = momentImport.default || momentImport; // required for rollup to work without a TypeScript error
+var defaultPresets = [
+    { days: 1 },
+    { days: 7 },
+    { days: 30 },
+    { days: 60 },
+    { days: 90 },
+    { years: 1 },
+].map(moment.duration);
+var _positioningService = new PositioningService();
+var idNum = 0;
+export function SpsDateRangePicker(props) {
+    var className = props.className, _a = props.placeholder, placeholder = _a === void 0 ? 'MM/DD/YYYY - MM/DD/YYYY' : _a, disabled = props.disabled, _b = props.format, format = _b === void 0 ? moment.localeData().longDateFormat('MM/DD/YYYY') || 'MM/DD/YYYY' : _b, maxDate = props.maxDate, minDate = props.minDate, availablePresets = props.availablePresets, preset = props.preset, onChange = props.onChange, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, value = props.value, rest = __rest(props, ["className", "placeholder", "disabled", "format", "maxDate", "minDate", "availablePresets", "preset", "onChange", 'data-testid', "unsafelyReplaceClassName", "value"]);
+    var _c = __read(React.useState(false), 2), isOpen = _c[0], setIsOpen = _c[1];
+    var _d = __read(React.useState(), 2), currentValue = _d[0], setCurrentValue = _d[1];
+    var _e = __read(React.useState(), 2), view = _e[0], setView = _e[1];
+    var _f = __read(React.useState(''), 2), text = _f[0], setText = _f[1];
+    var _g = __read(React.useState(null), 2), presets = _g[0], setPreset = _g[1];
+    var _h = __read(React.useState(undefined), 2), selectedPreset = _h[0], setSelectedPreset = _h[1];
+    var _j = __read(React.useState(null), 2), mouseoverRange = _j[0], setMouseoverRange = _j[1];
+    var _k = __read(React.useState(SelectMode.START), 2), selectMode = _k[0], setSelectMode = _k[1];
+    var _l = __read(React.useState(), 2), keyboardFocusDay = _l[0], setKeyboardFocusDay = _l[1];
+    var _m = __read(React.useState(minDate ? moment(minDate) : {}), 2), minDateMoment = _m[0], setMinDateMoment = _m[1];
+    var _o = __read(React.useState(maxDate ? moment(maxDate) : {}), 2), maxDateMoment = _o[0], setMaxDateMoment = _o[1];
+    var _p = __read(React.useState(true), 2), isInitialValue = _p[0], setIsInitialValue = _p[1];
+    var _q = __read(React.useState(null), 2), months = _q[0], setMonths = _q[1];
+    var inputElement = React.useRef(null);
+    var calendar = React.useRef(null);
+    var dateRange = React.useRef(null);
+    var weekDayNames = Object.freeze(moment.weekdaysShort());
+    var leftAligned = false;
+    var _idNum = idNum++;
+    var textRef = React.useRef();
+    React.useEffect(function () {
+        textRef.current = currentValue; // Write it to the ref
+        updateText();
+    }, [currentValue]);
+    var clearMouseoverRange = function (event) {
+        if (!event || (event.target instanceof HTMLElement && event.target.tagName !== 'TD')) {
+            setMouseoverRange(null);
+        }
+    };
+    var updateText = function (optionalValue) {
+        if (optionalValue) {
+            setText([
+                optionalValue.start ? optionalValue.start.format(format) : '',
+                optionalValue.end ? optionalValue.end.format(format) : '',
+            ].join(' - '));
+        }
+        else {
+            setText(currentValue
+                ? [
+                    currentValue.start ? currentValue.start.format(format) : '',
+                    currentValue.end ? currentValue.end.format(format) : '',
+                ].join(' - ')
+                : '');
+        }
+    };
+    var close = function () {
+        var currValue = currentValue || textRef.current;
+        setIsOpen(false);
+        _positioningService.release(calendar.current);
+        if (currValue && !currValue.end) {
+            currValue.end = currValue.start.clone().endOf('day');
+            setCurrentValue(currValue);
+            setIsInitialValue(false);
+            setSelectMode(SelectMode.START);
+            clearMouseoverRange();
+        }
+    };
+    var onOutsideClick = function (event) {
+        if (event && document.body.contains((event.target))) {
+            if (!dateRange.current.contains(event.target)) {
+                close();
+            }
+        }
+    };
+    var newWeekArray = function () { return new Array(7); };
+    var generateWeeks = function (date) {
+        var baseDate = {
+            year: date.year(),
+            month: date.month(),
+        };
+        var weekdayArrayIndex = date.weekday();
+        var daysInMonth = date.daysInMonth();
+        var weeksInMonth = Math.ceil((daysInMonth + weekdayArrayIndex) / 7);
+        var weeks = (new Array(weeksInMonth)).fill(true).map(newWeekArray);
+        for (var dateIndex = 0; dateIndex < daysInMonth; dateIndex++) {
+            var offsetDay = dateIndex + weekdayArrayIndex;
+            var week = weeks[Math.floor(offsetDay / 7)];
+            var dayOfWeekIndex = offsetDay % 7;
+            week[dayOfWeekIndex] = Object.freeze(__assign({ date: dateIndex + 1 }, baseDate));
+            if (dayOfWeekIndex === 6) {
+                Object.freeze(week);
+            }
+        }
+        return Object.freeze(weeks);
+    };
+    var generateMonths = function (newView) {
+        setMonths([generateWeeks(newView ? newView.start : view.start), generateWeeks(newView ? newView.end : view.end)]);
+    };
+    var setCalendarView = function (displayMoment) {
+        if (currentValue) {
+            if (currentValue.end && currentValue.end.isValid()) {
+                displayMoment = currentValue.end.clone();
+            }
+            else {
+                return;
+            }
+        }
+        else if (maxDate) {
+            displayMoment = maxDateMoment.clone();
+        }
+        else {
+            displayMoment = moment();
+        }
+        displayMoment.startOf('month');
+        var viewStart = displayMoment.clone().subtract(1, 'month');
+        var newView = { start: viewStart, end: displayMoment };
+        setView(newView);
+        generateMonths(newView);
+    };
+    var onViewportIntersection = function (event) {
+        if (event.target === calendar.current && event.intersectionRatio < 1) {
+            leftAligned = event.intersectionRect.left <= 0
+                && event.boundingClientRect.width > (event.rootBounds.right - event.boundingClientRect.right);
+            _positioningService.reposition(calendar.current, {
+                position: leftAligned ? Position.BOTTOM_LEFT : Position.BOTTOM_RIGHT,
+            });
+        }
+    };
+    var dateIsDisabled = function (date) { return date
+        && (minDate && minDateMoment.isAfter(date, 'day'))
+        || (maxDate && maxDateMoment.isBefore(date, 'day')); };
+    var updatePresets = function () {
+        if (availablePresets) {
+            var psts = availablePresets;
+            var today_1 = moment();
+            var todayIsAllowed_1 = !dateIsDisabled(today_1);
+            var t = psts.filter(function (pst) { return todayIsAllowed_1 && !dateIsDisabled(today_1.subtract(pst)); });
+            setPreset(t);
+        }
+        else {
+            setPreset(defaultPresets);
+        }
+    };
+    React.useEffect(function () {
+        _positioningService.on('viewportIntersection', onViewportIntersection);
+        document.addEventListener('mousedown', onOutsideClick);
+        setCalendarView();
+        updatePresets();
+        return function () {
+            document.removeEventListener('mousedown', onOutsideClick);
+        };
+    }, []);
+    var matchPreset = function (newPreset) {
+        if (presets && newPreset) {
+            var match = presets.find(function (pst) { return pst.asMilliseconds() === moment.duration(newPreset).asMilliseconds(); });
+            return match;
+        }
+        return undefined;
+    };
+    var updateFromPreset = function (newPreset) {
+        var matchedPreset = matchPreset(newPreset);
+        var newValue;
+        if (matchedPreset) {
+            setSelectedPreset(matchedPreset);
+            var today = moment();
+            newValue = {
+                preset: matchedPreset,
+                start: today.clone().subtract(matchedPreset).add(1, 'day').startOf('day'),
+                end: today.endOf('day'),
+            };
+            setCurrentValue(newValue);
+        }
+        else {
+            setCurrentValue(undefined);
+            setSelectedPreset(undefined);
+        }
+        setIsInitialValue(false);
+    };
+    React.useEffect(function () {
+        if (value !== currentValue) {
+            setIsInitialValue(true);
+            setCurrentValue(value);
+            setView(value);
+            if (value && value.preset) {
+                setSelectedPreset(value.preset);
+            }
+            else {
+                setSelectedPreset(undefined);
+            }
+        }
+    }, [value]);
+    React.useEffect(function () {
+        setCalendarView();
+        if (onChange && typeof onChange === 'function' && !isInitialValue) {
+            onChange(currentValue);
+        }
+    }, [currentValue]);
+    React.useEffect(function () {
+        setMinDateMoment(moment(minDate).add(1, 'day'));
+    }, [minDate]);
+    React.useEffect(function () {
+        updatePresets();
+    }, [minDate, maxDate]);
+    React.useEffect(function () {
+        setMaxDateMoment(moment(maxDate).add(1, 'day'));
+    }, [maxDate]);
+    React.useEffect(function () {
+        setTimeout(function () {
+            if (selectedPreset) {
+                updateFromPreset(selectedPreset);
+            }
+            if (preset) {
+                setSelectedPreset(moment.duration(preset));
+                updateFromPreset(moment.duration(preset));
+            }
+        }, 0);
+    }, [presets]);
+    var open = function () {
+        if (!isOpen) {
+            if (!view) {
+                setCalendarView();
+            }
+            setIsOpen(true);
+            _positioningService.position(calendar.current, {
+                relativeTo: inputElement.current,
+                position: Position.BOTTOM_LEFT,
+                offsets: [0, 1],
+            });
+        }
+    };
+    var parse = function (input) {
+        var _a;
+        if (input) {
+            var split = input.split('-');
+            var startStr = void 0;
+            var endStr = void 0;
+            var start = void 0;
+            var end = void 0;
+            if (split.length > 2) {
+                var prev = void 0;
+                for (var i = 0; i <= Math.ceil(input.length / 2); i++) {
+                    var sub = input.substr(i, input.length - 2 * i);
+                    if (sub.indexOf('-') === -1) {
+                        startStr = input.substring(0, i + prev.indexOf('-') - 1);
+                        endStr = input.substring(i + prev.indexOf('-'));
+                        break;
+                    }
+                    prev = sub;
+                }
+            }
+            else {
+                _a = __read(split, 2), startStr = _a[0], endStr = _a[1];
+                var startDateStr = startStr ? startStr.trim().split('/') : [];
+                start = moment({ year: parseInt(startDateStr[2], 10), month: parseInt(startDateStr[0], 10) - 1, day: parseInt(startDateStr[1], 10) });
+                var endDateStr = endStr ? endStr.trim().split('/') : [];
+                end = moment({ year: parseInt(endDateStr[2], 10), month: parseInt(endDateStr[0], 10) - 1, day: parseInt(endDateStr[1], 10) });
+            }
+            return {
+                start: start,
+                end: end,
+            };
+        }
+    };
+    var onTextChanged = function (e) {
+        var val = e.target.value;
+        var range = parse(val);
+        if (range && range.start.isValid() && range.end.isValid()) {
+            setCurrentValue(range);
+        }
+        setIsInitialValue(false);
+        setText(e.target.value);
+    };
+    var getPresetText = function (pst) {
+        if (pst.asDays() === 1) {
+            return 'Today'; // today is a special snowflake
+        }
+        return "Last " + pst.humanize().replace('a ', '');
+    };
+    var dateIsSelected = function (date) { return date
+        && currentValue && ((currentValue.start && currentValue.start.isSame(date, 'day'))
+        || (currentValue.end && currentValue.end.isSame(date, 'day'))
+        || (currentValue.start
+            && currentValue.end
+            && currentValue.start.isBefore(date, 'day')
+            && currentValue.end.isAfter(date, 'day'))); };
+    var dateIsFocused = function (date) { return date && keyboardFocusDay && moment.isMoment(keyboardFocusDay) && keyboardFocusDay.isSame(date, 'day'); };
+    var dateIsSelectionStart = function (date) { return date
+        && currentValue
+        && currentValue.start && currentValue.start.isSame(date, 'day')
+        && currentValue.end && !currentValue.end.isSame(date, 'day'); };
+    var dateIsSelectionMiddle = function (date) { return date
+        && currentValue
+        && currentValue.start && currentValue.start.isBefore(date, 'day')
+        && currentValue.end && currentValue.end.isAfter(date, 'day'); };
+    var dateIsSelectionEnd = function (date) { return date
+        && currentValue
+        && currentValue.start && !currentValue.start.isSame(date, 'day')
+        && currentValue.end && currentValue.end.isSame(date, 'day'); };
+    var dateIsWithinPendingSelection = function (date) { return date
+        && mouseoverRange
+        && mouseoverRange.start.isBefore(date, 'day')
+        && mouseoverRange.end.isAfter(date, 'day'); };
+    var datepickerPrevButtonIsDisabled = function () { return minDate && view && view.start && view.start.isSame(minDateMoment, 'month'); };
+    var datepickerNextButtonIsDisabled = function () { return minDate && view && view.start && view.start.isSame(minDateMoment, 'month'); };
+    var datepickerInputWrapperIsDisabled = function () { return currentValue && currentValue.start && currentValue.end && !disabled; };
+    var onDatepickerMouseDown = function (event) {
+        event.preventDefault();
+    };
+    var selectDate = function (date) {
+        if (date && !dateIsDisabled(date)) {
+            var start = currentValue && currentValue.start;
+            var end = currentValue && currentValue.end;
+            var simpleDate = { year: date.year(), month: date.month(), date: date.date() };
+            date = date.clone();
+            setSelectedPreset(undefined);
+            var newValue = void 0;
+            if (selectMode === SelectMode.START) {
+                newValue = {
+                    start: start ? start.set(simpleDate) : date,
+                    end: null,
+                };
+                setSelectMode(SelectMode.END);
+            }
+            else if (!start || date.isBefore(start)) {
+                newValue = {
+                    start: start ? start.set(simpleDate) : date,
+                    end: null,
+                };
+            }
+            else {
+                newValue = {
+                    start: start,
+                    end: (end ? end.set(simpleDate) : date).endOf('day'),
+                };
+                setSelectMode(SelectMode.START);
+                clearMouseoverRange();
+                setKeyboardFocusDay(null);
+                inputElement.current.focus();
+                close();
+            }
+            setIsInitialValue(false);
+            setCurrentValue(newValue);
+        }
+    };
+    var onCalendarClick = function (event) {
+        if (event && event.target) {
+            try {
+                var date = JSON.parse(event.target.getAttribute('data-date'));
+                selectDate(moment(date));
+            }
+            catch (ignore) { }
+        }
+    };
+    var focusCalendar = function () {
+        calendar.current.focus();
+        setKeyboardFocusDay(view.start.clone());
+    };
+    var updateMouseoverRange = function (pendingSelectionEndDate) {
+        if (currentValue && currentValue.start && currentValue.end === null) {
+            setMouseoverRange({
+                start: currentValue.start.clone(),
+                end: pendingSelectionEndDate,
+            });
+        }
+    };
+    var onCalendarMouseover = function (event) {
+        try {
+            var date = JSON.parse(event.target.getAttribute('data-date'));
+            updateMouseoverRange(moment(date));
+        }
+        catch (ignore) { }
+    };
+    var onNewPresetSelected = function (event, range) {
+        setSelectedPreset(range);
+        updateFromPreset(range);
+        setSelectMode(SelectMode.START);
+        inputElement.current.focus();
+    };
+    var clear = function () {
+        setCurrentValue(undefined);
+        setSelectedPreset(undefined);
+        setIsInitialValue(false);
+        setText('');
+        setSelectMode(SelectMode.START);
+        setTimeout(function () { return inputElement.current.focus(); }, 0);
+    };
+    var viewNextMonth = function () {
+        if (!maxDate || view.end.isBefore(maxDateMoment, 'month')) {
+            view.start.add(1, 'month');
+            view.end.add(1, 'month');
+            generateMonths();
+        }
+    };
+    var viewPreviousMonth = function () {
+        if (!minDate || view.start.isAfter(minDateMoment, 'month')) {
+            view.start.subtract(1, 'month');
+            view.end.subtract(1, 'month');
+            generateMonths();
+        }
+    };
+    var renderCalendar = function (month) {
+        var cal = [];
+        var attr = {};
+        for (var i = 0; i < month.length; i++) {
+            var children = [];
+            var week = month[i];
+            for (var j = 0; j < week.length; j++) {
+                var date = week[j];
+                var dateClass = clsx('sps-datepicker__calendar-cell', {
+                    'sps-datepicker__calendar-day': date,
+                    'sps-datepicker__calendar-day--disabled': dateIsDisabled(date),
+                    'sps-datepicker__calendar-day--focus': dateIsFocused(date),
+                    'sps-datepicker__calendar-day--selected': dateIsSelected(date),
+                    'sps-datepicker__calendar-day--selection-start': dateIsSelectionStart(date),
+                    'sps-datepicker__calendar-day--selection-middle': dateIsSelectionMiddle(date),
+                    'sps-datepicker__calendar-day--selection-end': dateIsSelectionEnd(date),
+                    'sps-datepicker__calendar-day--pending-selection': dateIsWithinPendingSelection(date),
+                });
+                attr['data-date'] = JSON.stringify(date);
+                children.push(React.createElement("td", __assign({ key: j }, attr, { className: dateClass }), date && (date.date)));
+            }
+            cal.push(React.createElement("tr", { key: i }, children));
+        }
+        return cal;
+    };
+    var onKeyDown = function (event) {
+        var newKeyboardFocusDay;
+        switch (event.key) {
+            case 'Down':
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!isOpen) {
+                    open();
+                }
+                if (keyboardFocusDay) {
+                    newKeyboardFocusDay = moment.min(keyboardFocusDay.clone().add(1, 'week'), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()));
+                    setKeyboardFocusDay(newKeyboardFocusDay);
+                }
+                else {
+                    focusCalendar();
+                }
+                updateMouseoverRange(newKeyboardFocusDay);
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                if (keyboardFocusDay) {
+                    event.preventDefault();
+                    if (weekOfMonth(keyboardFocusDay) === 0) {
+                        newKeyboardFocusDay = null;
+                        setKeyboardFocusDay(null);
+                        inputElement.current.focus();
+                    }
+                    else {
+                        newKeyboardFocusDay = moment.max(keyboardFocusDay.clone().subtract(1, 'week'), keyboardFocusDay.date(1));
+                        setKeyboardFocusDay(newKeyboardFocusDay);
+                    }
+                }
+                updateMouseoverRange(newKeyboardFocusDay);
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                if (keyboardFocusDay) {
+                    event.preventDefault();
+                    if (keyboardFocusDay.day() === 0 || keyboardFocusDay.date() === 1) {
+                        var week = weekOfMonth(keyboardFocusDay);
+                        keyboardFocusDay.subtract(1, 'month').date(1).day(6);
+                        if (week) {
+                            newKeyboardFocusDay = moment.min(keyboardFocusDay.clone().add(week, 'weeks'), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()));
+                            setKeyboardFocusDay(newKeyboardFocusDay);
+                        }
+                    }
+                    else {
+                        newKeyboardFocusDay = keyboardFocusDay.subtract(1, 'day');
+                        setKeyboardFocusDay(newKeyboardFocusDay);
+                    }
+                }
+                updateMouseoverRange(newKeyboardFocusDay);
+                break;
+            case 'Right':
+            case 'ArrowRight':
+                if (keyboardFocusDay) {
+                    event.preventDefault();
+                    if (keyboardFocusDay.day() === 6 || keyboardFocusDay.date() === keyboardFocusDay.daysInMonth()) {
+                        var week = weekOfMonth(keyboardFocusDay);
+                        keyboardFocusDay.add(1, 'month').date(1);
+                        if (week) {
+                            newKeyboardFocusDay = moment.min(keyboardFocusDay.clone().add(week, 'weeks').day(0), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()).day(0));
+                            setKeyboardFocusDay(newKeyboardFocusDay);
+                        }
+                    }
+                    else {
+                        newKeyboardFocusDay = keyboardFocusDay.add(1, 'day');
+                        setKeyboardFocusDay(newKeyboardFocusDay);
+                    }
+                }
+                updateMouseoverRange(newKeyboardFocusDay);
+                break;
+            case 'Enter':
+                if (keyboardFocusDay) {
+                    selectDate(keyboardFocusDay);
+                }
+                break;
+            case 'Esc':
+            case 'Escape':
+                if (keyboardFocusDay && moment.isMoment(keyboardFocusDay)) {
+                    setKeyboardFocusDay(null);
+                    inputElement.current.focus();
+                }
+                else {
+                    close();
+                }
+                if (selectMode === SelectMode.END) {
+                    setSelectMode(SelectMode.START);
+                }
+                break;
+        }
+        if (keyboardFocusDay && moment.isMoment(keyboardFocusDay)) {
+            if (keyboardFocusDay.isBefore(view.start, 'month')) {
+                viewPreviousMonth();
+            }
+            else if (keyboardFocusDay.isAfter(view.end, 'month')) {
+                viewNextMonth();
+            }
+        }
+    };
+    var datepickerClasses = clsx(unsafelyReplaceClassName || 'sps-datepicker', 'sps-date-range-picker', isOpen && 'open', isOpen && 'z-stratum-dropdown');
+    var prevButtonClasses = clsx('sps-datepicker__button', 'sps-datepicker__button-previous-month', datepickerPrevButtonIsDisabled && 'sps-datepicker__button--disabled');
+    var nextButtonClasses = clsx('sps-datepicker__button', 'sps-datepicker__button-next-month', datepickerNextButtonIsDisabled && 'sps-datepicker__button--disabled');
+    var inputWrapperClasses = clsx('sps-form-control', datepickerInputWrapperIsDisabled() && 'sps-datepicker__input--clearable', disabled && 'disabled');
+    return (React.createElement("div", __assign({ className: datepickerClasses, onKeyDown: onKeyDown }, rest, { "data-testid": testId + "__datepicker", ref: dateRange }),
+        React.createElement("div", { className: "sps-datepicker__dropdown", ref: calendar, tabIndex: -1, "data-testid": testId + "__datepicker__dropdown" },
+            presets && presets.length > 0 && (React.createElement("div", { className: "sps-datepicker__presets", "data-testid": testId + "__datepicker__presets" },
+                React.createElement("fieldset", null,
+                    React.createElement("legend", { className: "sps-datepicker__presets-label" }, "Ranges"),
+                    React.createElement("div", { className: "sps-custom-control sps-custom-radio sps-custom-control--no-error" },
+                        React.createElement("input", { type: "radio", id: "sps-date-range-picker-" + _idNum + "__range-custom", className: "sps-custom-control__input", checked: selectedPreset === undefined, name: "sps-date-range-picker-" + _idNum + "__range", onChange: onNewPresetSelected }),
+                        React.createElement("label", { className: "sps-custom-control__label", htmlFor: "sps-date-range-picker-" + _idNum + "__range-custom" }, "Custom")),
+                    presets.map(function (range, i) { return (React.createElement("div", { key: i, className: "sps-custom-control sps-custom-radio sps-custom-control--no-error" },
+                        React.createElement("input", { type: "radio", id: "sps-date-range-picker-" + _idNum + "__range-" + i, key: i, name: "sps-date-range-picker-" + _idNum + "__range", onChange: function (e) { onNewPresetSelected(e, range); }, value: range, checked: selectedPreset === range, className: "sps-custom-control__input" }),
+                        React.createElement("label", { className: "sps-custom-control__label", htmlFor: "sps-date-range-picker-" + _idNum + "__range-" + i }, getPresetText(range)))); })))),
+            React.createElement("div", { className: "sps-datepicker__calendar", "data-testid": testId + "__datepicker__calendar" },
+                React.createElement("div", { className: "sps-datepicker__calendar-head" },
+                    React.createElement("a", { className: prevButtonClasses, "aria-label": "prev", onClick: viewPreviousMonth, onMouseDown: onDatepickerMouseDown },
+                        React.createElement("i", { className: "sps-icon sps-icon-chevron-left" })),
+                    React.createElement("span", { className: "sps-datepicker__calendar-head-label sps-datepicker__calendar-head-label--rangepicker" },
+                        React.createElement("span", { className: "sps-datepicker__calendar-head-label-month" }, view && view.start && view.start.format('MMMM')),
+                        React.createElement("span", { className: "sps-datepicker__calendar-head-label-year" }, view && view.start && view.start.year())),
+                    React.createElement("span", { className: "sps-datepicker__calendar-head-label sps-datepicker__calendar-head-label--rangepicker" },
+                        React.createElement("span", { className: "sps-datepicker__calendar-head-label-month" }, view && view.end && view.end.format('MMMM')),
+                        React.createElement("span", { className: "sps-datepicker__calendar-head-label-year" }, view && view.end && view.end.year())),
+                    React.createElement("a", { className: nextButtonClasses, onClick: viewNextMonth, onMouseDown: onDatepickerMouseDown },
+                        React.createElement("i", { className: "sps-icon sps-icon-chevron-right" }))),
+                React.createElement("div", { className: "sps-datepicker__calendar-body", onClick: onCalendarClick, onMouseOver: onCalendarMouseover, onMouseOut: clearMouseoverRange }, months && months.map(function (month, i) { return (React.createElement("table", { key: i },
+                    React.createElement("thead", null,
+                        React.createElement("tr", null, weekDayNames.map(function (dayName, j) { return (React.createElement("th", { key: j }, dayName)); }))),
+                    React.createElement("tbody", null, renderCalendar(month)))); })))),
+        React.createElement("div", { className: "sps-datepicker__inputs", "data-testid": testId + "__datepicker__inputs" },
+            React.createElement("span", { className: "sps-datepicker__input" },
+                React.createElement("span", { className: inputWrapperClasses, "data-testid": testId + "__datepicker__input-wrapper" },
+                    currentValue && currentValue.preset && (React.createElement("span", { className: "sps-tag sps-tag--info" }, getPresetText(currentValue.preset))),
+                    React.createElement("input", { ref: inputElement, style: {
+                            opacity: (currentValue && currentValue.preset) ? 0 : 1,
+                        }, type: "text", className: "sps-datepicker__text-input", disabled: disabled, value: text, onClick: open, onFocus: open, onChange: onTextChanged, placeholder: placeholder, "data-testid": testId + "__datepicker__input" })),
+                React.createElement("i", { className: "sps-icon sps-icon-calendar" }),
+                (currentValue && currentValue.start && currentValue.end && !disabled) ? (React.createElement("i", { className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: clear })) : ''))));
+}
+Object.assign(SpsDateRangePicker, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: 'SpsDateRangePicker',
+});
+//# sourceMappingURL=SpsDateRangePicker.js.map