@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

package/dist/esm/components/DatePicker/DateRangePicker.js

@@ -1,51 +1,132 @@
+import "./DateRangePicker.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useLayoutEffect, useCallback, forwardRef, useMemo } from 'react';
 import { isSameDate } from '@h6s/calendar';
-import { styled } from 'styled-components';
 import { DateRangePickerInput, CalendarRenderer, StyledDropdownItem, DateTableCell } from './Common.js';
-import { isDateRangeTheWholeMonth, formatDateHeader, formatSelectedDate, shiftToTimezone, datesAreWithinMaxRange, shiftFromTimezone } from './utils.js';
+import { cn } from '../../lib/cva.js';
+import styles from './DateRangePicker.module.css.js';
+import { isDateRangeTheWholeMonth, formatDateHeader, formatSelectedDate, shiftToTimezone, datesAreWithinMaxRange, isDateNotInAllowList, shiftFromTimezone } from './utils.js';
 import { Dropdown } from '../Dropdown/index.js';
 import { Panel } from '../Panel/index.js';
 import { Container } from '../Container/index.js';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
-const calendarWidth = 275;
-const PredefinedCalendarContainer = styled(Panel).withConfig({
-  componentId: "sc-1f4vu20-0"
-})(["align-items:start;background:", ";"], ({
-  theme
-}) => theme.click.panel.color.background.muted);
-const PredefinedDatesContainer = styled(Container).withConfig({
-  componentId: "sc-1f4vu20-1"
-})(["width:", "px;"], calendarWidth);
-const CalendarRendererContainer = styled.div.withConfig({
-  componentId: "sc-1f4vu20-2"
-})(["border:", ";border-radius:", ";box-shadow:lch(6.77 0 0 / 0.15) 4px 4px 6px -1px,lch(6.77 0 0 / 0.15) 2px 2px 4px -1px;", " position:absolute;top:0;"], ({
-  theme
-}) => `${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.background.range}`, ({
-  theme
-}) => theme.click.datePicker.dateOption.radii.default, ({
-  $openDirection
-}) => $openDirection === "left" ? "right: 100%;" : "left: 276px;");
-const StyledCalendarRenderer = styled(CalendarRenderer).withConfig({
-  componentId: "sc-1f4vu20-3"
-})(["border-radius:", ";min-height:221px;"], ({
-  theme
-}) => theme.click.datePicker.dateOption.radii.default);
-const ScrollableContainer = styled(Container).withConfig({
-  componentId: "sc-1f4vu20-4"
-})(["max-height:210px;overflow-y:auto;"]);
-const DateRangeTableCell = styled(DateTableCell).withConfig({
-  componentId: "sc-1f4vu20-5"
-})(["", ""], ({
-  $shouldShowRangeIndicator,
-  theme
-}) => $shouldShowRangeIndicator && `
-    background: ${theme.click.datePicker.dateOption.color.background.range};
-    border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.background.range};
-    border-radius: 0;
-    `);
+const PredefinedCalendarContainer = ({
+  className,
+  children,
+  gap,
+  orientation,
+  padding
+}) => /* @__PURE__ */ jsx(
+  Panel,
+  {
+    gap,
+    orientation,
+    padding,
+    className: cn(styles["predefined-calendar-container"], className),
+    children
+  }
+);
+const PredefinedDatesContainer = ({
+  className,
+  children,
+  isResponsive,
+  orientation,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsx(
+  Container,
+  {
+    isResponsive,
+    orientation,
+    "data-testid": dataTestId,
+    className: cn(styles["predefined-dates-container"], className),
+    children
+  }
+);
+const calendarRendererContainerVariants = cva(styles["calendar-renderer-container"], {
+  variants: {
+    openDirection: {
+      left: styles["calendar-renderer-container_left"],
+      right: styles["calendar-renderer-container_right"]
+    }
+  },
+  defaultVariants: { openDirection: "right" }
+});
+const CalendarRendererContainer = forwardRef(({ openDirection, children }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: calendarRendererContainerVariants({ openDirection }),
+    children
+  }
+));
+CalendarRendererContainer.displayName = "CalendarRendererContainer";
+const StyledCalendarRenderer = ({
+  className,
+  children,
+  calendarOptions,
+  allowYearMonthSelection,
+  selectedDate,
+  timezone
+}) => /* @__PURE__ */ jsx(
+  CalendarRenderer,
+  {
+    calendarOptions,
+    allowYearMonthSelection,
+    selectedDate,
+    timezone,
+    className: cn(styles["styled-calendar-renderer"], className),
+    children
+  }
+);
+const ScrollableContainer = ({
+  className,
+  children,
+  orientation
+}) => /* @__PURE__ */ jsx(
+  Container,
+  {
+    orientation,
+    className: cn(styles["scrollable-container"], className),
+    children
+  }
+);
+const dateRangeTableCellVariants = cva(void 0, {
+  variants: {
+    showRangeIndicator: { true: styles["date-range-table-cell_indicator"] }
+  }
+});
+const DateRangeTableCell = ({
+  shouldShowRangeIndicator,
+  className,
+  children,
+  isCurrentMonth,
+  isDisabled,
+  isSelected,
+  isPresent,
+  onClick,
+  onMouseEnter,
+  onMouseLeave
+}) => /* @__PURE__ */ jsx(
+  DateTableCell,
+  {
+    isCurrentMonth,
+    isDisabled,
+    isSelected,
+    isPresent,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    className: cn(
+      dateRangeTableCellVariants({ showRangeIndicator: shouldShowRangeIndicator }),
+      className
+    ),
+    children
+  }
+);
 const Calendar = ({
+  allowOnlyDatesList,
   calendarBody,
   closeDatepicker,
   futureDatesDisabled,
@@ -60,22 +141,21 @@ const Calendar = ({
   const today = shiftToTimezone(/* @__PURE__ */ new Date(), timezone);
   const shiftedStart = startDate ? shiftToTimezone(startDate, timezone) : void 0;
   const shiftedEnd = endDate ? shiftToTimezone(endDate, timezone) : void 0;
+  const shiftedAllowList = useMemo(() => {
+    return allowOnlyDatesList?.map((date) => {
+      return shiftToTimezone(date, timezone);
+    });
+  }, [allowOnlyDatesList, timezone]);
   const handleMouseOut = () => {
     setHoveredDate(void 0);
   };
-  return calendarBody.value.map(({
-    key: weekKey,
-    value: week
-  }) => {
-    return /* @__PURE__ */ jsx("tr", { children: week.map(({
-      date,
-      isCurrentMonth,
-      key: dayKey,
-      value: fullDate
-    }) => {
+  return calendarBody.value.map(({ key: weekKey, value: week }) => {
+    return /* @__PURE__ */ jsx("tr", { children: week.map(({ date, isCurrentMonth, key: dayKey, value: fullDate }) => {
       const isSelected = shiftedStart && isSameDate(shiftedStart, fullDate) || shiftedEnd && isSameDate(shiftedEnd, fullDate);
       const isPresent = isSameDate(today, fullDate);
-      const isBetweenStartAndEndDates = Boolean(shiftedStart && shiftedEnd && fullDate > shiftedStart && fullDate < shiftedEnd);
+      const isBetweenStartAndEndDates = Boolean(
+        shiftedStart && shiftedEnd && fullDate > shiftedStart && fullDate < shiftedEnd
+      );
       let isDisabled = false;
       if (futureDatesDisabled && fullDate > today) {
         isDisabled = true;
@@ -86,7 +166,12 @@ const Calendar = ({
       if (maxRangeLength > 1 && shiftedStart && !datesAreWithinMaxRange(shiftedStart, fullDate, maxRangeLength) && fullDate > shiftedStart) {
         isDisabled = true;
       }
-      const shouldShowRangeIndicator = !shiftedEnd && Boolean(shiftedStart && hoveredDate && fullDate > shiftedStart && fullDate < hoveredDate);
+      if (isDateNotInAllowList(shiftedAllowList, fullDate)) {
+        isDisabled = true;
+      }
+      const shouldShowRangeIndicator = !shiftedEnd && Boolean(
+        shiftedStart && hoveredDate && fullDate > shiftedStart && fullDate < hoveredDate
+      );
       const handleMouseEnter = () => {
         setHoveredDate(fullDate);
       };
@@ -106,7 +191,21 @@ const Calendar = ({
           return;
         }
       };
-      return /* @__PURE__ */ jsx(DateRangeTableCell, { $shouldShowRangeIndicator: !isSelected && (shouldShowRangeIndicator || isBetweenStartAndEndDates), $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isPresent: isPresent, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseOut, children: date }, dayKey);
+      return /* @__PURE__ */ jsx(
+        DateRangeTableCell,
+        {
+          shouldShowRangeIndicator: !isSelected && (shouldShowRangeIndicator || isBetweenStartAndEndDates),
+          isCurrentMonth,
+          isDisabled,
+          isSelected: Boolean(isSelected),
+          isPresent,
+          onClick: handleClick,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseOut,
+          children: date
+        },
+        dayKey
+      );
     }) }, weekKey);
   });
 };
@@ -125,34 +224,61 @@ const PredefinedDates = ({
     event.preventDefault();
     showCustomDateRange(!shouldShowCustomRange);
   };
-  return /* @__PURE__ */ jsxs(PredefinedDatesContainer, { "data-testid": "predefined-dates-list", isResponsive: false, orientation: "vertical", children: [
-    /* @__PURE__ */ jsx(ScrollableContainer, { orientation: "vertical", children: predefinedDatesList.map(({
-      startDate,
-      endDate
-    }) => {
-      const handleItemClick = () => {
-        setStartDate(startDate);
-        setEndDate(endDate);
-        onSelectDateRange(startDate, endDate);
-      };
-      const rangeIsSelected = selectedEndDate && isSameDate(selectedEndDate, endDate) && selectedStartDate && isSameDate(selectedStartDate, startDate);
-      const isWholeMonth = isDateRangeTheWholeMonth({
-        startDate,
-        endDate
-      }, timezone);
-      const formattedText = isWholeMonth ? formatDateHeader(timezone, startDate) : `${formatSelectedDate(timezone, startDate)} – ${formatSelectedDate(timezone, endDate)}`.trim();
-      return /* @__PURE__ */ jsx(StyledDropdownItem, { "data-testid": `predefined-date-${startDate.getTime()}`, onClick: handleItemClick, children: /* @__PURE__ */ jsxs(Container, { "data-selected": rangeIsSelected, "data-testid": formattedText, justifyContent: "space-between", orientation: "horizontal", children: [
-        formattedText,
-        rangeIsSelected && /* @__PURE__ */ jsx(SvgImage, { name: "check" })
-      ] }) }, startDate.toISOString());
-    }) }),
-    /* @__PURE__ */ jsx(StyledDropdownItem, { onClick: handleCustomTimePeriodClick, children: /* @__PURE__ */ jsxs(Container, { justifyContent: "space-between", orientation: "horizontal", children: [
-      "Custom time period ",
-      /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right" })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    PredefinedDatesContainer,
+    {
+      "data-testid": "predefined-dates-list",
+      isResponsive: false,
+      orientation: "vertical",
+      children: [
+        /* @__PURE__ */ jsx(ScrollableContainer, { orientation: "vertical", children: predefinedDatesList.map(({ startDate, endDate }) => {
+          const handleItemClick = () => {
+            setStartDate(startDate);
+            setEndDate(endDate);
+            onSelectDateRange(startDate, endDate);
+          };
+          const rangeIsSelected = selectedEndDate && isSameDate(selectedEndDate, endDate) && selectedStartDate && isSameDate(selectedStartDate, startDate);
+          const isWholeMonth = isDateRangeTheWholeMonth({ startDate, endDate }, timezone);
+          const formattedText = isWholeMonth ? formatDateHeader(timezone, startDate) : `${formatSelectedDate(timezone, startDate)} – ${formatSelectedDate(timezone, endDate)}`.trim();
+          return /* @__PURE__ */ jsx(
+            StyledDropdownItem,
+            {
+              "data-testid": `predefined-date-${startDate.getTime()}`,
+              onClick: handleItemClick,
+              children: /* @__PURE__ */ jsxs(
+                Container,
+                {
+                  "data-selected": rangeIsSelected,
+                  "data-testid": formattedText,
+                  justifyContent: "space-between",
+                  orientation: "horizontal",
+                  children: [
+                    formattedText,
+                    rangeIsSelected && /* @__PURE__ */ jsx(SvgImage, { name: "check" })
+                  ]
+                }
+              )
+            },
+            startDate.toISOString()
+          );
+        }) }),
+        /* @__PURE__ */ jsx(StyledDropdownItem, { onClick: handleCustomTimePeriodClick, children: /* @__PURE__ */ jsxs(
+          Container,
+          {
+            justifyContent: "space-between",
+            orientation: "horizontal",
+            children: [
+              "Custom time period ",
+              /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 };
 const DateRangePicker = ({
+  allowOnlyDatesList,
   endDate,
   startDate,
   disabled = false,
@@ -205,32 +331,35 @@ const DateRangePicker = ({
       setCalendarOpenDirection(openDirection);
     }
   };
-  const handleSelectDate = useCallback((selectedDate) => {
-    if (selectedStartDate && selectedEndDate) {
-      if (futureStartDatesDisabled && selectedDate > /* @__PURE__ */ new Date()) {
+  const handleSelectDate = useCallback(
+    (selectedDate) => {
+      if (selectedStartDate && selectedEndDate) {
+        if (futureStartDatesDisabled && selectedDate > /* @__PURE__ */ new Date()) {
+          setSelectedEndDate(void 0);
+          return;
+        }
+        setSelectedStartDate(selectedDate);
         setSelectedEndDate(void 0);
         return;
       }
-      setSelectedStartDate(selectedDate);
-      setSelectedEndDate(void 0);
-      return;
-    }
-    if (selectedStartDate) {
-      if (isSameDate(selectedStartDate, selectedDate)) {
-        setSelectedStartDate(void 0);
-        return;
-      }
-      if (selectedDate < selectedStartDate) {
-        setSelectedStartDate(selectedDate);
+      if (selectedStartDate) {
+        if (isSameDate(selectedStartDate, selectedDate)) {
+          setSelectedStartDate(void 0);
+          return;
+        }
+        if (selectedDate < selectedStartDate) {
+          setSelectedStartDate(selectedDate);
+          return;
+        }
+        setSelectedEndDate(selectedDate);
+        onSelectDateRange(selectedStartDate, selectedDate);
+        setShouldShowCustomRange(false);
         return;
       }
-      setSelectedEndDate(selectedDate);
-      onSelectDateRange(selectedStartDate, selectedDate);
-      setShouldShowCustomRange(false);
-      return;
-    }
-    setSelectedStartDate(selectedDate);
-  }, [futureStartDatesDisabled, onSelectDateRange, selectedEndDate, selectedStartDate]);
+      setSelectedStartDate(selectedDate);
+    },
+    [futureStartDatesDisabled, onSelectDateRange, selectedEndDate, selectedStartDate]
+  );
   const onTriggerKeyDown = useCallback((e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
@@ -238,13 +367,119 @@ const DateRangePicker = ({
     }
   }, []);
   const shouldShowPredefinedDates = predefinedDatesList !== void 0 && predefinedDatesList.length > 0;
-  return /* @__PURE__ */ jsxs(Dropdown, { onOpenChange: handleOpenChange, open: isOpen, children: [
-    /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, onKeyDown: onTriggerKeyDown, children: /* @__PURE__ */ jsx(DateRangePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedEndDate, selectedStartDate, timezone }) }),
-    /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", responsivePositioning, children: shouldShowPredefinedDates ? /* @__PURE__ */ jsxs(PredefinedCalendarContainer, { gap: "none", orientation: "horizontal", padding: "none", children: [
-      /* @__PURE__ */ jsx(PredefinedDates, { onSelectDateRange, predefinedDatesList, selectedEndDate, selectedStartDate, setEndDate: setSelectedEndDate, setStartDate: setSelectedStartDate, shouldShowCustomRange, showCustomDateRange: setShouldShowCustomRange, timezone }),
-      shouldShowCustomRange && /* @__PURE__ */ jsx(CalendarRendererContainer, { $openDirection: calendarOpenDirection, ref: calendarContainerRef, children: /* @__PURE__ */ jsx(StyledCalendarRenderer, { calendarOptions, allowYearMonthSelection: false, selectedDate: selectedStartDate, timezone, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate, timezone }) }) })
-    ] }) : /* @__PURE__ */ jsx(CalendarRenderer, { calendarOptions, allowYearMonthSelection: false, selectedDate: selectedStartDate, timezone, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate, timezone }) }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Dropdown,
+    {
+      onOpenChange: handleOpenChange,
+      open: isOpen,
+      children: [
+        /* @__PURE__ */ jsx(
+          Dropdown.Trigger,
+          {
+            disabled,
+            onKeyDown: onTriggerKeyDown,
+            children: /* @__PURE__ */ jsx(
+              DateRangePickerInput,
+              {
+                "data-testid": "datepicker-input-container",
+                disabled,
+                isActive: isOpen,
+                placeholder,
+                selectedEndDate,
+                selectedStartDate,
+                timezone
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Dropdown.Content,
+          {
+            align: "start",
+            responsivePositioning,
+            children: shouldShowPredefinedDates ? /* @__PURE__ */ jsxs(
+              PredefinedCalendarContainer,
+              {
+                gap: "none",
+                orientation: "horizontal",
+                padding: "none",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    PredefinedDates,
+                    {
+                      onSelectDateRange,
+                      predefinedDatesList,
+                      selectedEndDate,
+                      selectedStartDate,
+                      setEndDate: setSelectedEndDate,
+                      setStartDate: setSelectedStartDate,
+                      shouldShowCustomRange,
+                      showCustomDateRange: setShouldShowCustomRange,
+                      timezone
+                    }
+                  ),
+                  shouldShowCustomRange && /* @__PURE__ */ jsx(
+                    CalendarRendererContainer,
+                    {
+                      openDirection: calendarOpenDirection,
+                      ref: calendarContainerRef,
+                      children: /* @__PURE__ */ jsx(
+                        StyledCalendarRenderer,
+                        {
+                          calendarOptions,
+                          allowYearMonthSelection: false,
+                          selectedDate: selectedStartDate,
+                          timezone,
+                          children: (body) => /* @__PURE__ */ jsx(
+                            Calendar,
+                            {
+                              allowOnlyDatesList,
+                              calendarBody: body,
+                              closeDatepicker: closeDatePicker,
+                              futureDatesDisabled,
+                              futureStartDatesDisabled,
+                              maxRangeLength,
+                              setSelectedDate: handleSelectDate,
+                              startDate: selectedStartDate,
+                              endDate: selectedEndDate,
+                              timezone
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsx(
+              CalendarRenderer,
+              {
+                calendarOptions,
+                allowYearMonthSelection: false,
+                selectedDate: selectedStartDate,
+                timezone,
+                children: (body) => /* @__PURE__ */ jsx(
+                  Calendar,
+                  {
+                    allowOnlyDatesList,
+                    calendarBody: body,
+                    closeDatepicker: closeDatePicker,
+                    futureDatesDisabled,
+                    futureStartDatesDisabled,
+                    maxRangeLength,
+                    setSelectedDate: handleSelectDate,
+                    startDate: selectedStartDate,
+                    endDate: selectedEndDate,
+                    timezone
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 
 export { DateRangePicker };