@quillsql/react 1.0.0

package/lib/DateRangePicker/Calendar.js

@@ -0,0 +1,94 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { add, eachDayOfInterval, endOfMonth, format, getDay, isSaturday, isSunday, nextSaturday, previousSunday, startOfMonth, } from 'date-fns';
+import { BaseColorContext } from '../contexts';
+import { ArrowLeftHeadIcon, ArrowRightHeadIcon, DoubleArrowLeftHeadIcon, DoubleArrowRightHeadIcon, } from '../assets';
+import { border, borderRadius, boxShadow, fontSize, fontWeight, getColorClassNames, sizing, spacing, } from '../lib';
+import { capitalize, getDateStyles, getWeekdays } from './dateRangePickerUtils';
+import { DEFAULT_COLOR, colorPalette } from '../lib/theme';
+import { makeDateRangePickerClassName } from './dateRangePickerUtils';
+export var colStartClasses = [
+    '',
+    'col-start-2',
+    'col-start-3',
+    'col-start-4',
+    'col-start-5',
+    'col-start-6',
+    'col-start-7',
+];
+var CalendarHeader = function (_a) {
+    var enableYearPagination = _a.enableYearPagination, anchorDate = _a.anchorDate, setStartOfCurrMonth = _a.setStartOfCurrMonth, locale = _a.locale;
+    var firstDayOfMonth = startOfMonth(anchorDate);
+    var handlePaginationClick = function (type) {
+        switch (type) {
+            case 'nextMonth':
+                setStartOfCurrMonth(add(firstDayOfMonth, { months: 1 }));
+                break;
+            case 'prevMonth':
+                setStartOfCurrMonth(add(firstDayOfMonth, { months: -1 }));
+                break;
+            case 'nextYear':
+                setStartOfCurrMonth(add(firstDayOfMonth, { years: 1 }));
+                break;
+            case 'prevYear':
+                setStartOfCurrMonth(add(firstDayOfMonth, { years: -1 }));
+                break;
+        }
+    };
+    var displayedTitle = capitalize(format(firstDayOfMonth, 'MMMM yyyy', { locale: locale }), locale);
+    return (_jsxs("div", __assign({ className: twMerge(makeDateRangePickerClassName('calendarHeader'), 'flex justify-between items-center', spacing.twoXs.paddingX, spacing.sm.paddingY) }, { children: [_jsxs("div", __assign({ className: twMerge(makeDateRangePickerClassName('calendarHeaderPrevSelection'), 'flex items-center space-x-1') }, { children: [_jsx("button", __assign({ type: "button", className: twMerge(makeDateRangePickerClassName('calendarHeaderPrevYearButton'), 'inline-flex focus:outline-none focus:ring-2', !enableYearPagination && 'hidden', getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
+                            .hoverBgColor, getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor, getColorClassNames('blue', colorPalette.lightRing).focusRingColor, spacing.twoXs.paddingAll, spacing.px.marginRight, fontSize.sm, fontWeight.md, borderRadius.sm.all, border.sm.all, boxShadow.sm), onClick: function () { return handlePaginationClick('prevYear'); } }, { children: _jsx(DoubleArrowLeftHeadIcon, { className: twMerge(makeDateRangePickerClassName('calendarHeaderPrevYearIcon'), getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
+                                .textColor, sizing.lg.height, sizing.lg.width), "aria-hidden": "true" }) })), _jsx("button", __assign({ type: "button", name: "prevMonth", className: twMerge(makeDateRangePickerClassName('calendarHeaderPrevMonthButton'), 'inline-flex focus:outline-none focus:ring-2', getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
+                            .hoverBgColor, getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor, getColorClassNames('blue', colorPalette.lightRing).focusRingColor, spacing.twoXs.paddingAll, fontSize.sm, fontWeight.md, borderRadius.sm.all, border.sm.all, boxShadow.sm), onClick: function () { return handlePaginationClick('prevMonth'); } }, { children: _jsx(ArrowLeftHeadIcon, { className: twMerge(makeDateRangePickerClassName('calendarHeaderPrevMonthIcon'), getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
+                                .textColor, sizing.lg.height, sizing.lg.width), "aria-hidden": "true" }) }))] })), _jsx("h2", __assign({ className: twMerge(makeDateRangePickerClassName('calendarHeaderText'), 'text-elem', getColorClassNames(DEFAULT_COLOR, colorPalette.darkestText).textColor, fontSize.sm, fontWeight.lg) }, { children: displayedTitle })), _jsxs("div", __assign({ className: twMerge(makeDateRangePickerClassName('calendarHeaderNextSelection'), 'flex items-center space-x-1') }, { children: [_jsx("button", __assign({ type: "button", name: "nextMonth", className: twMerge(makeDateRangePickerClassName('calendarHeaderNextMonthButton'), 'inline-flex focus:outline-none focus:ring-2', getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
+                            .hoverBgColor, getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor, getColorClassNames('blue', colorPalette.lightRing).focusRingColor, spacing.twoXs.paddingAll, fontSize.sm, fontWeight.md, borderRadius.sm.all, border.sm.all, boxShadow.sm), onClick: function () { return handlePaginationClick('nextMonth'); } }, { children: _jsx(ArrowRightHeadIcon, { className: twMerge(makeDateRangePickerClassName('calendarHeaderNextMonthIcon'), getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
+                                .textColor, sizing.lg.height, sizing.lg.width), "aria-hidden": "true" }) })), _jsx("button", __assign({ type: "button", className: twMerge(makeDateRangePickerClassName('calendarHeaderNextYearButton'), 'inline-flex focus:outline-none focus:ring-2', !enableYearPagination && 'hidden', getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
+                            .hoverBgColor, getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor, getColorClassNames('blue', colorPalette.lightRing).focusRingColor, spacing.twoXs.paddingAll, spacing.px.marginLeft, fontSize.sm, fontWeight.md, borderRadius.sm.all, border.sm.all, boxShadow.sm), onClick: function () { return handlePaginationClick('nextYear'); } }, { children: _jsx(DoubleArrowRightHeadIcon, { className: twMerge(makeDateRangePickerClassName('calendarHeaderNextYearIcon'), 'shrink-0 flex-0', getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
+                                .textColor, sizing.lg.height, sizing.lg.width), "aria-hidden": "true" }) }))] }))] })));
+};
+var CalendarBody = function (_a) {
+    var anchorDate = _a.anchorDate, selectedStartDate = _a.selectedStartDate, selectedEndDate = _a.selectedEndDate, onDateClick = _a.onDateClick, minDate = _a.minDate, maxDate = _a.maxDate, locale = _a.locale;
+    var _b = useState(), hoveredDate = _b[0], setHoveredDate = _b[1];
+    var color = useContext(BaseColorContext);
+    var firstDayOfDisplayedMonth = startOfMonth(anchorDate);
+    var lastDayOfDisplayedMonth = endOfMonth(anchorDate);
+    var weekdays = getWeekdays(locale).map(function (dayName) {
+        return capitalize(dayName, locale);
+    });
+    var displayedDates = eachDayOfInterval({
+        start: isSunday(firstDayOfDisplayedMonth)
+            ? firstDayOfDisplayedMonth
+            : previousSunday(firstDayOfDisplayedMonth),
+        end: isSaturday(lastDayOfDisplayedMonth)
+            ? lastDayOfDisplayedMonth
+            : nextSaturday(lastDayOfDisplayedMonth),
+    });
+    var isDateDisabled = function (date, minDate, maxDate, firstDayDisplayedMonth, lastDayDisplayedMonth) {
+        var isDateInDisplayedMonth = date >= firstDayDisplayedMonth && date <= lastDayDisplayedMonth;
+        return ((minDate !== null && date < minDate) ||
+            (maxDate !== null && date > maxDate) ||
+            !isDateInDisplayedMonth);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: twMerge(makeDateRangePickerClassName('calendarBodyWeekdays'), 'grid grid-cols-7 text-center', getColorClassNames(DEFAULT_COLOR, colorPalette.ring).textColor, fontSize.xs, fontWeight.md) }, { children: weekdays.map(function (dayName) { return (_jsx("div", __assign({ className: "w-full flex justify-center" }, { children: _jsx("div", __assign({ className: twMerge('flex items-center justify-center w-full', sizing.threeXl.height) }, { children: dayName })) }), dayName)); }) })), _jsx("div", __assign({ className: twMerge(makeDateRangePickerClassName('calendarBodyDatesGrid'), 'grid grid-cols-7') }, { children: displayedDates.map(function (date) {
+                    var isCurrentDateDisabled = isDateDisabled(date, minDate, maxDate, firstDayOfDisplayedMonth, lastDayOfDisplayedMonth);
+                    return (_jsx("div", __assign({ className: twMerge(makeDateRangePickerClassName('calendarBodyDate'), colStartClasses[getDay(date)], 'w-full') }, { children: _jsx("button", __assign({ type: "button", onClick: function () { return onDateClick(date); }, onPointerEnter: function () { return setHoveredDate === null || setHoveredDate === void 0 ? void 0 : setHoveredDate(date); }, onPointerLeave: function () { return setHoveredDate === null || setHoveredDate === void 0 ? void 0 : setHoveredDate(undefined); }, className: twMerge('w-full flex items-center justify-center', sizing.threeXl.height, fontSize.sm, getDateStyles(date, selectedStartDate, selectedEndDate, hoveredDate, isCurrentDateDisabled, color)), disabled: isCurrentDateDisabled }, { children: _jsx("time", __assign({ dateTime: format(date, 'yyyy-MM-dd', { locale: locale }) }, { children: format(date, 'd', { locale: locale }) })) })) }), date.toString()));
+                }) }))] }));
+};
+var Calendar = function (_a) {
+    var enableYearPagination = _a.enableYearPagination, anchorDate = _a.anchorDate, setStartOfCurrMonth = _a.setStartOfCurrMonth, startDate = _a.startDate, endDate = _a.endDate, minDate = _a.minDate, maxDate = _a.maxDate, onDateClick = _a.onDateClick, locale = _a.locale;
+    return (_jsxs("div", __assign({ className: twMerge(spacing.lg.paddingX, spacing.twoXs.paddingY) }, { children: [_jsx(CalendarHeader, { enableYearPagination: enableYearPagination, anchorDate: anchorDate, setStartOfCurrMonth: setStartOfCurrMonth, locale: locale }), _jsx(CalendarBody, { anchorDate: anchorDate, selectedStartDate: startDate, selectedEndDate: endDate, onDateClick: onDateClick, minDate: minDate, maxDate: maxDate, locale: locale })] })));
+};
+export default Calendar;
+//# sourceMappingURL=Calendar.js.map

package/lib/DateRangePicker/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../src/DateRangePicker/Calendar.tsx"],"names":[],"mappings":"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"}

package/lib/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { enUS } from 'date-fns/locale';
+export type Locale = typeof enUS;
+export type DateRangePickerValue = [
+    (Date | null)?,
+    (Date | null)?,
+    (string | null)?
+];
+export type DateRangePickerOption = {
+    value: string;
+    text: string;
+    startDate: Date;
+    endDate?: Date;
+};
+export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue'> {
+    value?: DateRangePickerValue;
+    defaultValue?: DateRangePickerValue;
+    onValueChange?: (value: DateRangePickerValue) => void;
+    enableDropdown?: boolean;
+    options?: DateRangePickerOption[];
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    placeholder?: string;
+    dropdownPlaceholder?: string;
+    enableYearPagination?: boolean;
+    disabled?: boolean;
+    color?: string;
+    locale?: Locale;
+}
+declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default DateRangePicker;

package/lib/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,105 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/display-name */
+import React, { useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { startOfMonth, startOfToday } from 'date-fns';
+import { enUS } from 'date-fns/locale';
+import { BaseColorContext, HoveredValueContext, SelectedValueContext, } from '../contexts';
+import { useInternalState, useSelectOnKeyDown } from '../hooks';
+import { defaultOptions, getEndDateByDropdownValue, getStartDateByDropdownValue, makeDateRangePickerClassName, parseEndDate, parseStartDate, } from './dateRangePickerUtils';
+import Calendar from './Calendar';
+import DateRangePickerButton from './DateRangePickerButton';
+import { DropdownItem } from '../components/Dropdown';
+import Modal from '../components/Modal';
+var DateRangePicker = React.forwardRef(function (props, ref) {
+    var _a, _b, _c;
+    var value = props.value, defaultValue = props.defaultValue, onValueChange = props.onValueChange, _d = props.enableDropdown, enableDropdown = _d === void 0 ? true : _d, options = props.options, _e = props.minDate, minDate = _e === void 0 ? null : _e, _f = props.maxDate, maxDate = _f === void 0 ? null : _f, _g = props.placeholder, placeholder = _g === void 0 ? 'Select' : _g, _h = props.dropdownPlaceholder, dropdownPlaceholder = _h === void 0 ? 'Select' : _h, _j = props.disabled, disabled = _j === void 0 ? false : _j, _k = props.color, color = _k === void 0 ? 'blue' : _k, _l = props.enableYearPagination, enableYearPagination = _l === void 0 ? false : _l, _m = props.locale, locale = _m === void 0 ? enUS : _m, className = props.className, other = __rest(props, ["value", "defaultValue", "onValueChange", "enableDropdown", "options", "minDate", "maxDate", "placeholder", "dropdownPlaceholder", "disabled", "color", "enableYearPagination", "locale", "className"]);
+    var TODAY = startOfToday();
+    var calendarRef = useRef(null);
+    var dropdownRef = useRef(null);
+    var _o = useInternalState(defaultValue, value), selectedValue = _o[0], setSelectedValue = _o[1];
+    var _p = useState(null), startOfCurrMonth = _p[0], setStartOfCurrMonth = _p[1];
+    var _q = useState(false), showCalendar = _q[0], setShowCalendar = _q[1];
+    var _r = useState(false), showDropdown = _r[0], setShowDropdown = _r[1];
+    var dropdownOptions = options !== null && options !== void 0 ? options : defaultOptions;
+    var selectedDropdownValue = selectedValue
+        ? (_a = selectedValue[2]) !== null && _a !== void 0 ? _a : null
+        : null;
+    var selectedStartDate = selectedValue
+        ? parseStartDate(selectedValue[0], minDate, selectedDropdownValue, dropdownOptions)
+        : null;
+    var selectedEndDate = selectedValue
+        ? parseEndDate(selectedValue[1], maxDate, selectedDropdownValue, dropdownOptions)
+        : null;
+    var anchorDate = (_c = (_b = startOfCurrMonth !== null && startOfCurrMonth !== void 0 ? startOfCurrMonth : selectedEndDate) !== null && _b !== void 0 ? _b : selectedStartDate) !== null && _c !== void 0 ? _c : TODAY;
+    var handleDateClick = function (date) {
+        if (!selectedStartDate) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([date, selectedEndDate, null]);
+            setSelectedValue([date, selectedEndDate, null]);
+        }
+        else if (selectedStartDate && !selectedEndDate) {
+            if (date < selectedStartDate) {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([date, selectedEndDate, null]);
+                setSelectedValue([date, selectedEndDate, null]);
+                // Selection complete
+            }
+            else {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([selectedStartDate, date, null]);
+                setSelectedValue([selectedStartDate, date, null]);
+                setShowCalendar(false);
+            }
+        }
+        else if (selectedStartDate && selectedEndDate) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([date, null, null]);
+            setSelectedValue([date, null, null]);
+        }
+    };
+    var handleCalendarKeyDown = function (e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            setShowCalendar(false);
+        }
+    };
+    var handleDropdownOptionClick = function (dropdownValue) {
+        var selectedStartDate = getStartDateByDropdownValue(dropdownValue, dropdownOptions);
+        var selectedEndDate = getEndDateByDropdownValue(dropdownValue, dropdownOptions);
+        setSelectedValue([selectedStartDate, selectedEndDate, dropdownValue]);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([selectedStartDate, selectedEndDate, dropdownValue]);
+        setStartOfCurrMonth(startOfMonth(selectedEndDate));
+        setShowDropdown(false);
+    };
+    var _s = useSelectOnKeyDown(handleDropdownOptionClick, dropdownOptions.map(function (option) { return option.value; }), showDropdown, setShowDropdown, selectedDropdownValue), hoveredDropdownValue = _s[0], handleDropdownKeyDown = _s[1];
+    return (_jsx(BaseColorContext.Provider, __assign({ value: color }, { children: _jsxs("div", __assign({ ref: ref, className: twMerge(makeDateRangePickerClassName('root'), 'relative w-full', className) }, other, { children: [_jsx(DateRangePickerButton, { value: [selectedStartDate, selectedEndDate, selectedDropdownValue], options: dropdownOptions, placeholder: placeholder, disabled: disabled, calendarRef: calendarRef, showCalendar: showCalendar, setShowCalendar: setShowCalendar, onCalendarKeyDown: handleCalendarKeyDown, enableDropdown: enableDropdown, dropdownRef: dropdownRef, showDropdown: showDropdown, setShowDropdown: setShowDropdown, onDropdownKeyDown: handleDropdownKeyDown, locale: locale, dropdownPlaceholder: dropdownPlaceholder }), _jsx(Modal, __assign({ className: makeDateRangePickerClassName('calendarModal'), showModal: showCalendar, setShowModal: setShowCalendar, parentRef: calendarRef, width: 288, maxHeight: "max-h-fit" }, { children: _jsx(Calendar, { enableYearPagination: enableYearPagination, anchorDate: anchorDate, 
+                        // setAnchorDate={setAnchorDate}
+                        startDate: selectedStartDate, endDate: selectedEndDate, minDate: minDate, maxDate: maxDate, onDateClick: handleDateClick, locale: locale, setStartOfCurrMonth: setStartOfCurrMonth }) })), _jsx(Modal, __assign({ className: makeDateRangePickerClassName('dropdownModal'), showModal: showDropdown, setShowModal: setShowDropdown, parentRef: dropdownRef }, { children: _jsx(SelectedValueContext.Provider, __assign({ value: {
+                            selectedValue: selectedDropdownValue,
+                            handleValueChange: handleDropdownOptionClick,
+                        } }, { children: _jsx(HoveredValueContext.Provider, __assign({ value: { hoveredValue: hoveredDropdownValue } }, { children: dropdownOptions.map(function (_a) {
+                                var value = _a.value, text = _a.text;
+                                return (_jsx(DropdownItem, { value: value, text: text }, value));
+                            }) })) })) }))] })) })));
+});
+export default DateRangePicker;
+//# sourceMappingURL=DateRangePicker.js.map

package/lib/DateRangePicker/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../src/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"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"}

package/lib/DateRangePicker/DateRangePickerButton.d.ts

@@ -0,0 +1,21 @@
+import React, { Dispatch, Ref, SetStateAction } from 'react';
+import { DateRangePickerOption, DateRangePickerValue } from './DateRangePicker';
+interface DateRangePickerButtonProps {
+    value: DateRangePickerValue;
+    options: DateRangePickerOption[];
+    placeholder: string;
+    disabled: boolean;
+    calendarRef: Ref<HTMLButtonElement>;
+    showCalendar: boolean;
+    setShowCalendar: Dispatch<SetStateAction<boolean>>;
+    onCalendarKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    enableDropdown: boolean;
+    dropdownRef: Ref<HTMLButtonElement>;
+    showDropdown: boolean;
+    setShowDropdown: Dispatch<SetStateAction<boolean>>;
+    onDropdownKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    locale?: Locale;
+    dropdownPlaceholder?: string;
+}
+declare const DateRangePickerButton: ({ value, options, placeholder, disabled, calendarRef, showCalendar, setShowCalendar, onCalendarKeyDown, enableDropdown, dropdownRef, showDropdown, setShowDropdown, onDropdownKeyDown, locale, dropdownPlaceholder, }: DateRangePickerButtonProps) => JSX.Element;
+export default DateRangePickerButton;

package/lib/DateRangePicker/DateRangePickerButton.js

@@ -0,0 +1,39 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { ArrowDownHeadIcon, CalendarIcon } from '../assets';
+import { BaseColors, border, borderRadius, boxShadow, fontSize, fontWeight, getColorClassNames, sizing, spacing, } from '../lib';
+import { DEFAULT_COLOR, colorPalette } from '../lib/theme';
+import { formatSelectedDates, makeDateRangePickerClassName, } from './dateRangePickerUtils';
+import { getSelectButtonColors, hasValue } from '../components/selectUtils';
+var DateRangePickerButton = function (_a) {
+    var _b;
+    var value = _a.value, options = _a.options, placeholder = _a.placeholder, disabled = _a.disabled, calendarRef = _a.calendarRef, showCalendar = _a.showCalendar, setShowCalendar = _a.setShowCalendar, onCalendarKeyDown = _a.onCalendarKeyDown, enableDropdown = _a.enableDropdown, dropdownRef = _a.dropdownRef, showDropdown = _a.showDropdown, setShowDropdown = _a.setShowDropdown, onDropdownKeyDown = _a.onDropdownKeyDown, locale = _a.locale, _c = _a.dropdownPlaceholder, dropdownPlaceholder = _c === void 0 ? 'Select' : _c;
+    var startDate = value[0], endDate = value[1], dropdownValue = value[2];
+    var hasDateSelection = (startDate || endDate) !== null && (startDate || endDate) !== undefined;
+    var hasDropdownSelection = hasValue(dropdownValue);
+    var calendarText = hasDateSelection
+        ? formatSelectedDates(startDate, endDate, locale)
+        : placeholder;
+    var dropdownText = dropdownValue
+        ? String((_b = options.find(function (option) { return option.value === dropdownValue; })) === null || _b === void 0 ? void 0 : _b.text)
+        : dropdownPlaceholder;
+    return (_jsxs("div", __assign({ className: twMerge(makeDateRangePickerClassName('button'), 'flex items-center justify-between', getColorClassNames('white').bgColor, borderRadius.md.all, boxShadow.sm) }, { children: [_jsxs("button", __assign({ type: "button", ref: calendarRef, onClick: function () { return setShowCalendar(!showCalendar); }, onKeyDown: onCalendarKeyDown, className: twMerge(makeDateRangePickerClassName('calendarButton'), 'flex items-center w-full truncate focus:outline-none focus:ring-2', getSelectButtonColors(hasDateSelection, disabled), enableDropdown
+                    ? border.none.right
+                    : twMerge(borderRadius.md.right, border.sm.right), getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
+                    .focusRingColor, spacing.twoXl.paddingX, spacing.sm.paddingY, borderRadius.md.left, border.sm.all), disabled: disabled }, { children: [_jsx(CalendarIcon, { className: twMerge(makeDateRangePickerClassName('calendarButtonIcon'), 'flex-none', getColorClassNames(DEFAULT_COLOR, colorPalette.lightText).textColor, sizing.lg.height, sizing.lg.width, spacing.threeXs.negativeMarginLeft, spacing.lg.marginRight), "aria-hidden": "true" }), _jsx("p", __assign({ className: twMerge(makeDateRangePickerClassName('calendarButtonText'), 'whitespace-nowrap truncate', fontSize.sm, fontWeight.md) }, { children: calendarText }))] })), enableDropdown ? (_jsxs("button", __assign({ type: "button", ref: dropdownRef, onClick: function () { return setShowDropdown(!showDropdown); }, className: twMerge(makeDateRangePickerClassName('dropdownButton'), 'inline-flex justify-between w-48 truncate focus:outline-none focus:ring-2', getSelectButtonColors(hasDropdownSelection, disabled), getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
+                    .focusRingColor, spacing.twoXl.paddingX, spacing.sm.paddingY, spacing.px.negativeMarginLeft, borderRadius.md.right, border.sm.all), onKeyDown: onDropdownKeyDown, disabled: disabled }, { children: [_jsx("p", __assign({ className: twMerge(makeDateRangePickerClassName('dropdownButtonText'), 'whitespace-nowrap truncate', fontSize.sm, fontWeight.md) }, { children: dropdownText })), _jsx(ArrowDownHeadIcon, { className: twMerge(makeDateRangePickerClassName('dropdownButtonIcon'), 'flex-none', sizing.lg.height, sizing.lg.width, spacing.twoXs.negativeMarginRight, getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
+                            .textColor), "aria-hidden": "true" })] }))) : null] })));
+};
+export default DateRangePickerButton;
+//# sourceMappingURL=DateRangePickerButton.js.map

package/lib/DateRangePicker/DateRangePickerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePickerButton.js","sourceRoot":"","sources":["../../src/DateRangePicker/DateRangePickerButton.tsx"],"names":[],"mappings":"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"}

package/lib/DateRangePicker/dateRangePickerUtils.d.ts

@@ -0,0 +1,13 @@
+import { Color } from '../lib/inputTypes';
+import { DateRangePickerOption } from './DateRangePicker';
+export declare const makeDateRangePickerClassName: (className: string) => string;
+export declare const getWeekdays: (locale: Locale) => string[];
+export declare const capitalize: (s: string, locale: Locale) => string;
+export declare const getStartDateByDropdownValue: (dropdownValue: string | null | undefined, dropdownOptions: DateRangePickerOption[]) => Date | null;
+export declare const getEndDateByDropdownValue: (dropdownValue: string | null | undefined, dropdownOptions: DateRangePickerOption[]) => Date;
+export declare const parseStartDate: (startDate: Date | null | undefined, minDate: Date | null | undefined, selectedDropdownValue: string | null | undefined, dropdownOptions: DateRangePickerOption[]) => Date | null;
+export declare const parseEndDate: (endDate: Date | null | undefined, maxDate: Date | null | undefined, selectedDropdownValue: string | null | undefined, dropdownOptions: DateRangePickerOption[]) => Date | null;
+export declare const defaultOptions: DateRangePickerOption[];
+export declare const getDateStyles: (date: Date, finalStartDate: Date | null, finalEndDate: Date | null, hoveredDate: Date | undefined, isDateDisabled: boolean, color: Color) => string;
+export declare const displaySelected: (selectedStartDay: Date | null, selectedEndDay: Date | null) => string | undefined;
+export declare const formatSelectedDates: (startDate: Date | null, endDate: Date | null, locale?: Locale) => string;