@tugkanpilka/calendar 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,667 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useRef, useEffect, Fragment, forwardRef, useCallback } from 'react';
+import classNames from 'classnames';
+import styles from './WeekdayHeader.module.scss';
+import styles$1 from './MonthList.module.scss';
+import styles$2 from './Calendar.module.scss';
+import styles$3 from './Day.module.scss';
+import styles$4 from './Week.module.scss';
+import styles$5 from './MonthHeader.module.scss';
+import { format, isToday, isSameDay } from 'date-fns';
+import { isWeekNumberDecoration } from 'date-range-utils';
+
+/**
+ * Default weekday names
+ */
+const WEEKDAY_NAMES = ['M', 'T', 'W', 'T', 'F', 'S', 'S', '#'];
+/**
+ * WeekdayHeader component for calendar weekday names
+ * Supports render props for customizing weekday name display
+ */
+function WeekdayHeader(props) {
+    const { weekdayNames = WEEKDAY_NAMES, renderWeekdayName, className, ...rest } = props;
+    // Default render function
+    const defaultRenderWeekdayName = (name, index) => (jsx("div", { className: styles.weekdayHeader__item, children: name }, `${name}-${index}`));
+    return (jsx("div", { className: className, ...rest, children: jsx("div", { className: styles.weekdayHeader, children: weekdayNames.map((name, index) => renderWeekdayName
+                ? renderWeekdayName(name, index)
+                : defaultRenderWeekdayName(name, index)) }) }));
+}
+var WeekdayHeader$1 = memo(WeekdayHeader);
+
+/**
+ * Core grid utilities for Calendar component
+ */
+/**
+ * Default calendar grid configuration
+ */
+const DEFAULT_GRID_CONFIG = {
+    columns: 8, // 7 days + 1 week number
+    weekNumberColumn: 7, // Week number is in the last column
+};
+/**
+ * Calculates the grid index from row and column
+ * @param row - Row index (0-based)
+ * @param col - Column index (0-based)
+ * @param columns - Number of columns in the grid
+ * @returns The calculated grid index
+ */
+function calculateGridIndex(row, col, columns = DEFAULT_GRID_CONFIG.columns) {
+    return row * columns + col;
+}
+/**
+ * Checks if a grid index represents a week number cell
+ * @param index - Grid index to check
+ * @param config - Grid configuration (optional, uses defaults)
+ * @returns True if the index represents a week number cell
+ */
+function isWeekNumberCell(index, config = DEFAULT_GRID_CONFIG) {
+    return index % config.columns === config.weekNumberColumn;
+}
+/**
+ * Calculates the row index from a grid index
+ * @param index - Grid index
+ * @param columns - Number of columns in the grid
+ * @returns The row index (0-based)
+ */
+function getRowFromIndex(index, columns = DEFAULT_GRID_CONFIG.columns) {
+    return Math.floor(index / columns);
+}
+/**
+ * Calculates the column index from a grid index
+ * @param index - Grid index
+ * @param columns - Number of columns in the grid
+ * @returns The column index (0-based)
+ */
+function getColumnFromIndex(index, columns = DEFAULT_GRID_CONFIG.columns) {
+    return index % columns;
+}
+/**
+ * Calculates the number of rows needed for a given number of items
+ * @param itemCount - Total number of items
+ * @param columns - Number of columns in the grid
+ * @returns The number of rows needed
+ */
+function calculateRowCount(itemCount, columns = DEFAULT_GRID_CONFIG.columns) {
+    return Math.ceil(itemCount / columns);
+}
+
+/**
+ * Virtual scrolling utilities for infinite scrolling Calendar
+ */
+/**
+ * Default viewport configuration
+ */
+const DEFAULT_VIEWPORT_CONFIG = {
+    itemHeight: 50, // Default item height in pixels
+    overscan: 2, // Render 2 extra items above and below
+    totalItems: 0,
+};
+/**
+ * Calculates the visible range of items for virtual scrolling
+ * @param scrollTop - Current scroll position
+ * @param containerHeight - Height of the scrollable container
+ * @param config - Viewport configuration
+ * @returns The visible range of items
+ */
+function calculateVisibleRange(scrollTop, containerHeight, config = DEFAULT_VIEWPORT_CONFIG) {
+    const { itemHeight, overscan, totalItems } = config;
+    // Calculate visible range without overscan
+    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight));
+    const endIndex = Math.min(totalItems - 1, Math.ceil((scrollTop + containerHeight) / itemHeight));
+    // Apply overscan
+    const overscanStart = Math.max(0, startIndex - overscan);
+    const overscanEnd = Math.min(totalItems - 1, endIndex + overscan);
+    return {
+        startIndex: overscanStart,
+        endIndex: overscanEnd,
+        visibleCount: overscanEnd - overscanStart + 1,
+    };
+}
+/**
+ * Calculates the total height of all items for virtual scrolling
+ * @param itemCount - Total number of items
+ * @param itemHeight - Height of a single item
+ * @returns Total height in pixels
+ */
+function calculateTotalHeight(itemCount, itemHeight = DEFAULT_VIEWPORT_CONFIG.itemHeight) {
+    return itemCount * itemHeight;
+}
+/**
+ * Calculates the offset for a specific item index in virtual scrolling
+ * @param index - Item index
+ * @param itemHeight - Height of a single item
+ * @returns Offset in pixels
+ */
+function calculateItemOffset(index, itemHeight = DEFAULT_VIEWPORT_CONFIG.itemHeight) {
+    return index * itemHeight;
+}
+/**
+ * Checks if an item is within the visible range
+ * @param itemIndex - Index of the item to check
+ * @param range - Current viewport range
+ * @returns True if the item is visible
+ */
+function isItemVisible(itemIndex, range) {
+    return itemIndex >= range.startIndex && itemIndex <= range.endIndex;
+}
+
+/**
+ * Default month header renderer
+ */
+function defaultMonthHeader(name) {
+    return jsx("h2", { children: name });
+}
+/**
+ * MonthList component for infinite scrolling calendar
+ * Handles grid layout and infinite scroll support
+ */
+function MonthList(props) {
+    const { months, renderDay, renderWeekNumber, renderMonthHeader = defaultMonthHeader, showWeekNumbers = true, onLoadMore, hasMore = false, isLoading = false, scrollRef, className, ...rest } = props;
+    const sentinelRef = useRef(null);
+    // Infinite scroll with IntersectionObserver
+    useEffect(() => {
+        if (!onLoadMore || !hasMore || isLoading)
+            return;
+        const sentinel = sentinelRef.current;
+        if (!sentinel)
+            return;
+        const observer = new IntersectionObserver(async (entries) => {
+            const entry = entries[0];
+            if (entry?.isIntersecting && !isLoading) {
+                await onLoadMore();
+            }
+        }, {
+            root: scrollRef?.current || null,
+            rootMargin: '10px',
+            threshold: 0,
+        });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [onLoadMore, hasMore, isLoading, scrollRef]);
+    /**
+     * Renders a single calendar item (day or week number)
+     */
+    const renderItem = (item, index, sectionIndex) => {
+        if (typeof index === 'number' && showWeekNumbers && isWeekNumberCell(index)) {
+            return renderWeekNumber?.(item, index, sectionIndex) ?? null;
+        }
+        return renderDay(item, index, sectionIndex);
+    };
+    return (jsxs("div", { className: className, ...rest, children: [months.map((month, sectionIndex) => (jsx(Fragment, { children: jsxs("div", { className: styles$1.monthList__month, children: [jsx("div", { className: styles$1.monthList__monthHeader, children: renderMonthHeader(month.title) }), jsx("div", { className: styles$1.monthList__monthDays, children: month.data.map((item, index) => {
+                                const globalIndex = months
+                                    .slice(0, sectionIndex)
+                                    .reduce((sum, m) => sum + m.data.length, 0) + index;
+                                return (jsx(Fragment, { children: renderItem(item, globalIndex, sectionIndex) }, `${item.date.toISOString()}-${globalIndex}`));
+                            }) })] }) }, `month-${sectionIndex}-${month.title}`))), onLoadMore && (jsx("div", { ref: sentinelRef, className: styles$1.monthList__sentinel, children: isLoading && (jsx("div", { className: styles$1.monthList__loader, children: "Loading..." })) }))] }));
+}
+var MonthList$1 = memo(MonthList);
+
+/**
+ * Calendar component - Main orchestrator
+ * Supports infinite scrolling and customizable rendering
+ */
+function Calendar(props) {
+    const { className, months, renderDay, renderWeekNumber, renderMonthHeader, showWeekNumbers = true, onLoadMore, hasMore, isLoading, headerClassName, bodyClassName, ...rest } = props;
+    const scrollRef = useRef(null);
+    const rootClassName = classNames(styles$2.calendar, className);
+    const headerClassNames = classNames(styles$2.calendar__header, headerClassName);
+    const bodyClassNames = classNames(styles$2.calendar__scrollableBody, bodyClassName);
+    return (jsxs("div", { className: rootClassName, ...rest, children: [jsx("div", { className: headerClassNames, children: jsx(WeekdayHeader$1, {}) }), jsx("div", { ref: scrollRef, className: bodyClassNames, children: jsx(MonthList$1, { months: months, renderDay: renderDay, renderWeekNumber: renderWeekNumber, renderMonthHeader: renderMonthHeader, showWeekNumbers: showWeekNumbers, onLoadMore: onLoadMore, hasMore: hasMore, isLoading: isLoading, scrollRef: scrollRef }) })] }));
+}
+var Calendar$1 = memo(Calendar);
+
+const DAY_NAMES = [
+    'sunday',
+    'monday',
+    'tuesday',
+    'wednesday',
+    'thursday',
+    'friday',
+    'saturday',
+];
+/**
+ * Day component for calendar day cells
+ * Supports render props for customizing date display and indicator
+ */
+const Day = forwardRef(function Day(props, ref) {
+    const { dateInfo, onDateClick, isMarked = false, isRounded = false, isSelected = false, isDotted = false, dotType = 'primary', onClick, renderDate, renderIndicator, className, ...rest } = props;
+    const dayName = DAY_NAMES[dateInfo.date.getDay()];
+    const rootClassName = classNames(styles$3.day, className, {
+        [styles$3['--rounded']]: isRounded,
+        [styles$3[`--${dayName}`]]: true,
+    });
+    const dateClassName = classNames(styles$3.day__date, {
+        [styles$3['--marked']]: isMarked,
+        [styles$3['--selected']]: isSelected,
+    });
+    const handleClick = () => {
+        onDateClick(dateInfo);
+        onClick?.();
+    };
+    // Default render props
+    const defaultRenderDate = () => (jsx("span", { className: styles$3.day__dateText, children: dateInfo.date.getDate() }));
+    const defaultRenderIndicator = () => {
+        if (!isDotted)
+            return null;
+        return (jsx("div", { className: classNames(styles$3.day__indicator, {
+                [styles$3['--primary']]: dotType === 'primary',
+                [styles$3['--secondary']]: dotType === 'secondary',
+            }) }));
+    };
+    return (jsxs("div", { ref: ref, className: rootClassName, onClick: handleClick, "data-date": dateInfo.date.toISOString().split('T')[0], ...rest, children: [jsx("div", { className: dateClassName, children: renderDate ? renderDate(dateInfo.date.getDate()) : defaultRenderDate() }), renderIndicator
+                ? renderIndicator({ isDotted, dotType })
+                : defaultRenderIndicator()] }));
+});
+var Day$1 = memo(Day, (prevProps, nextProps) => prevProps.isSelected === nextProps.isSelected &&
+    prevProps.isMarked === nextProps.isMarked &&
+    prevProps.isRounded === nextProps.isRounded &&
+    prevProps.isDotted === nextProps.isDotted &&
+    prevProps.dotType === nextProps.dotType &&
+    prevProps.dateInfo.date.getTime() === nextProps.dateInfo.date.getTime());
+
+/**
+ * Week component for calendar week numbers
+ * Supports render props for customizing text display and indicator
+ */
+function Week(props) {
+    const { text, isMultiMonth = false, onClick, isDotted = false, isFocused = false, dotType = 'primary', renderText, renderIndicator, className, ...rest } = props;
+    const rootClassName = classNames(styles$4.week, className, {
+        [styles$4['--multi-month']]: isMultiMonth,
+        [styles$4['--focused']]: isFocused,
+    });
+    // Default render props
+    const defaultRenderText = () => (jsx("span", { className: styles$4.week__text, children: text }));
+    const defaultRenderIndicator = () => {
+        if (!isDotted)
+            return null;
+        return (jsx("div", { className: classNames(styles$4.week__indicator, {
+                [styles$4['--primary']]: dotType === 'primary',
+                [styles$4['--secondary']]: dotType === 'secondary',
+            }) }));
+    };
+    return (jsxs("div", { className: rootClassName, onClick: onClick, ...rest, children: [renderText ? renderText(text) : defaultRenderText(), renderIndicator
+                ? renderIndicator({ isDotted, dotType })
+                : defaultRenderIndicator()] }));
+}
+var Week$1 = memo(Week);
+
+/**
+ * MonthHeader component for calendar month headers
+ * Supports render props for customizing text display and indicator
+ */
+function MonthHeader(props) {
+    const { text, onClick, isFocused = false, isDotted = false, dotType = 'primary', renderText, renderIndicator, className, ...rest } = props;
+    const rootClassName = classNames(styles$5.monthHeader, className, {
+        [styles$5['--focused']]: isFocused,
+    });
+    // Default render props
+    const defaultRenderText = () => (jsx("h3", { className: styles$5.monthHeader__text, children: text }));
+    const defaultRenderIndicator = () => {
+        if (!isDotted)
+            return null;
+        return (jsx("div", { className: classNames(styles$5.monthHeader__indicator, {
+                [styles$5['--primary']]: dotType === 'primary',
+                [styles$5['--secondary']]: dotType === 'secondary',
+            }) }));
+    };
+    return (jsxs("div", { className: rootClassName, onClick: onClick, ...rest, children: [renderText ? renderText(text) : defaultRenderText(), renderIndicator
+                ? renderIndicator({ isDotted, dotType })
+                : defaultRenderIndicator()] }));
+}
+var MonthHeader$1 = memo(MonthHeader);
+
+/**
+ * Pure date formatting utilities for Calendar component
+ */
+/**
+ * Month name to number mapping (0-11)
+ */
+const MONTH_NUMBERS = {
+    JANUARY: 0,
+    FEBRUARY: 1,
+    MARCH: 2,
+    APRIL: 3,
+    MAY: 4,
+    JUNE: 5,
+    JULY: 6,
+    AUGUST: 7,
+    SEPTEMBER: 8,
+    OCTOBER: 9,
+    NOVEMBER: 10,
+    DECEMBER: 11,
+};
+/**
+ * Date format strings
+ */
+const DATE_FORMATS = {
+    DAY: 'yyyy-MM-dd',
+    WEEK: (year, weekNumber) => `${year}-W${weekNumber}`,
+    MONTH: (year, monthNumber) => `${year}-M${monthNumber}`,
+};
+/**
+ * Calendar date formatter utilities
+ */
+const formatCalendarDate = {
+    /**
+     * Formats a date as a day string (yyyy-MM-dd)
+     * @param date - Date to format
+     * @returns Formatted date string
+     */
+    day: (date) => {
+        return format(date, DATE_FORMATS.DAY);
+    },
+    /**
+     * Formats a date as a week string (yyyy-Www)
+     * @param date - Date to format
+     * @param weekNumber - Week number
+     * @returns Formatted week string
+     */
+    week: (date, weekNumber) => {
+        return DATE_FORMATS.WEEK(date.getFullYear(), weekNumber);
+    },
+    /**
+     * Formats a month as a string (yyyy-Mmm)
+     * @param year - Year
+     * @param monthName - Month name (e.g., "January")
+     * @returns Formatted month string
+     */
+    month: (year, monthName) => {
+        const monthNumber = MONTH_NUMBERS[monthName.toUpperCase()] ?? 0;
+        return DATE_FORMATS.MONTH(year, monthNumber + 1);
+    },
+};
+/**
+ * Parses a formatted day string back to a Date
+ * @param dateString - Date string in format yyyy-MM-dd
+ * @returns Parsed Date object
+ */
+function parseDayString(dateString) {
+    return new Date(dateString);
+}
+/**
+ * Parses a formatted week string back to year and week number
+ * @param weekString - Week string in format yyyy-Www
+ * @returns Object with year and weekNumber
+ */
+function parseWeekString(weekString) {
+    const match = weekString.match(/^(\d{4})-W(\d+)$/);
+    if (!match) {
+        throw new Error(`Invalid week string format: ${weekString}`);
+    }
+    return {
+        year: parseInt(match[1], 10),
+        weekNumber: parseInt(match[2], 10),
+    };
+}
+/**
+ * Parses a formatted month string back to year and month number
+ * @param monthString - Month string in format yyyy-Mmm
+ * @returns Object with year and monthNumber (1-12)
+ */
+function parseMonthString(monthString) {
+    const match = monthString.match(/^(\d{4})-M(\d+)$/);
+    if (!match) {
+        throw new Error(`Invalid month string format: ${monthString}`);
+    }
+    return {
+        year: parseInt(match[1], 10),
+        monthNumber: parseInt(match[2], 10),
+    };
+}
+
+/**
+ * Scroll position management utilities for Calendar component
+ */
+/**
+ * Finds the DOM element for a specific date
+ * @param dateString - Formatted date string (yyyy-MM-dd)
+ * @param container - Scrollable container element
+ * @returns The DOM element for the date, or null if not found
+ */
+function findDateElement(dateString, container) {
+    if (!container)
+        return null;
+    // Try to find element by data attribute
+    const element = container.querySelector(`[data-date="${dateString}"]`);
+    return element;
+}
+/**
+ * Scrolls to a specific date in the calendar
+ * @param dateString - Formatted date string (yyyy-MM-dd)
+ * @param container - Scrollable container element
+ * @param options - Scroll options (behavior, block, inline)
+ * @returns Promise that resolves when scrolling is complete
+ */
+function scrollToDate(dateString, container, options = {
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'nearest',
+}) {
+    return new Promise((resolve) => {
+        const element = findDateElement(dateString, container);
+        if (element) {
+            element.scrollIntoView(options);
+            // Wait for scroll animation to complete
+            setTimeout(() => resolve(), 300);
+        }
+        else {
+            resolve();
+        }
+    });
+}
+/**
+ * Gets the scroll position of a container
+ * @param container - Scrollable container element
+ * @returns Current scroll position
+ */
+function getScrollPosition(container) {
+    if (!container)
+        return null;
+    return {
+        scrollTop: container.scrollTop,
+        scrollLeft: container.scrollLeft,
+    };
+}
+/**
+ * Sets the scroll position of a container
+ * @param container - Scrollable container element
+ * @param position - Scroll position to set
+ */
+function setScrollPosition(container, position) {
+    if (!container)
+        return;
+    container.scrollTop = position.scrollTop;
+    container.scrollLeft = position.scrollLeft;
+}
+/**
+ * Finds the date info for a specific formatted date string in months
+ * @param dateString - Formatted date string (yyyy-MM-dd)
+ * @param months - Array of month info
+ * @returns The date info, or null if not found
+ */
+function findDateInfoInMonths(dateString, months) {
+    for (const month of months) {
+        for (const dateInfo of month.data) {
+            const dateStr = formatCalendarDate.day(dateInfo.date);
+            if (dateStr === dateString) {
+                return dateInfo;
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Calculates the approximate scroll position for a date
+ * @param dateString - Formatted date string (yyyy-MM-dd)
+ * @param months - Array of month info
+ * @param itemHeight - Height of a single item in pixels
+ * @returns Approximate scroll position in pixels
+ */
+function calculateDateScrollPosition(dateString, months, itemHeight = 50) {
+    let itemIndex = 0;
+    for (const month of months) {
+        for (const dateInfo of month.data) {
+            const dateStr = formatCalendarDate.day(dateInfo.date);
+            if (dateStr === dateString) {
+                return itemIndex * itemHeight;
+            }
+            itemIndex++;
+        }
+    }
+    return 0;
+}
+
+/**
+ * Generic hook for calendar items rendering
+ * Provides utility functions to generate props for calendar components
+ */
+/**
+ * Generic hook to generate props and utility functions for rendering calendar items
+ * Removes business-specific logic (metadata) and makes it generic
+ *
+ * @param props - Hook configuration
+ * @returns Object with memoized functions to get props for different calendar item types
+ */
+function useCalendarItems(props) {
+    const { currentDate, setCurrentDate, scrollRef, getIndicatorProps = () => ({}), } = props;
+    /**
+     * Generates props for a week number cell
+     */
+    const getWeekNumberProps = useCallback((dateInfo) => {
+        const weekDateFormatted = formatCalendarDate.week(dateInfo.date, dateInfo.weekNumber);
+        const indicatorProps = getIndicatorProps(weekDateFormatted);
+        const onClick = () => {
+            setCurrentDate(weekDateFormatted);
+        };
+        return {
+            text: `W${dateInfo.weekNumber}`,
+            key: weekDateFormatted,
+            isMultiMonth: isWeekNumberDecoration(dateInfo.date) &&
+                dateInfo.date.isMultiMonth,
+            onClick,
+            ...indicatorProps,
+        };
+    }, [currentDate, setCurrentDate, getIndicatorProps]);
+    /**
+     * Generates props for a day cell
+     */
+    const getDayProps = useCallback((dateInfo) => {
+        const { date } = dateInfo;
+        const formattedDate = formatCalendarDate.day(date);
+        const isCurrentDay = isToday(date);
+        const indicatorProps = getIndicatorProps(formattedDate);
+        const onDateClick = (info) => {
+            setCurrentDate(formatCalendarDate.day(info.date));
+        };
+        return {
+            dateInfo,
+            ref: isCurrentDay ? scrollRef : undefined,
+            isMarked: isCurrentDay,
+            isSelected: isSameDay(date, new Date(currentDate)),
+            isRounded: true,
+            onDateClick,
+            key: formattedDate,
+            ...indicatorProps,
+        };
+    }, [currentDate, scrollRef, setCurrentDate, getIndicatorProps]);
+    /**
+     * Generates props for a month header
+     */
+    const getMonthHeaderProps = useCallback((monthName) => {
+        const currentYear = new Date().getFullYear();
+        const monthFormatted = formatCalendarDate.month(currentYear, monthName);
+        const indicatorProps = getIndicatorProps(monthFormatted);
+        const onClick = () => {
+            setCurrentDate(monthFormatted);
+        };
+        return {
+            text: monthName,
+            onClick,
+            ...indicatorProps,
+        };
+    }, [currentDate, setCurrentDate, getIndicatorProps]);
+    /**
+     * Checks if a calendar item represents a week number decoration
+     */
+    const isWeekNumber = useCallback((item) => isWeekNumberDecoration(item.date), []);
+    return {
+        getWeekNumberProps,
+        getDayProps,
+        getMonthHeaderProps,
+        isWeekNumber,
+    };
+}
+
+/**
+ * Hook for infinite scrolling support
+ */
+/**
+ * Hook for infinite scrolling with IntersectionObserver
+ *
+ * @param props - Infinite scroll configuration
+ */
+function useInfiniteScroll(props) {
+    const { hasMore, isLoading, onLoadMore, rootMargin = '10px', threshold = 0, scrollRef, } = props;
+    const sentinelRef = useRef(null);
+    const inFlightRef = useRef(false);
+    useEffect(() => {
+        if (!hasMore || isLoading || inFlightRef.current)
+            return;
+        const sentinel = sentinelRef.current;
+        if (!sentinel)
+            return;
+        const root = scrollRef?.current || null;
+        const observer = new IntersectionObserver(async (entries) => {
+            const entry = entries[0];
+            if (entry?.isIntersecting && !isLoading && !inFlightRef.current) {
+                inFlightRef.current = true;
+                try {
+                    await onLoadMore();
+                }
+                finally {
+                    inFlightRef.current = false;
+                }
+            }
+        }, {
+            root,
+            rootMargin,
+            threshold,
+        });
+        observer.observe(sentinel);
+        return () => {
+            observer.disconnect();
+            inFlightRef.current = false;
+        };
+    }, [hasMore, isLoading, onLoadMore, rootMargin, threshold, scrollRef]);
+    return { sentinelRef };
+}
+
+/**
+ * Hook for scrolling to a specific date
+ */
+/**
+ * Hook for scrolling to a specific date in the calendar
+ *
+ * @param props - Scroll configuration
+ * @returns Function to scroll to a date
+ */
+function useScrollToDate(props = {}) {
+    const { scrollRef, scrollOptions } = props;
+    const scrollTo = useCallback(async (dateString) => {
+        await scrollToDate(dateString, scrollRef?.current ?? null, scrollOptions ?? {
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'nearest',
+        });
+    }, [scrollRef, scrollOptions]);
+    const findElement = useCallback((dateString) => {
+        return findDateElement(dateString, scrollRef?.current ?? null);
+    }, [scrollRef]);
+    return {
+        scrollTo,
+        findElement,
+    };
+}
+
+export { Calendar$1 as Calendar, DATE_FORMATS, DEFAULT_GRID_CONFIG, DEFAULT_VIEWPORT_CONFIG, Day$1 as Day, MONTH_NUMBERS, MonthHeader$1 as MonthHeader, MonthList$1 as MonthList, WEEKDAY_NAMES, Week$1 as Week, WeekdayHeader$1 as WeekdayHeader, calculateDateScrollPosition, calculateGridIndex, calculateItemOffset, calculateRowCount, calculateTotalHeight, calculateVisibleRange, findDateElement, findDateInfoInMonths, formatCalendarDate, getColumnFromIndex, getRowFromIndex, getScrollPosition, isItemVisible, isWeekNumberCell, parseDayString, parseMonthString, parseWeekString, scrollToDate, setScrollPosition, useCalendarItems, useInfiniteScroll, useScrollToDate };
+//# sourceMappingURL=index.esm.js.map