draft-components 0.53.0 → 0.54.0

package/components/date-picker/calendar-day.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface CalendarDayProps {
+    className?: string;
+    isCurrent?: boolean;
+    isFocused?: boolean;
+    isSelected?: boolean;
+    isInRange?: boolean;
+    isRangeStart?: boolean;
+    isRangeEnd?: boolean;
+    isInRangePreview?: boolean;
+    isRangePreviewStart?: boolean;
+    isRangePreviewEnd?: boolean;
+    day: Date;
+    onPick(day: Date): void;
+    onHover?(day: Date): void;
+}
+export declare function CalendarDay({ className, isCurrent, isFocused, isSelected, isInRange, isRangeStart, isRangeEnd, isInRangePreview, isRangePreviewStart, isRangePreviewEnd, day, onPick, onHover, }: CalendarDayProps): JSX.Element;

package/components/date-picker/calendar-day.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarDay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_helpers_1 = require("../../lib/react-helpers");
+const react_1 = require("react");
+const guards_1 = require("../../lib/guards");
+function CalendarDay({ className, isCurrent, isFocused, isSelected, isInRange, isRangeStart, isRangeEnd, isInRangePreview, isRangePreviewStart, isRangePreviewEnd, day, onPick, onHover, }) {
+    const buttonRef = react_1.useRef(null);
+    react_1.useEffect(() => {
+        const buttonEl = buttonRef.current;
+        if (isFocused && buttonEl) {
+            buttonEl.focus();
+        }
+    }, [isFocused]);
+    return (jsx_runtime_1.jsx("div", Object.assign({ className: react_helpers_1.classNames(className, 'dc-calendar-day', isCurrent && 'dc-calendar-day_current', isFocused && 'dc-calendar-day_focused', isSelected && 'dc-calendar-day_selected', isInRange && 'dc-calendar-day_in-range', isRangeStart && 'dc-calendar-day_range-start', isRangeEnd && 'dc-calendar-day_range-end', isInRangePreview && 'dc-calendar-day_in-range-preview', isRangePreviewStart && 'dc-calendar-day_range-preview-start', isRangePreviewEnd && 'dc-calendar-day_range-preview-end'), role: "gridcell" }, { children: jsx_runtime_1.jsx("button", Object.assign({ ref: buttonRef, className: "dc-calendar-day__btn", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, onClick: () => onPick(day), onMouseEnter: () => guards_1.isFunction(onHover) && onHover(day) }, { children: day.getDate() }), void 0) }), void 0));
+}
+exports.CalendarDay = CalendarDay;
+//# sourceMappingURL=calendar-day.js.map

package/components/date-picker/calendar-day.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-day.js","sourceRoot":"","sources":["../../src/components/date-picker/calendar-day.tsx"],"names":[],"mappings":";;;;AAAA,2DAAqD;AACrD,iCAA0C;AAC1C,6CAA8C;AAoB9C,SAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,GAAG,EACH,MAAM,EACN,OAAO,GACU;IACjB,MAAM,SAAS,GAAG,cAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,iBAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC;QACnC,IAAI,SAAS,IAAI,QAAQ,EAAE;YACzB,QAAQ,CAAC,KAAK,EAAE,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,yCACE,SAAS,EAAE,0BAAU,CACnB,SAAS,EACT,iBAAiB,EACjB,SAAS,IAAI,yBAAyB,EACtC,SAAS,IAAI,yBAAyB,EACtC,UAAU,IAAI,0BAA0B,EACxC,SAAS,IAAI,0BAA0B,EACvC,YAAY,IAAI,6BAA6B,EAC7C,UAAU,IAAI,2BAA2B,EACzC,gBAAgB,IAAI,kCAAkC,EACtD,mBAAmB,IAAI,qCAAqC,EAC5D,iBAAiB,IAAI,mCAAmC,CACzD,EACD,IAAI,EAAC,UAAU,gBAGf,4CACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAC,sBAAsB,EAChC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBACb,UAAU,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,EAC1B,YAAY,EAAE,GAAG,EAAE,CAAC,mBAAU,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,gBAEtD,GAAG,CAAC,OAAO,EAAE,YACP,YACL,CACP,CAAC;AACJ,CAAC;AAtDD,kCAsDC"}

package/components/date-picker/calendar-header.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface CalendarHeaderProps {
+    id: string;
+    className?: string;
+    locale?: string;
+    nextYearButtonLabel?: string;
+    nextMonthButtonLabel?: string;
+    prevYearButtonLabel?: string;
+    prevMonthButtonLabel?: string;
+    focusDate: Date;
+    onChangeFocusDate(focusDate: Date): void;
+}
+export declare function CalendarHeader({ id, className, locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, focusDate, onChangeFocusDate, }: CalendarHeaderProps): JSX.Element;

package/components/date-picker/calendar-header.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_helpers_1 = require("../../lib/react-helpers");
+const button_1 = require("../button");
+const date_helpers_1 = require("../../lib/date-helpers");
+function CalendarHeader({ id, className, locale, nextYearButtonLabel = 'Next year', nextMonthButtonLabel = 'Next month', prevYearButtonLabel = 'Previous year', prevMonthButtonLabel = 'Previous month', focusDate, onChangeFocusDate, }) {
+    const intl = new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        month: 'long',
+    });
+    return (jsx_runtime_1.jsxs("div", Object.assign({ className: react_helpers_1.classNames(className, 'dc-calendar-header') }, { children: [jsx_runtime_1.jsx(ArrowButton, { ariaLabel: prevYearButtonLabel, iconPath: "M11 19l-7-7 7-7m8 14l-7-7 7-7", onClick: () => onChangeFocusDate(date_helpers_1.addYears(focusDate, -1)) }, void 0), jsx_runtime_1.jsx(ArrowButton, { ariaLabel: prevMonthButtonLabel, iconPath: "M15 19l-7-7 7-7", onClick: () => onChangeFocusDate(date_helpers_1.addMonths(focusDate, -1)) }, void 0), jsx_runtime_1.jsx("span", Object.assign({ id: id, className: "dc-calendar-header__title" }, { children: intl.format(focusDate) }), void 0), jsx_runtime_1.jsx(ArrowButton, { ariaLabel: nextMonthButtonLabel, iconPath: "M9 5l7 7-7 7", onClick: () => onChangeFocusDate(date_helpers_1.addMonths(focusDate, 1)) }, void 0), jsx_runtime_1.jsx(ArrowButton, { ariaLabel: nextYearButtonLabel, iconPath: "M13 5l7 7-7 7M5 5l7 7-7 7", onClick: () => onChangeFocusDate(date_helpers_1.addYears(focusDate, 1)) }, void 0)] }), void 0));
+}
+exports.CalendarHeader = CalendarHeader;
+function ArrowButton(props) {
+    return (jsx_runtime_1.jsx(button_1.Button, Object.assign({ className: "dc-calendar-header__btn", size: "xs", noPadding: true, appearance: "minimal", "aria-label": props.ariaLabel, onClick: props.onClick }, { children: jsx_runtime_1.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", viewBox: "0 0 24 24", fill: "none", width: 16, height: 16, role: "img", "aria-hidden": true, focusable: false }, { children: jsx_runtime_1.jsx("path", { d: props.iconPath, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0) }), void 0));
+}
+//# sourceMappingURL=calendar-header.js.map

package/components/date-picker/calendar-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-header.js","sourceRoot":"","sources":["../../src/components/date-picker/calendar-header.tsx"],"names":[],"mappings":";;;;AAAA,2DAAqD;AACrD,sCAAgD;AAChD,yDAA6D;AAe7D,SAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,SAAS,EACT,MAAM,EACN,mBAAmB,GAAG,WAAW,EACjC,oBAAoB,GAAG,YAAY,EACnC,mBAAmB,GAAG,eAAe,EACrC,oBAAoB,GAAG,gBAAgB,EACvC,SAAS,EACT,iBAAiB,GACG;IACpB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;QAC3C,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,MAAM;KACd,CAAC,CAAC;IAEH,OAAO,CACL,0CAAK,SAAS,EAAE,0BAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC,iBACzD,kBAAC,WAAW,IACV,SAAS,EAAE,mBAAmB,EAC9B,QAAQ,EAAC,+BAA+B,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,uBAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,WACzD,EACF,kBAAC,WAAW,IACV,SAAS,EAAE,oBAAoB,EAC/B,QAAQ,EAAC,iBAAiB,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,wBAAS,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,WAC1D,EAEF,0CAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,2BAA2B,gBAChD,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,YAClB,EAEP,kBAAC,WAAW,IACV,SAAS,EAAE,oBAAoB,EAC/B,QAAQ,EAAC,cAAc,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,wBAAS,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,WACzD,EACF,kBAAC,WAAW,IACV,SAAS,EAAE,mBAAmB,EAC9B,QAAQ,EAAC,2BAA2B,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,uBAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,WACxD,aACE,CACP,CAAC;AACJ,CAAC;AA7CD,wCA6CC;AAED,SAAS,WAAW,CAAC,KAIpB;IACC,OAAO,CACL,kBAAC,eAAM,kBACL,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,IAAI,EACf,UAAU,EAAC,SAAS,gBACR,KAAK,CAAC,SAAS,EAC3B,OAAO,EAAE,KAAK,CAAC,OAAO,gBAEtB,yCACE,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,cAAc,EACrB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,KAAK,iBACG,IAAI,EACjB,SAAS,EAAE,KAAK,gBAEhB,4BACE,CAAC,EAAE,KAAK,CAAC,QAAQ,EACjB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,WACtB,YACE,YACC,CACV,CAAC;AACJ,CAAC"}

package/components/date-picker/calendar-row.d.ts

@@ -0,0 +1,7 @@
+import { ReactNodeArray } from 'react';
+export interface CalendarWeekProps {
+    className?: string;
+    isHead?: boolean;
+    children: ReactNodeArray;
+}
+export declare function CalendarRow({ className, isHead, children, }: CalendarWeekProps): JSX.Element;

package/components/date-picker/calendar-row.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_helpers_1 = require("../../lib/react-helpers");
+function CalendarRow({ className, isHead, children, }) {
+    return (jsx_runtime_1.jsx("div", Object.assign({ className: react_helpers_1.classNames(className, 'dc-calendar-row', isHead && 'dc-calendar-row_head'), role: "row" }, { children: children }), void 0));
+}
+exports.CalendarRow = CalendarRow;
+//# sourceMappingURL=calendar-row.js.map

package/components/date-picker/calendar-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-row.js","sourceRoot":"","sources":["../../src/components/date-picker/calendar-row.tsx"],"names":[],"mappings":";;;;AACA,2DAAqD;AAQrD,SAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,MAAM,EACN,QAAQ,GACU;IAClB,OAAO,CACL,yCACE,SAAS,EAAE,0BAAU,CACnB,SAAS,EACT,iBAAiB,EACjB,MAAM,IAAI,sBAAsB,CACjC,EACD,IAAI,EAAC,KAAK,gBAET,QAAQ,YACL,CACP,CAAC;AACJ,CAAC;AAjBD,kCAiBC"}

package/components/date-picker/calendar.d.ts

@@ -0,0 +1,13 @@
+import { ReactNodeArray } from 'react';
+export interface CalendarProps {
+    className?: string;
+    locale?: string;
+    nextYearButtonLabel?: string;
+    nextMonthButtonLabel?: string;
+    prevYearButtonLabel?: string;
+    prevMonthButtonLabel?: string;
+    children: ReactNodeArray;
+    focusDate: Date;
+    onChangeFocusDate(focusDate: Date): void;
+}
+export declare function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, children, focusDate, onChangeFocusDate, }: CalendarProps): JSX.Element;

package/components/date-picker/calendar.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_helpers_1 = require("../../lib/react-helpers");
+const keyboard_helpers_1 = require("../../lib/keyboard-helpers");
+const util_1 = require("../../lib/util");
+const calendar_row_1 = require("./calendar-row");
+const calendar_header_1 = require("./calendar-header");
+const date_helpers_1 = require("../../lib/date-helpers");
+const daysOfWeek = [
+    new Date('2021-01-04'),
+    new Date('2021-01-05'),
+    new Date('2021-01-06'),
+    new Date('2021-01-07'),
+    new Date('2021-01-08'),
+    new Date('2021-01-09'),
+    new Date('2021-01-10'), // Sunday
+];
+function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, children, focusDate, onChangeFocusDate, }) {
+    const headerId = react_1.useMemo(() => util_1.uniqueId('dc-calendar-'), []);
+    const intl = react_1.useMemo(() => new Intl.DateTimeFormat(locale, {
+        weekday: 'short',
+    }), [locale]);
+    return (jsx_runtime_1.jsxs("div", Object.assign({ className: react_helpers_1.classNames(className, 'dc-calendar'), role: "grid", "aria-labelledby": headerId }, { children: [jsx_runtime_1.jsx(calendar_header_1.CalendarHeader, { id: headerId, locale: locale, nextYearButtonLabel: nextYearButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, prevYearButtonLabel: prevYearButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel, focusDate: focusDate, onChangeFocusDate: onChangeFocusDate }, void 0), jsx_runtime_1.jsx("div", Object.assign({ role: "rowgroup" }, { children: jsx_runtime_1.jsx(calendar_row_1.CalendarRow, Object.assign({ isHead: true }, { children: daysOfWeek.map((weekday, index) => (jsx_runtime_1.jsx("div", Object.assign({ role: "columnheader", className: "dc-calendar__cell-header" }, { children: intl.format(weekday) }), `weekday-${index}`))) }), void 0) }), void 0), jsx_runtime_1.jsx("div", Object.assign({ role: "rowgroup", className: "dc-calendar__row-group", onKeyDown: event => {
+                    let newFocusDate;
+                    if (event.key === keyboard_helpers_1.KeyCode.arrowRight) {
+                        newFocusDate = date_helpers_1.addDays(focusDate, 1);
+                    }
+                    else if (event.key === keyboard_helpers_1.KeyCode.arrowLeft) {
+                        newFocusDate = date_helpers_1.addDays(focusDate, -1);
+                    }
+                    else if (event.key === keyboard_helpers_1.KeyCode.arrowDown) {
+                        newFocusDate = date_helpers_1.addDays(focusDate, date_helpers_1.DAYS_IN_WEEK);
+                    }
+                    else if (event.key === keyboard_helpers_1.KeyCode.arrowUp) {
+                        newFocusDate = date_helpers_1.addDays(focusDate, -date_helpers_1.DAYS_IN_WEEK);
+                    }
+                    else if (event.key === keyboard_helpers_1.KeyCode.home) {
+                        newFocusDate = date_helpers_1.getStartOfWeek(focusDate);
+                    }
+                    else if (event.key === keyboard_helpers_1.KeyCode.end) {
+                        newFocusDate = date_helpers_1.getEndOfWeek(focusDate);
+                    }
+                    else if (event.key === keyboard_helpers_1.KeyCode.pageUp) {
+                        newFocusDate = event.shiftKey
+                            ? date_helpers_1.addYears(focusDate, -1)
+                            : date_helpers_1.addMonths(focusDate, -1);
+                    }
+                    else if (event.key === keyboard_helpers_1.KeyCode.pageDown) {
+                        newFocusDate = event.shiftKey
+                            ? date_helpers_1.addYears(focusDate, 1)
+                            : date_helpers_1.addMonths(focusDate, 1);
+                    }
+                    if (newFocusDate) {
+                        event.preventDefault();
+                        onChangeFocusDate(newFocusDate);
+                    }
+                } }, { children: children }), void 0)] }), void 0));
+}
+exports.Calendar = Calendar;
+//# sourceMappingURL=calendar.js.map

package/components/date-picker/calendar.js.map

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

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface DatePickerProps {
+    locale?: string;
+    nextYearButtonLabel?: string;
+    nextMonthButtonLabel?: string;
+    prevYearButtonLabel?: string;
+    prevMonthButtonLabel?: string;
+    date: string | null;
+    onChangeDate(isoDate: string): void;
+}
+export declare function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, date: selectedISODate, onChangeDate, }: DatePickerProps): JSX.Element;

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const date_helpers_1 = require("../../lib/date-helpers");
+const calendar_1 = require("./calendar");
+const calendar_row_1 = require("./calendar-row");
+const calendar_day_1 = require("./calendar-day");
+function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, date: selectedISODate, onChangeDate, }) {
+    const selectedDate = selectedISODate ? date_helpers_1.toDate(selectedISODate) : null;
+    const currentDate = new Date();
+    const [focusDate, setFocusDate] = react_1.useState(selectedDate
+        ? selectedDate
+        : date_helpers_1.getStartOfMonth(currentDate));
+    const firstDate = date_helpers_1.getStartOfMonth(focusDate);
+    const lastDate = date_helpers_1.getEndOfMonth(focusDate);
+    const firstWeekday = date_helpers_1.getDayOfWeek(firstDate);
+    const lastWeekday = date_helpers_1.getDayOfWeek(lastDate);
+    const daysInMonth = date_helpers_1.getDaysInMonth(focusDate);
+    const weeksCount = Math.ceil((firstWeekday + daysInMonth) / date_helpers_1.DAYS_IN_WEEK);
+    const handleDayPick = (day) => {
+        setFocusDate(day);
+        onChangeDate(date_helpers_1.formatISO(day));
+    };
+    let date = firstDate;
+    let renderedWeeks = [];
+    for (let w = 0; w < weeksCount; w += 1) {
+        const renderedDays = [];
+        let d;
+        if (w === 0) {
+            d = firstWeekday;
+        }
+        else if (w === weeksCount - 1) {
+            d = date_helpers_1.LAST_DAY_OF_WEEK - lastWeekday;
+        }
+        else {
+            d = 0;
+        }
+        for (; d < date_helpers_1.DAYS_IN_WEEK; d += 1) {
+            renderedDays.push(jsx_runtime_1.jsx(calendar_day_1.CalendarDay, { day: date, isCurrent: date_helpers_1.isSameDay(currentDate, date), isFocused: date_helpers_1.isSameDay(focusDate, date), isSelected: selectedDate ? date_helpers_1.isSameDay(selectedDate, date) : false, onPick: handleDayPick }, `day-${date_helpers_1.formatISO(date)}`));
+            date = date_helpers_1.addDays(date, 1);
+        }
+        renderedWeeks.push(jsx_runtime_1.jsx(calendar_row_1.CalendarRow, { children: renderedDays }, `week-${w}`));
+    }
+    return (jsx_runtime_1.jsx("div", Object.assign({ className: "dc-date-picker" }, { children: jsx_runtime_1.jsx(calendar_1.Calendar, Object.assign({ locale: locale, nextYearButtonLabel: nextYearButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, prevYearButtonLabel: prevYearButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel, focusDate: focusDate, onChangeFocusDate: setFocusDate }, { children: renderedWeeks }), void 0) }), void 0));
+}
+exports.DatePicker = DatePicker;
+//# sourceMappingURL=date-picker.js.map

package/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":";;;;AAAA,iCAAiD;AACjD,yDAWgC;AAChC,yCAAsC;AACtC,iDAA6C;AAC7C,iDAA6C;AAa7C,SAAgB,UAAU,CAAC,EACzB,MAAM,EACN,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,IAAI,EAAE,eAAe,EACrB,YAAY,GACI;IAChB,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAC,qBAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEtE,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,gBAAQ,CAAC,YAAY;QACrD,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,8BAAe,CAAC,WAAW,CAAC,CAC/B,CAAC;IACF,MAAM,SAAS,GAAG,8BAAe,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,4BAAa,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,YAAY,GAAG,2BAAY,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,WAAW,GAAG,2BAAY,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,WAAW,GAAG,6BAAc,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,YAAY,GAAG,WAAW,CAAC,GAAG,2BAAY,CAAC,CAAC;IAE1E,MAAM,aAAa,GAAG,CAAC,GAAS,EAAE,EAAE;QAClC,YAAY,CAAC,GAAG,CAAC,CAAC;QAClB,YAAY,CAAC,wBAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,IAAI,IAAI,GAAG,SAAS,CAAC;IACrB,IAAI,aAAa,GAAmB,EAAE,CAAC;IACvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE;QACtC,MAAM,YAAY,GAAmB,EAAE,CAAC;QAExC,IAAI,CAAC,CAAC;QACN,IAAI,CAAC,KAAK,CAAC,EAAE;YACX,CAAC,GAAG,YAAY,CAAC;SAClB;aAAM,IAAI,CAAC,KAAK,UAAU,GAAG,CAAC,EAAE;YAC/B,CAAC,GAAG,+BAAgB,GAAG,WAAW,CAAC;SACpC;aAAM;YACL,CAAC,GAAG,CAAC,CAAC;SACP;QAED,OAAO,CAAC,GAAG,2BAAY,EAAE,CAAC,IAAI,CAAC,EAAE;YAC/B,YAAY,CAAC,IAAI,CACf,kBAAC,0BAAW,IAEV,GAAG,EAAE,IAAI,EACT,SAAS,EAAE,wBAAS,CAAC,WAAW,EAAE,IAAI,CAAC,EACvC,SAAS,EAAE,wBAAS,CAAC,SAAS,EAAE,IAAI,CAAC,EACrC,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,wBAAS,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,EAChE,MAAM,EAAE,aAAa,IALhB,OAAO,wBAAS,CAAC,IAAI,CAAC,EAAE,CAM7B,CACH,CAAC;YAEF,IAAI,GAAG,sBAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SACzB;QAED,aAAa,CAAC,IAAI,CAChB,kBAAC,0BAAW,cAAoB,YAAY,IAA1B,QAAQ,CAAC,EAAE,CAA8B,CAC5D,CAAC;KACH;IAED,OAAO,CACL,yCAAK,SAAS,EAAC,gBAAgB,gBAC7B,kBAAC,mBAAQ,kBACP,MAAM,EAAE,MAAM,EACd,mBAAmB,EAAE,mBAAmB,EACxC,oBAAoB,EAAE,oBAAoB,EAC1C,mBAAmB,EAAE,mBAAmB,EACxC,oBAAoB,EAAE,oBAAoB,EAC1C,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,YAAY,gBAE9B,aAAa,YACL,YACP,CACP,CAAC;AACJ,CAAC;AA7ED,gCA6EC"}

package/components/date-picker/date-range-picker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ISODateRange } from '../../lib/date-helpers';
+export interface DateRangePickerProps {
+    locale?: string;
+    nextYearButtonLabel?: string;
+    nextMonthButtonLabel?: string;
+    prevYearButtonLabel?: string;
+    prevMonthButtonLabel?: string;
+    range: ISODateRange | null;
+    onChangeRange(isoDateRange: ISODateRange): void;
+}
+export declare function DateRangePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, range, onChangeRange, }: DateRangePickerProps): JSX.Element;

package/components/date-picker/date-range-picker.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const date_helpers_1 = require("../../lib/date-helpers");
+const calendar_1 = require("./calendar");
+const calendar_row_1 = require("./calendar-row");
+const calendar_day_1 = require("./calendar-day");
+function DateRangePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, range, onChangeRange, }) {
+    const selectedRange = range ? {
+        startDate: date_helpers_1.toDate(range.startDate),
+        endDate: date_helpers_1.toDate(range.endDate),
+    } : null;
+    const [startDate, setStartDate] = react_1.useState(null);
+    const [endDate, setEndDate] = react_1.useState(null);
+    const newRange = startDate && endDate
+        ? date_helpers_1.createDateRange(startDate, endDate)
+        : null;
+    const currentDate = new Date();
+    const [focusDate, setFocusDate] = react_1.useState(selectedRange
+        ? selectedRange.startDate
+        : date_helpers_1.getStartOfMonth(currentDate));
+    const firstDate = date_helpers_1.getStartOfMonth(focusDate);
+    const lastDate = date_helpers_1.getEndOfMonth(focusDate);
+    const firstWeekday = date_helpers_1.getDayOfWeek(firstDate);
+    const lastWeekday = date_helpers_1.getDayOfWeek(lastDate);
+    const daysInMonth = date_helpers_1.getDaysInMonth(focusDate);
+    const weeksCount = Math.ceil((firstWeekday + daysInMonth) / date_helpers_1.DAYS_IN_WEEK);
+    const handleDayPick = (day) => {
+        setFocusDate(day);
+        if (startDate) {
+            onChangeRange(date_helpers_1.formatISORange(date_helpers_1.createDateRange(startDate, day)));
+            setStartDate(null);
+            setEndDate(null);
+        }
+        else {
+            setStartDate(day);
+        }
+    };
+    const handleDayHover = (day) => {
+        if (startDate) {
+            setEndDate(day);
+        }
+    };
+    let date = firstDate;
+    let renderedWeeks = [];
+    for (let w = 0; w < weeksCount; w += 1) {
+        const renderedDays = [];
+        let d;
+        if (w === 0) {
+            d = firstWeekday;
+        }
+        else if (w === weeksCount - 1) {
+            d = date_helpers_1.LAST_DAY_OF_WEEK - lastWeekday;
+        }
+        else {
+            d = 0;
+        }
+        for (; d < date_helpers_1.DAYS_IN_WEEK; d += 1) {
+            let isSelected = false;
+            if (startDate) {
+                isSelected = date_helpers_1.isSameDay(startDate, date);
+            }
+            else if (selectedRange) {
+                isSelected = (date_helpers_1.isSameDay(selectedRange.startDate, date) ||
+                    date_helpers_1.isSameDay(selectedRange.endDate, date));
+            }
+            let isInRange = false;
+            let isRangeStart = false;
+            let isRangeEnd = false;
+            let isInRangePreview = false;
+            let isRangePreviewStart = false;
+            let isRangePreviewEnd = false;
+            if (newRange) {
+                isInRangePreview = date_helpers_1.isRangeContain(newRange, date);
+                isRangePreviewStart = date_helpers_1.isSameDay(date, newRange.startDate);
+                isRangePreviewEnd = date_helpers_1.isSameDay(date, newRange.endDate);
+            }
+            else if (startDate) {
+                isInRangePreview = date_helpers_1.isSameDay(date, startDate);
+                isRangePreviewStart = isInRangePreview;
+                isRangePreviewEnd = isInRangePreview;
+            }
+            else if (selectedRange) {
+                isInRange = date_helpers_1.isRangeContain(selectedRange, date);
+                isRangeStart = date_helpers_1.isSameDay(date, selectedRange.startDate);
+                isRangeEnd = date_helpers_1.isSameDay(date, selectedRange.endDate);
+            }
+            renderedDays.push(jsx_runtime_1.jsx(calendar_day_1.CalendarDay, { day: date, isCurrent: date_helpers_1.isSameDay(currentDate, date), isFocused: date_helpers_1.isSameDay(focusDate, date), isSelected: isSelected, isInRange: isInRange, isRangeStart: isRangeStart, isRangeEnd: isRangeEnd, isInRangePreview: isInRangePreview, isRangePreviewStart: isRangePreviewStart, isRangePreviewEnd: isRangePreviewEnd, onPick: handleDayPick, onHover: handleDayHover }, `day-${date_helpers_1.formatISO(date)}`));
+            date = date_helpers_1.addDays(date, 1);
+        }
+        renderedWeeks.push(jsx_runtime_1.jsx(calendar_row_1.CalendarRow, { children: renderedDays }, `week-${w}`));
+    }
+    return (jsx_runtime_1.jsx("div", Object.assign({ className: "dc-date-range-picker" }, { children: jsx_runtime_1.jsx(calendar_1.Calendar, Object.assign({ locale: locale, nextYearButtonLabel: nextYearButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, prevYearButtonLabel: prevYearButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel, focusDate: focusDate, onChangeFocusDate: (focusDate) => {
+                setFocusDate(focusDate);
+                if (startDate) {
+                    setEndDate(focusDate);
+                }
+            } }, { children: renderedWeeks }), void 0) }), void 0));
+}
+exports.DateRangePicker = DateRangePicker;
+//# sourceMappingURL=date-range-picker.js.map

package/components/date-picker/date-range-picker.js.map

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

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

@@ -0,0 +1,2 @@
+export * from './date-picker';
+export * from './date-range-picker';

package/components/date-picker/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./date-picker"), exports);
+__exportStar(require("./date-range-picker"), exports);
+//# sourceMappingURL=index.js.map

package/components/date-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/date-picker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,gDAA8B;AAC9B,sDAAoC"}

package/components/date-range-picker-popover/date-preset-list.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ISODateRangeWithDatePreset } from '../../lib/date-helpers';
+export interface DatePresetOption {
+    label: ReactNode;
+    dateRange: ISODateRangeWithDatePreset;
+}
+export interface DatePresetsListProps {
+    className?: string;
+    options: DatePresetOption[];
+    selectedDateRange: ISODateRangeWithDatePreset | null;
+    onSelectedDateRange(option: DatePresetOption): void;
+}
+export declare function DatePresetList({ className, options, selectedDateRange, onSelectedDateRange, }: DatePresetsListProps): JSX.Element;
+export declare function DatePresetListItem(props: {
+    isSelected: boolean;
+    option: DatePresetOption;
+    onSelect(option: DatePresetOption): void;
+}): JSX.Element;

package/components/date-range-picker-popover/date-preset-list.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePresetListItem = exports.DatePresetList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_helpers_1 = require("../../lib/react-helpers");
+function DatePresetList({ className, options, selectedDateRange, onSelectedDateRange, }) {
+    return (jsx_runtime_1.jsx("ul", Object.assign({ className: react_helpers_1.classNames(className, 'dc-date-preset-list'), role: "menu" }, { children: options.map(option => {
+            const datePreset = option.dateRange.datePreset;
+            const isSelected = selectedDateRange
+                ? selectedDateRange.datePreset === datePreset
+                : false;
+            return (jsx_runtime_1.jsx(DatePresetListItem, { isSelected: isSelected, option: option, onSelect: onSelectedDateRange }, datePreset));
+        }) }), void 0));
+}
+exports.DatePresetList = DatePresetList;
+function DatePresetListItem(props) {
+    const { isSelected, option, onSelect } = props;
+    return (jsx_runtime_1.jsx("li", Object.assign({ className: "dc-date-preset-list-item", role: "menuitemradio", "aria-checked": isSelected }, { children: jsx_runtime_1.jsx("button", Object.assign({ className: react_helpers_1.classNames('dc-date-preset-list-item__btn', isSelected && 'dc-date-preset-list-item__btn_selected'), type: "button", onClick: () => onSelect(option) }, { children: option.label }), void 0) }), void 0));
+}
+exports.DatePresetListItem = DatePresetListItem;
+//# sourceMappingURL=date-preset-list.js.map

package/components/date-range-picker-popover/date-preset-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-preset-list.js","sourceRoot":"","sources":["../../src/components/date-range-picker-popover/date-preset-list.tsx"],"names":[],"mappings":";;;;AAEA,2DAAqD;AAcrD,SAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,mBAAmB,GACE;IACrB,OAAO,CACL,wCAAI,SAAS,EAAE,0BAAU,CAAC,SAAS,EAAE,qBAAqB,CAAC,EAAE,IAAI,EAAC,MAAM,gBACrE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACpB,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC;YAC/C,MAAM,UAAU,GAAG,iBAAiB;gBAClC,CAAC,CAAC,iBAAiB,CAAC,UAAU,KAAK,UAAU;gBAC7C,CAAC,CAAC,KAAK,CAAC;YACV,OAAO,CACL,kBAAC,kBAAkB,IAEjB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,mBAAmB,IAHxB,UAAU,CAIf,CACH,CAAC;QACJ,CAAC,CAAC,YACC,CACN,CAAC;AACJ,CAAC;AAxBD,wCAwBC;AAED,SAAgB,kBAAkB,CAAC,KAIlC;IACC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC/C,OAAO,CACL,wCACE,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,eAAe,kBACN,UAAU,gBAExB,4CACE,SAAS,EAAE,0BAAU,CACnB,+BAA+B,EAC/B,UAAU,IAAI,wCAAwC,CACvD,EACD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAE9B,MAAM,CAAC,KAAK,YACN,YACN,CACN,CAAC;AACJ,CAAC;AAxBD,gDAwBC"}

package/components/date-range-picker-popover/date-range-picker-popover.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { ISODateRangeWithDatePreset } from '../../lib/date-helpers';
+import { DatePresetOption } from './date-preset-list';
+export interface DateRangePickerPopoverProps {
+    locale?: string;
+    cancelButtonLabel?: ReactNode;
+    applyButtonLabel?: ReactNode;
+    defaultIsOpen?: boolean;
+    options?: DatePresetOption[];
+    dateRange: ISODateRangeWithDatePreset | null;
+    onChangeDateRange(dateRange: ISODateRangeWithDatePreset): void;
+    children(props: {
+        isOpen: boolean;
+        formattedDateRange: string;
+        openPopover(): void;
+        closePopover(): void;
+        togglePopoverVisibility(): void;
+    }): JSX.Element;
+}
+export declare function DateRangePickerPopover({ locale, cancelButtonLabel, applyButtonLabel, defaultIsOpen, options, children: renderChildren, dateRange: defaultDateRange, onChangeDateRange, }: DateRangePickerPopoverProps): JSX.Element;

package/components/date-range-picker-popover/date-range-picker-popover.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePickerPopover = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const popover_1 = require("../popover");
+const button_1 = require("../button");
+const date_picker_1 = require("../date-picker");
+const date_preset_list_1 = require("./date-preset-list");
+function DateRangePickerPopover({ locale, cancelButtonLabel = 'Cancel', applyButtonLabel = 'Apply', defaultIsOpen = false, options, children: renderChildren, dateRange: defaultDateRange, onChangeDateRange, }) {
+    const [isOpen, setIsOpen] = react_1.useState(defaultIsOpen);
+    const [dateRange, setDateRange] = react_1.useState(defaultDateRange);
+    const selectedOption = react_1.useMemo(() => {
+        return (dateRange &&
+            options &&
+            options.find(option => option.dateRange.datePreset === dateRange.datePreset)) || null;
+    }, [dateRange, options]);
+    let formattedDateRange = '';
+    if (dateRange) {
+        const intl = new Intl.DateTimeFormat(locale, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+        const startDate = intl.format(Date.parse(dateRange.startDate));
+        const endDate = intl.format(Date.parse(dateRange.endDate));
+        formattedDateRange = startDate !== endDate
+            ? `${startDate} - ${endDate}`
+            : startDate;
+        if (selectedOption) {
+            formattedDateRange = `${selectedOption.label}: ${formattedDateRange}`;
+        }
+    }
+    function openPopover() {
+        setIsOpen(true);
+    }
+    function closePopover() {
+        setDateRange(defaultDateRange);
+        setIsOpen(false);
+    }
+    function togglePopoverVisibility() {
+        if (isOpen) {
+            closePopover();
+        }
+        else {
+            openPopover();
+        }
+    }
+    function handleSelectOption(option) {
+        setDateRange(option.dateRange);
+    }
+    function handleApplyButtonClick() {
+        if (dateRange) {
+            onChangeDateRange(dateRange);
+        }
+        setIsOpen(false);
+    }
+    function handleChangeRange(newDateRange) {
+        if (options) {
+            const selectedOption = options.find(option => (option.dateRange.startDate === newDateRange.startDate &&
+                option.dateRange.endDate === newDateRange.endDate));
+            if (selectedOption) {
+                newDateRange = selectedOption.dateRange;
+            }
+        }
+        setDateRange(newDateRange);
+    }
+    const content = (jsx_runtime_1.jsxs("div", Object.assign({ className: "dc-date-range-picker-popover__content" }, { children: [jsx_runtime_1.jsxs("div", Object.assign({ className: "dc-date-range-picker-popover__content-body" }, { children: [Array.isArray(options) && options.length > 0 && (jsx_runtime_1.jsx(date_preset_list_1.DatePresetList, { options: options, selectedDateRange: dateRange, onSelectedDateRange: handleSelectOption }, void 0)), jsx_runtime_1.jsx(date_picker_1.DateRangePicker, { locale: locale, range: dateRange, onChangeRange: handleChangeRange }, void 0)] }), void 0), jsx_runtime_1.jsxs("div", Object.assign({ className: "dc-date-range-picker-popover__content-footer" }, { children: [jsx_runtime_1.jsx(button_1.Button, Object.assign({ type: "button", appearance: "secondary", onClick: closePopover }, { children: cancelButtonLabel }), void 0), jsx_runtime_1.jsx(button_1.Button, Object.assign({ type: "button", appearance: "primary", onClick: handleApplyButtonClick }, { children: applyButtonLabel }), void 0)] }), void 0)] }), void 0));
+    return (jsx_runtime_1.jsx(popover_1.Popover, Object.assign({ className: "dc-date-range-picker-popover", isOpen: isOpen, content: content, onClose: closePopover }, { children: renderChildren({
+            isOpen,
+            formattedDateRange,
+            openPopover,
+            closePopover,
+            togglePopoverVisibility,
+        }) }), void 0));
+}
+exports.DateRangePickerPopover = DateRangePickerPopover;
+//# sourceMappingURL=date-range-picker-popover.js.map

package/components/date-range-picker-popover/date-range-picker-popover.js.map

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

package/components/date-range-picker-popover/index.d.ts

@@ -0,0 +1 @@
+export * from './date-range-picker-popover';

package/components/date-range-picker-popover/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./date-range-picker-popover"), exports);
+//# sourceMappingURL=index.js.map

package/components/date-range-picker-popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/date-range-picker-popover/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,8DAA4C"}