@clickhouse/click-ui 0.2.0-rc.7 → 0.2.0-rc.8

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

@@ -3,7 +3,7 @@ import { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react
 import { isSameDate } from '@h6s/calendar';
 import { styled } from 'styled-components';
 import { DateRangePickerInput, CalendarRenderer, StyledDropdownItem, DateTableCell } from './Common.js';
-import { isDateRangeTheWholeMonth, selectedDateFormatter, datesAreWithinMaxRange } from './utils.js';
+import { isDateRangeTheWholeMonth, formatDateHeader, formatSelectedDate, shiftToTimezone, datesAreWithinMaxRange, shiftFromTimezone } from './utils.js';
 import { Dropdown } from '../Dropdown/index.js';
 import { Panel } from '../Panel/index.js';
 import { Container } from '../Container/index.js';
@@ -53,9 +53,13 @@ const Calendar = ({
   maxRangeLength,
   setSelectedDate,
   startDate,
-  endDate
+  endDate,
+  timezone
 }) => {
   const [hoveredDate, setHoveredDate] = useState();
+  const today = shiftToTimezone(/* @__PURE__ */ new Date(), timezone);
+  const shiftedStart = startDate ? shiftToTimezone(startDate, timezone) : void 0;
+  const shiftedEnd = endDate ? shiftToTimezone(endDate, timezone) : void 0;
   const handleMouseOut = () => {
     setHoveredDate(void 0);
   };
@@ -69,21 +73,20 @@ const Calendar = ({
       key: dayKey,
       value: fullDate
     }) => {
-      const today = /* @__PURE__ */ new Date();
-      const isSelected = startDate && isSameDate(startDate, fullDate) || endDate && isSameDate(endDate, fullDate);
+      const isSelected = shiftedStart && isSameDate(shiftedStart, fullDate) || shiftedEnd && isSameDate(shiftedEnd, fullDate);
       const isPresent = isSameDate(today, fullDate);
-      const isBetweenStartAndEndDates = Boolean(startDate && endDate && fullDate > startDate && fullDate < endDate);
+      const isBetweenStartAndEndDates = Boolean(shiftedStart && shiftedEnd && fullDate > shiftedStart && fullDate < shiftedEnd);
       let isDisabled = false;
       if (futureDatesDisabled && fullDate > today) {
         isDisabled = true;
       }
-      if (futureStartDatesDisabled && !startDate && fullDate > today) {
+      if (futureStartDatesDisabled && !shiftedStart && fullDate > today) {
         isDisabled = true;
       }
-      if (maxRangeLength > 1 && startDate && !datesAreWithinMaxRange(startDate, fullDate, maxRangeLength)) {
+      if (maxRangeLength > 1 && shiftedStart && !datesAreWithinMaxRange(shiftedStart, fullDate, maxRangeLength)) {
         isDisabled = true;
       }
-      const shouldShowRangeIndicator = !endDate && Boolean(startDate && hoveredDate && fullDate > startDate && fullDate < hoveredDate);
+      const shouldShowRangeIndicator = !shiftedEnd && Boolean(shiftedStart && hoveredDate && fullDate > shiftedStart && fullDate < hoveredDate);
       const handleMouseEnter = () => {
         setHoveredDate(fullDate);
       };
@@ -91,14 +94,14 @@ const Calendar = ({
         if (isDisabled) {
           return false;
         }
-        setSelectedDate(fullDate);
-        if (startDate && endDate) {
+        setSelectedDate(shiftFromTimezone(fullDate, timezone));
+        if (shiftedStart && shiftedEnd) {
           return;
         }
-        if (startDate && fullDate < startDate) {
+        if (shiftedStart && fullDate < shiftedStart) {
           return;
         }
-        if (startDate && !isSameDate(fullDate, startDate)) {
+        if (shiftedStart && !isSameDate(fullDate, shiftedStart)) {
           closeDatepicker();
           return;
         }
@@ -107,11 +110,6 @@ const Calendar = ({
     }) }, weekKey);
   });
 };
-const locale = "en-US";
-const monthFormatter = new Intl.DateTimeFormat(locale, {
-  month: "short",
-  year: "numeric"
-});
 const PredefinedDates = ({
   onSelectDateRange,
   predefinedDatesList,
@@ -120,7 +118,8 @@ const PredefinedDates = ({
   setEndDate,
   setStartDate,
   shouldShowCustomRange,
-  showCustomDateRange
+  showCustomDateRange,
+  timezone
 }) => {
   const handleCustomTimePeriodClick = (event) => {
     event.preventDefault();
@@ -140,8 +139,8 @@ const PredefinedDates = ({
       const isWholeMonth = isDateRangeTheWholeMonth({
         startDate,
         endDate
-      });
-      const formattedText = isWholeMonth ? monthFormatter.format(startDate) : `${selectedDateFormatter.format(startDate)} – ${selectedDateFormatter.format(endDate)}`.trim();
+      }, 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" })
@@ -164,7 +163,8 @@ const DateRangePicker = ({
   openDirection = "right",
   placeholder = "start date – end date",
   predefinedDatesList,
-  responsivePositioning = true
+  responsivePositioning = true,
+  timezone = "system"
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedStartDate, setSelectedStartDate] = useState();
@@ -239,11 +239,11 @@ 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 }) }),
+    /* @__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 }),
-      shouldShowCustomRange && /* @__PURE__ */ jsx(CalendarRendererContainer, { $openDirection: calendarOpenDirection, ref: calendarContainerRef, children: /* @__PURE__ */ jsx(StyledCalendarRenderer, { calendarOptions, allowYearMonthSelection: false, selectedDate: selectedStartDate, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate }) }) })
-    ] }) : /* @__PURE__ */ jsx(CalendarRenderer, { calendarOptions, allowYearMonthSelection: false, selectedDate: selectedStartDate, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate }) }) })
+      /* @__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 }) }) })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.js","sources":["../../../../src/components/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import {\n  Dispatch,\n  KeyboardEvent,\n  MouseEvent,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { isSameDate, UseCalendarOptions } from '@h6s/calendar';\nimport { styled } from 'styled-components';\nimport { Dropdown } from '@/components/Dropdown';\nimport {\n  Body,\n  CalendarRenderer,\n  DateRangePickerInput,\n  DateTableCell,\n  StyledDropdownItem,\n} from './Common';\nimport { Container } from '@/components/Container';\nimport { Panel } from '@/components/Panel';\nimport { Icon } from '@/components/Icon';\nimport {\n  DateRange,\n  datesAreWithinMaxRange,\n  isDateRangeTheWholeMonth,\n  selectedDateFormatter,\n} from './utils';\n\ntype OpenDirection = 'left' | 'right';\n\nconst calendarWidth = 275;\n\nconst PredefinedCalendarContainer = styled(Panel)`\n  align-items: start;\n  background: ${({ theme }) => theme.click.panel.color.background.muted};\n`;\n\nconst PredefinedDatesContainer = styled(Container)`\n  width: ${calendarWidth}px;\n`;\n\n// left value of 276px is the width of the PredefinedDatesContainer + 1 pixel for border\nconst CalendarRendererContainer = styled.div<{ $openDirection?: OpenDirection }>`\n  border: ${({ theme }) =>\n    `${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.background.range}`};\n  border-radius: ${({ theme }) => theme.click.datePicker.dateOption.radii.default};\n  box-shadow:\n    lch(6.77 0 0 / 0.15) 4px 4px 6px -1px,\n    lch(6.77 0 0 / 0.15) 2px 2px 4px -1px;\n  ${({ $openDirection }) => ($openDirection === 'left' ? 'right: 100%;' : 'left: 276px;')}\n  position: absolute;\n  top: 0;\n`;\n\n// Height of 221px is height the height the calendar needs to match the PredefinedDatesContainer\nconst StyledCalendarRenderer = styled(CalendarRenderer)`\n  border-radius: ${({ theme }) => theme.click.datePicker.dateOption.radii.default};\n  min-height: 221px;\n`;\n\n// max-height of 210px allows the scrollable container to be a reasonble height that matches the calendar\nconst ScrollableContainer = styled(Container)`\n  max-height: 210px;\n  overflow-y: auto;\n`;\n\nconst DateRangeTableCell = styled(DateTableCell)<{\n  $shouldShowRangeIndicator?: boolean;\n}>`\n  ${({ $shouldShowRangeIndicator, theme }) =>\n    $shouldShowRangeIndicator &&\n    `\n    background: ${theme.click.datePicker.dateOption.color.background.range};\n    border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.background.range};\n    border-radius: 0;\n    `}\n`;\n\ninterface CalendarProps {\n  calendarBody: Body;\n  closeDatepicker: () => void;\n  futureDatesDisabled: boolean;\n  futureStartDatesDisabled: boolean;\n  maxRangeLength: number;\n  setSelectedDate: (selectedDate: Date) => void;\n  startDate?: Date;\n  endDate?: Date;\n}\n\nconst Calendar = ({\n  calendarBody,\n  closeDatepicker,\n  futureDatesDisabled,\n  futureStartDatesDisabled,\n  maxRangeLength,\n  setSelectedDate,\n  startDate,\n  endDate,\n}: CalendarProps) => {\n  const [hoveredDate, setHoveredDate] = useState<Date>();\n\n  const handleMouseOut = (): void => {\n    setHoveredDate(undefined);\n  };\n\n  return calendarBody.value.map(({ key: weekKey, value: week }) => {\n    return (\n      <tr key={weekKey}>\n        {week.map(({ date, isCurrentMonth, key: dayKey, value: fullDate }) => {\n          const today = new Date();\n          const isSelected =\n            (startDate && isSameDate(startDate, fullDate)) ||\n            (endDate && isSameDate(endDate, fullDate));\n          const isPresent = isSameDate(today, fullDate);\n\n          const isBetweenStartAndEndDates = Boolean(\n            startDate && endDate && fullDate > startDate && fullDate < endDate\n          );\n\n          let isDisabled = false;\n          if (futureDatesDisabled && fullDate > today) {\n            isDisabled = true;\n          }\n\n          if (futureStartDatesDisabled && !startDate && fullDate > today) {\n            isDisabled = true;\n          }\n\n          if (\n            maxRangeLength > 1 &&\n            startDate &&\n            !datesAreWithinMaxRange(startDate, fullDate, maxRangeLength)\n          ) {\n            isDisabled = true;\n          }\n\n          const shouldShowRangeIndicator =\n            !endDate &&\n            Boolean(\n              startDate && hoveredDate && fullDate > startDate && fullDate < hoveredDate\n            );\n\n          const handleMouseEnter = () => {\n            setHoveredDate(fullDate);\n          };\n\n          const handleClick = () => {\n            if (isDisabled) {\n              return false;\n            }\n            setSelectedDate(fullDate);\n\n            // User has a date range selected and clicked a new date.\n            // This will cause the selected date to be reset, thus do not close the datepicker.\n            if (startDate && endDate) {\n              return;\n            }\n\n            // The user has selected a new start date, don't close\n            if (startDate && fullDate < startDate) {\n              return;\n            }\n\n            // Only close the datepicker if the user hasn't clicked the selected start date.\n            if (startDate && !isSameDate(fullDate, startDate)) {\n              closeDatepicker();\n              return;\n            }\n          };\n          return (\n            <DateRangeTableCell\n              $shouldShowRangeIndicator={\n                !isSelected && (shouldShowRangeIndicator || isBetweenStartAndEndDates)\n              }\n              $isCurrentMonth={isCurrentMonth}\n              $isDisabled={isDisabled}\n              $isSelected={isSelected}\n              $isPresent={isPresent}\n              key={dayKey}\n              onClick={handleClick}\n              onMouseEnter={handleMouseEnter}\n              onMouseLeave={handleMouseOut}\n            >\n              {date}\n            </DateRangeTableCell>\n          );\n        })}\n      </tr>\n    );\n  });\n};\n\nconst locale = 'en-US';\nconst monthFormatter = new Intl.DateTimeFormat(locale, {\n  month: 'short',\n  year: 'numeric',\n});\n\ninterface PredefinedDatesProps {\n  onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;\n  predefinedDatesList: DateRange[];\n  selectedEndDate: Date | undefined;\n  selectedStartDate: Date | undefined;\n  setEndDate: Dispatch<SetStateAction<Date | undefined>>;\n  setStartDate: Dispatch<SetStateAction<Date | undefined>>;\n  shouldShowCustomRange: boolean;\n  showCustomDateRange: Dispatch<SetStateAction<boolean>>;\n}\n\nconst PredefinedDates = ({\n  onSelectDateRange,\n  predefinedDatesList,\n  selectedEndDate,\n  selectedStartDate,\n  setEndDate,\n  setStartDate,\n  shouldShowCustomRange,\n  showCustomDateRange,\n}: PredefinedDatesProps) => {\n  const handleCustomTimePeriodClick = (event: MouseEvent) => {\n    event.preventDefault();\n    showCustomDateRange(!shouldShowCustomRange);\n  };\n\n  return (\n    <PredefinedDatesContainer\n      data-testid=\"predefined-dates-list\"\n      isResponsive={false}\n      orientation=\"vertical\"\n    >\n      <ScrollableContainer orientation=\"vertical\">\n        {predefinedDatesList.map(({ startDate, endDate }) => {\n          const handleItemClick = () => {\n            setStartDate(startDate);\n            setEndDate(endDate);\n            onSelectDateRange(startDate, endDate);\n          };\n\n          const rangeIsSelected =\n            selectedEndDate &&\n            isSameDate(selectedEndDate, endDate) &&\n            selectedStartDate &&\n            isSameDate(selectedStartDate, startDate);\n\n          const isWholeMonth = isDateRangeTheWholeMonth({ startDate, endDate });\n\n          const formattedText = isWholeMonth\n            ? monthFormatter.format(startDate)\n            : `${selectedDateFormatter.format(\n                startDate\n              )} – ${selectedDateFormatter.format(endDate)}`.trim();\n\n          return (\n            <StyledDropdownItem\n              data-testid={`predefined-date-${startDate.getTime()}`}\n              key={startDate.toISOString()}\n              onClick={handleItemClick}\n            >\n              <Container\n                data-selected={rangeIsSelected}\n                data-testid={formattedText}\n                justifyContent=\"space-between\"\n                orientation=\"horizontal\"\n              >\n                {formattedText}\n                {rangeIsSelected && <Icon name=\"check\" />}\n              </Container>\n            </StyledDropdownItem>\n          );\n        })}\n      </ScrollableContainer>\n      <StyledDropdownItem onClick={handleCustomTimePeriodClick}>\n        <Container\n          justifyContent=\"space-between\"\n          orientation=\"horizontal\"\n        >\n          Custom time period <Icon name=\"chevron-right\" />\n        </Container>\n      </StyledDropdownItem>\n    </PredefinedDatesContainer>\n  );\n};\n\nexport interface DateRangePickerProps {\n  endDate?: Date;\n  disabled?: boolean;\n  futureDatesDisabled?: boolean;\n  futureStartDatesDisabled?: boolean;\n  onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;\n  openDirection?: OpenDirection;\n  placeholder?: string;\n  predefinedDatesList?: DateRange[];\n  maxRangeLength?: number;\n  startDate?: Date;\n  responsivePositioning?: boolean;\n}\n\nexport const DateRangePicker = ({\n  endDate,\n  startDate,\n  disabled = false,\n  futureDatesDisabled = false,\n  futureStartDatesDisabled = false,\n  maxRangeLength = -1,\n  onSelectDateRange,\n  openDirection = 'right',\n  placeholder = 'start date – end date',\n  predefinedDatesList,\n  responsivePositioning = true,\n}: DateRangePickerProps) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [selectedStartDate, setSelectedStartDate] = useState<Date>();\n  const [selectedEndDate, setSelectedEndDate] = useState<Date>();\n  const [shouldShowCustomRange, setShouldShowCustomRange] = useState<boolean>(false);\n  const [calendarOpenDirection, setCalendarOpenDirection] =\n    useState<OpenDirection>(openDirection);\n  const calendarContainerRef = useRef<HTMLDivElement>(null);\n\n  const calendarOptions: UseCalendarOptions = {};\n\n  // If a start date is selected, open the calendar to that date\n  if (selectedStartDate) {\n    calendarOptions.defaultDate = selectedStartDate;\n  }\n\n  useEffect(() => {\n    if (startDate) {\n      setSelectedStartDate(startDate);\n    }\n  }, [startDate]);\n\n  useEffect(() => {\n    if (endDate) {\n      setSelectedEndDate(endDate);\n    }\n  }, [endDate]);\n\n  useLayoutEffect(() => {\n    if (shouldShowCustomRange && calendarContainerRef.current) {\n      if (\n        calendarContainerRef.current.getBoundingClientRect().right > window.innerWidth\n      ) {\n        setCalendarOpenDirection('left');\n      }\n    }\n  }, [shouldShowCustomRange]);\n\n  const closeDatePicker = useCallback((): void => {\n    setIsOpen(false);\n    setShouldShowCustomRange(false);\n    setCalendarOpenDirection(openDirection);\n  }, [openDirection]);\n\n  const handleOpenChange = (isOpen: boolean): void => {\n    setIsOpen(isOpen);\n\n    if (!isOpen) {\n      setShouldShowCustomRange(false);\n      setCalendarOpenDirection(openDirection);\n    }\n  };\n\n  const handleSelectDate = useCallback(\n    (selectedDate: Date): void => {\n      // Start date and end date are selected, user clicks any date.\n      // Set start date to the selected date, clear the end date.\n      if (selectedStartDate && selectedEndDate) {\n        // If futureStartDatesDisabled is true, only set the selected date to the date clicked if it's before today\n        if (futureStartDatesDisabled && selectedDate > new Date()) {\n          setSelectedEndDate(undefined);\n          return;\n        }\n        setSelectedStartDate(selectedDate);\n        setSelectedEndDate(undefined);\n        return;\n      }\n\n      if (selectedStartDate) {\n        if (isSameDate(selectedStartDate, selectedDate)) {\n          // Start date is selected, user clicks start date.\n          // Reset the start date.\n          setSelectedStartDate(undefined);\n          return;\n        }\n\n        // Start date is selected, user clicks an earlier date.\n        // Set the earlier date to the new start date.\n        if (selectedDate < selectedStartDate) {\n          setSelectedStartDate(selectedDate);\n          return;\n        }\n\n        // Otherwise, set the end date to the date the user clicked.\n        setSelectedEndDate(selectedDate);\n        onSelectDateRange(selectedStartDate, selectedDate);\n        setShouldShowCustomRange(false);\n        return;\n      }\n\n      setSelectedStartDate(selectedDate);\n    },\n    [futureStartDatesDisabled, onSelectDateRange, selectedEndDate, selectedStartDate]\n  );\n\n  const onTriggerKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      setIsOpen(true);\n    }\n  }, []);\n\n  const shouldShowPredefinedDates =\n    predefinedDatesList !== undefined && predefinedDatesList.length > 0;\n\n  return (\n    <Dropdown\n      onOpenChange={handleOpenChange}\n      open={isOpen}\n    >\n      <Dropdown.Trigger\n        disabled={disabled}\n        onKeyDown={onTriggerKeyDown}\n      >\n        <DateRangePickerInput\n          data-testid=\"datepicker-input-container\"\n          disabled={disabled}\n          isActive={isOpen}\n          placeholder={placeholder}\n          selectedEndDate={selectedEndDate}\n          selectedStartDate={selectedStartDate}\n        />\n      </Dropdown.Trigger>\n      <Dropdown.Content\n        align=\"start\"\n        responsivePositioning={responsivePositioning}\n      >\n        {shouldShowPredefinedDates ? (\n          <PredefinedCalendarContainer\n            gap=\"none\"\n            orientation=\"horizontal\"\n            padding=\"none\"\n          >\n            <PredefinedDates\n              onSelectDateRange={onSelectDateRange}\n              predefinedDatesList={predefinedDatesList}\n              selectedEndDate={selectedEndDate}\n              selectedStartDate={selectedStartDate}\n              setEndDate={setSelectedEndDate}\n              setStartDate={setSelectedStartDate}\n              shouldShowCustomRange={shouldShowCustomRange}\n              showCustomDateRange={setShouldShowCustomRange}\n            />\n\n            {shouldShowCustomRange && (\n              <CalendarRendererContainer\n                $openDirection={calendarOpenDirection}\n                ref={calendarContainerRef}\n              >\n                <StyledCalendarRenderer\n                  calendarOptions={calendarOptions}\n                  allowYearMonthSelection={false}\n                  selectedDate={selectedStartDate}\n                >\n                  {(body: Body) => (\n                    <Calendar\n                      calendarBody={body}\n                      closeDatepicker={closeDatePicker}\n                      futureDatesDisabled={futureDatesDisabled}\n                      futureStartDatesDisabled={futureStartDatesDisabled}\n                      maxRangeLength={maxRangeLength}\n                      setSelectedDate={handleSelectDate}\n                      startDate={selectedStartDate}\n                      endDate={selectedEndDate}\n                    />\n                  )}\n                </StyledCalendarRenderer>\n              </CalendarRendererContainer>\n            )}\n          </PredefinedCalendarContainer>\n        ) : (\n          <CalendarRenderer\n            calendarOptions={calendarOptions}\n            allowYearMonthSelection={false}\n            selectedDate={selectedStartDate}\n          >\n            {(body: Body) => (\n              <Calendar\n                calendarBody={body}\n                closeDatepicker={closeDatePicker}\n                futureDatesDisabled={futureDatesDisabled}\n                futureStartDatesDisabled={futureStartDatesDisabled}\n                maxRangeLength={maxRangeLength}\n                setSelectedDate={handleSelectDate}\n                startDate={selectedStartDate}\n                endDate={selectedEndDate}\n              />\n            )}\n          </CalendarRenderer>\n        )}\n      </Dropdown.Content>\n    </Dropdown>\n  );\n};\n"],"names":["calendarWidth","PredefinedCalendarContainer","styled","Panel","withConfig","componentId","theme","click","panel","color","background","muted","PredefinedDatesContainer","Container","CalendarRendererContainer","div","datePicker","dateOption","stroke","range","radii","default","$openDirection","StyledCalendarRenderer","CalendarRenderer","ScrollableContainer","DateRangeTableCell","DateTableCell","$shouldShowRangeIndicator","Calendar","calendarBody","closeDatepicker","futureDatesDisabled","futureStartDatesDisabled","maxRangeLength","setSelectedDate","startDate","endDate","hoveredDate","setHoveredDate","useState","handleMouseOut","undefined","value","map","key","weekKey","week","date","isCurrentMonth","dayKey","fullDate","today","Date","isSelected","isSameDate","isPresent","isBetweenStartAndEndDates","Boolean","isDisabled","datesAreWithinMaxRange","shouldShowRangeIndicator","handleMouseEnter","handleClick","locale","monthFormatter","Intl","DateTimeFormat","month","year","PredefinedDates","onSelectDateRange","predefinedDatesList","selectedEndDate","selectedStartDate","setEndDate","setStartDate","shouldShowCustomRange","showCustomDateRange","handleCustomTimePeriodClick","event","preventDefault","handleItemClick","rangeIsSelected","isWholeMonth","isDateRangeTheWholeMonth","formattedText","format","selectedDateFormatter","trim","getTime","Icon","toISOString","DateRangePicker","disabled","openDirection","placeholder","responsivePositioning","isOpen","setIsOpen","setSelectedStartDate","setSelectedEndDate","setShouldShowCustomRange","calendarOpenDirection","setCalendarOpenDirection","calendarContainerRef","useRef","calendarOptions","defaultDate","useEffect","useLayoutEffect","current","getBoundingClientRect","right","window","innerWidth","closeDatePicker","useCallback","handleOpenChange","handleSelectDate","selectedDate","onTriggerKeyDown","e","shouldShowPredefinedDates","length","body"],"mappings":"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"}
+{"version":3,"file":"DateRangePicker.js","sources":["../../../../src/components/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import {\n  Dispatch,\n  KeyboardEvent,\n  MouseEvent,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { isSameDate, UseCalendarOptions } from '@h6s/calendar';\nimport { styled } from 'styled-components';\nimport { Dropdown } from '@/components/Dropdown';\nimport {\n  Body,\n  CalendarRenderer,\n  DateRangePickerInput,\n  DateTableCell,\n  StyledDropdownItem,\n} from './Common';\nimport { Container } from '@/components/Container';\nimport { Panel } from '@/components/Panel';\nimport { Icon } from '@/components/Icon';\nimport {\n  DateRange,\n  datesAreWithinMaxRange,\n  formatDateHeader,\n  formatSelectedDate,\n  shiftFromTimezone,\n  isDateRangeTheWholeMonth,\n  Timezone,\n  shiftToTimezone,\n} from './utils';\n\ntype OpenDirection = 'left' | 'right';\n\nconst calendarWidth = 275;\n\nconst PredefinedCalendarContainer = styled(Panel)`\n  align-items: start;\n  background: ${({ theme }) => theme.click.panel.color.background.muted};\n`;\n\nconst PredefinedDatesContainer = styled(Container)`\n  width: ${calendarWidth}px;\n`;\n\n// left value of 276px is the width of the PredefinedDatesContainer + 1 pixel for border\nconst CalendarRendererContainer = styled.div<{ $openDirection?: OpenDirection }>`\n  border: ${({ theme }) =>\n    `${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.background.range}`};\n  border-radius: ${({ theme }) => theme.click.datePicker.dateOption.radii.default};\n  box-shadow:\n    lch(6.77 0 0 / 0.15) 4px 4px 6px -1px,\n    lch(6.77 0 0 / 0.15) 2px 2px 4px -1px;\n  ${({ $openDirection }) => ($openDirection === 'left' ? 'right: 100%;' : 'left: 276px;')}\n  position: absolute;\n  top: 0;\n`;\n\n// Height of 221px is height the height the calendar needs to match the PredefinedDatesContainer\nconst StyledCalendarRenderer = styled(CalendarRenderer)`\n  border-radius: ${({ theme }) => theme.click.datePicker.dateOption.radii.default};\n  min-height: 221px;\n`;\n\n// max-height of 210px allows the scrollable container to be a reasonble height that matches the calendar\nconst ScrollableContainer = styled(Container)`\n  max-height: 210px;\n  overflow-y: auto;\n`;\n\nconst DateRangeTableCell = styled(DateTableCell)<{\n  $shouldShowRangeIndicator?: boolean;\n}>`\n  ${({ $shouldShowRangeIndicator, theme }) =>\n    $shouldShowRangeIndicator &&\n    `\n    background: ${theme.click.datePicker.dateOption.color.background.range};\n    border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.background.range};\n    border-radius: 0;\n    `}\n`;\n\ninterface CalendarProps {\n  calendarBody: Body;\n  closeDatepicker: () => void;\n  futureDatesDisabled: boolean;\n  futureStartDatesDisabled: boolean;\n  maxRangeLength: number;\n  setSelectedDate: (selectedDate: Date) => void;\n  startDate?: Date;\n  endDate?: Date;\n  timezone: Timezone;\n}\n\nconst Calendar = ({\n  calendarBody,\n  closeDatepicker,\n  futureDatesDisabled,\n  futureStartDatesDisabled,\n  maxRangeLength,\n  setSelectedDate,\n  startDate,\n  endDate,\n  timezone,\n}: CalendarProps) => {\n  const [hoveredDate, setHoveredDate] = useState<Date>();\n\n  const today = shiftToTimezone(new Date(), timezone);\n  const shiftedStart = startDate ? shiftToTimezone(startDate, timezone) : undefined;\n  const shiftedEnd = endDate ? shiftToTimezone(endDate, timezone) : undefined;\n\n  const handleMouseOut = (): void => {\n    setHoveredDate(undefined);\n  };\n\n  return calendarBody.value.map(({ key: weekKey, value: week }) => {\n    return (\n      <tr key={weekKey}>\n        {week.map(({ date, isCurrentMonth, key: dayKey, value: fullDate }) => {\n          const isSelected =\n            (shiftedStart && isSameDate(shiftedStart, fullDate)) ||\n            (shiftedEnd && isSameDate(shiftedEnd, fullDate));\n          const isPresent = isSameDate(today, fullDate);\n\n          const isBetweenStartAndEndDates = Boolean(\n            shiftedStart && shiftedEnd && fullDate > shiftedStart && fullDate < shiftedEnd\n          );\n\n          let isDisabled = false;\n          if (futureDatesDisabled && fullDate > today) {\n            isDisabled = true;\n          }\n\n          if (futureStartDatesDisabled && !shiftedStart && fullDate > today) {\n            isDisabled = true;\n          }\n\n          if (\n            maxRangeLength > 1 &&\n            shiftedStart &&\n            !datesAreWithinMaxRange(shiftedStart, fullDate, maxRangeLength)\n          ) {\n            isDisabled = true;\n          }\n\n          const shouldShowRangeIndicator =\n            !shiftedEnd &&\n            Boolean(\n              shiftedStart &&\n              hoveredDate &&\n              fullDate > shiftedStart &&\n              fullDate < hoveredDate\n            );\n\n          const handleMouseEnter = () => {\n            setHoveredDate(fullDate);\n          };\n\n          const handleClick = () => {\n            if (isDisabled) {\n              return false;\n            }\n            setSelectedDate(shiftFromTimezone(fullDate, timezone));\n\n            // User has a date range selected and clicked a new date.\n            // This will cause the selected date to be reset, thus do not close the datepicker.\n            if (shiftedStart && shiftedEnd) {\n              return;\n            }\n\n            // The user has selected a new start date, don't close\n            if (shiftedStart && fullDate < shiftedStart) {\n              return;\n            }\n\n            // Only close the datepicker if the user hasn't clicked the selected start date.\n            if (shiftedStart && !isSameDate(fullDate, shiftedStart)) {\n              closeDatepicker();\n              return;\n            }\n          };\n          return (\n            <DateRangeTableCell\n              $shouldShowRangeIndicator={\n                !isSelected && (shouldShowRangeIndicator || isBetweenStartAndEndDates)\n              }\n              $isCurrentMonth={isCurrentMonth}\n              $isDisabled={isDisabled}\n              $isSelected={isSelected}\n              $isPresent={isPresent}\n              key={dayKey}\n              onClick={handleClick}\n              onMouseEnter={handleMouseEnter}\n              onMouseLeave={handleMouseOut}\n            >\n              {date}\n            </DateRangeTableCell>\n          );\n        })}\n      </tr>\n    );\n  });\n};\n\ninterface PredefinedDatesProps {\n  onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;\n  predefinedDatesList: DateRange[];\n  selectedEndDate: Date | undefined;\n  selectedStartDate: Date | undefined;\n  setEndDate: Dispatch<SetStateAction<Date | undefined>>;\n  setStartDate: Dispatch<SetStateAction<Date | undefined>>;\n  shouldShowCustomRange: boolean;\n  showCustomDateRange: Dispatch<SetStateAction<boolean>>;\n  timezone: Timezone;\n}\n\nconst PredefinedDates = ({\n  onSelectDateRange,\n  predefinedDatesList,\n  selectedEndDate,\n  selectedStartDate,\n  setEndDate,\n  setStartDate,\n  shouldShowCustomRange,\n  showCustomDateRange,\n  timezone,\n}: PredefinedDatesProps) => {\n  const handleCustomTimePeriodClick = (event: MouseEvent) => {\n    event.preventDefault();\n    showCustomDateRange(!shouldShowCustomRange);\n  };\n\n  return (\n    <PredefinedDatesContainer\n      data-testid=\"predefined-dates-list\"\n      isResponsive={false}\n      orientation=\"vertical\"\n    >\n      <ScrollableContainer orientation=\"vertical\">\n        {predefinedDatesList.map(({ startDate, endDate }) => {\n          const handleItemClick = () => {\n            setStartDate(startDate);\n            setEndDate(endDate);\n            onSelectDateRange(startDate, endDate);\n          };\n\n          const rangeIsSelected =\n            selectedEndDate &&\n            isSameDate(selectedEndDate, endDate) &&\n            selectedStartDate &&\n            isSameDate(selectedStartDate, startDate);\n\n          const isWholeMonth = isDateRangeTheWholeMonth({ startDate, endDate }, timezone);\n\n          const formattedText = isWholeMonth\n            ? formatDateHeader(timezone, startDate)\n            : `${formatSelectedDate(timezone, startDate)} – ${formatSelectedDate(timezone, endDate)}`.trim();\n\n          return (\n            <StyledDropdownItem\n              data-testid={`predefined-date-${startDate.getTime()}`}\n              key={startDate.toISOString()}\n              onClick={handleItemClick}\n            >\n              <Container\n                data-selected={rangeIsSelected}\n                data-testid={formattedText}\n                justifyContent=\"space-between\"\n                orientation=\"horizontal\"\n              >\n                {formattedText}\n                {rangeIsSelected && <Icon name=\"check\" />}\n              </Container>\n            </StyledDropdownItem>\n          );\n        })}\n      </ScrollableContainer>\n      <StyledDropdownItem onClick={handleCustomTimePeriodClick}>\n        <Container\n          justifyContent=\"space-between\"\n          orientation=\"horizontal\"\n        >\n          Custom time period <Icon name=\"chevron-right\" />\n        </Container>\n      </StyledDropdownItem>\n    </PredefinedDatesContainer>\n  );\n};\n\nexport interface DateRangePickerProps {\n  endDate?: Date;\n  disabled?: boolean;\n  futureDatesDisabled?: boolean;\n  futureStartDatesDisabled?: boolean;\n  onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;\n  openDirection?: OpenDirection;\n  placeholder?: string;\n  predefinedDatesList?: DateRange[];\n  maxRangeLength?: number;\n  startDate?: Date;\n  responsivePositioning?: boolean;\n  timezone?: Timezone;\n}\n\nexport const DateRangePicker = ({\n  endDate,\n  startDate,\n  disabled = false,\n  futureDatesDisabled = false,\n  futureStartDatesDisabled = false,\n  maxRangeLength = -1,\n  onSelectDateRange,\n  openDirection = 'right',\n  placeholder = 'start date – end date',\n  predefinedDatesList,\n  responsivePositioning = true,\n  timezone = 'system',\n}: DateRangePickerProps) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [selectedStartDate, setSelectedStartDate] = useState<Date>();\n  const [selectedEndDate, setSelectedEndDate] = useState<Date>();\n  const [shouldShowCustomRange, setShouldShowCustomRange] = useState<boolean>(false);\n  const [calendarOpenDirection, setCalendarOpenDirection] =\n    useState<OpenDirection>(openDirection);\n  const calendarContainerRef = useRef<HTMLDivElement>(null);\n\n  const calendarOptions: UseCalendarOptions = {};\n\n  // If a start date is selected, open the calendar to that date\n  if (selectedStartDate) {\n    calendarOptions.defaultDate = selectedStartDate;\n  }\n\n  useEffect(() => {\n    if (startDate) {\n      setSelectedStartDate(startDate);\n    }\n  }, [startDate]);\n\n  useEffect(() => {\n    if (endDate) {\n      setSelectedEndDate(endDate);\n    }\n  }, [endDate]);\n\n  useLayoutEffect(() => {\n    if (shouldShowCustomRange && calendarContainerRef.current) {\n      if (\n        calendarContainerRef.current.getBoundingClientRect().right > window.innerWidth\n      ) {\n        setCalendarOpenDirection('left');\n      }\n    }\n  }, [shouldShowCustomRange]);\n\n  const closeDatePicker = useCallback((): void => {\n    setIsOpen(false);\n    setShouldShowCustomRange(false);\n    setCalendarOpenDirection(openDirection);\n  }, [openDirection]);\n\n  const handleOpenChange = (isOpen: boolean): void => {\n    setIsOpen(isOpen);\n\n    if (!isOpen) {\n      setShouldShowCustomRange(false);\n      setCalendarOpenDirection(openDirection);\n    }\n  };\n\n  const handleSelectDate = useCallback(\n    (selectedDate: Date): void => {\n      // Start date and end date are selected, user clicks any date.\n      // Set start date to the selected date, clear the end date.\n      if (selectedStartDate && selectedEndDate) {\n        // If futureStartDatesDisabled is true, only set the selected date to the date clicked if it's before today\n        if (futureStartDatesDisabled && selectedDate > new Date()) {\n          setSelectedEndDate(undefined);\n          return;\n        }\n        setSelectedStartDate(selectedDate);\n        setSelectedEndDate(undefined);\n        return;\n      }\n\n      if (selectedStartDate) {\n        if (isSameDate(selectedStartDate, selectedDate)) {\n          // Start date is selected, user clicks start date.\n          // Reset the start date.\n          setSelectedStartDate(undefined);\n          return;\n        }\n\n        // Start date is selected, user clicks an earlier date.\n        // Set the earlier date to the new start date.\n        if (selectedDate < selectedStartDate) {\n          setSelectedStartDate(selectedDate);\n          return;\n        }\n\n        // Otherwise, set the end date to the date the user clicked.\n        setSelectedEndDate(selectedDate);\n        onSelectDateRange(selectedStartDate, selectedDate);\n        setShouldShowCustomRange(false);\n        return;\n      }\n\n      setSelectedStartDate(selectedDate);\n    },\n    [futureStartDatesDisabled, onSelectDateRange, selectedEndDate, selectedStartDate]\n  );\n\n  const onTriggerKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      setIsOpen(true);\n    }\n  }, []);\n\n  const shouldShowPredefinedDates =\n    predefinedDatesList !== undefined && predefinedDatesList.length > 0;\n\n  return (\n    <Dropdown\n      onOpenChange={handleOpenChange}\n      open={isOpen}\n    >\n      <Dropdown.Trigger\n        disabled={disabled}\n        onKeyDown={onTriggerKeyDown}\n      >\n        <DateRangePickerInput\n          data-testid=\"datepicker-input-container\"\n          disabled={disabled}\n          isActive={isOpen}\n          placeholder={placeholder}\n          selectedEndDate={selectedEndDate}\n          selectedStartDate={selectedStartDate}\n          timezone={timezone}\n        />\n      </Dropdown.Trigger>\n      <Dropdown.Content\n        align=\"start\"\n        responsivePositioning={responsivePositioning}\n      >\n        {shouldShowPredefinedDates ? (\n          <PredefinedCalendarContainer\n            gap=\"none\"\n            orientation=\"horizontal\"\n            padding=\"none\"\n          >\n            <PredefinedDates\n              onSelectDateRange={onSelectDateRange}\n              predefinedDatesList={predefinedDatesList}\n              selectedEndDate={selectedEndDate}\n              selectedStartDate={selectedStartDate}\n              setEndDate={setSelectedEndDate}\n              setStartDate={setSelectedStartDate}\n              shouldShowCustomRange={shouldShowCustomRange}\n              showCustomDateRange={setShouldShowCustomRange}\n              timezone={timezone}\n            />\n\n            {shouldShowCustomRange && (\n              <CalendarRendererContainer\n                $openDirection={calendarOpenDirection}\n                ref={calendarContainerRef}\n              >\n                <StyledCalendarRenderer\n                  calendarOptions={calendarOptions}\n                  allowYearMonthSelection={false}\n                  selectedDate={selectedStartDate}\n                  timezone={timezone}\n                >\n                  {(body: Body) => (\n                    <Calendar\n                      calendarBody={body}\n                      closeDatepicker={closeDatePicker}\n                      futureDatesDisabled={futureDatesDisabled}\n                      futureStartDatesDisabled={futureStartDatesDisabled}\n                      maxRangeLength={maxRangeLength}\n                      setSelectedDate={handleSelectDate}\n                      startDate={selectedStartDate}\n                      endDate={selectedEndDate}\n                      timezone={timezone}\n                    />\n                  )}\n                </StyledCalendarRenderer>\n              </CalendarRendererContainer>\n            )}\n          </PredefinedCalendarContainer>\n        ) : (\n          <CalendarRenderer\n            calendarOptions={calendarOptions}\n            allowYearMonthSelection={false}\n            selectedDate={selectedStartDate}\n            timezone={timezone}\n          >\n            {(body: Body) => (\n              <Calendar\n                calendarBody={body}\n                closeDatepicker={closeDatePicker}\n                futureDatesDisabled={futureDatesDisabled}\n                futureStartDatesDisabled={futureStartDatesDisabled}\n                maxRangeLength={maxRangeLength}\n                setSelectedDate={handleSelectDate}\n                startDate={selectedStartDate}\n                endDate={selectedEndDate}\n                timezone={timezone}\n              />\n            )}\n          </CalendarRenderer>\n        )}\n      </Dropdown.Content>\n    </Dropdown>\n  );\n};\n"],"names":["calendarWidth","PredefinedCalendarContainer","styled","Panel","withConfig","componentId","theme","click","panel","color","background","muted","PredefinedDatesContainer","Container","CalendarRendererContainer","div","datePicker","dateOption","stroke","range","radii","default","$openDirection","StyledCalendarRenderer","CalendarRenderer","ScrollableContainer","DateRangeTableCell","DateTableCell","$shouldShowRangeIndicator","Calendar","calendarBody","closeDatepicker","futureDatesDisabled","futureStartDatesDisabled","maxRangeLength","setSelectedDate","startDate","endDate","timezone","hoveredDate","setHoveredDate","useState","today","shiftToTimezone","Date","shiftedStart","undefined","shiftedEnd","handleMouseOut","value","map","key","weekKey","week","date","isCurrentMonth","dayKey","fullDate","isSelected","isSameDate","isPresent","isBetweenStartAndEndDates","Boolean","isDisabled","datesAreWithinMaxRange","shouldShowRangeIndicator","handleMouseEnter","handleClick","shiftFromTimezone","PredefinedDates","onSelectDateRange","predefinedDatesList","selectedEndDate","selectedStartDate","setEndDate","setStartDate","shouldShowCustomRange","showCustomDateRange","handleCustomTimePeriodClick","event","preventDefault","handleItemClick","rangeIsSelected","isWholeMonth","isDateRangeTheWholeMonth","formattedText","formatDateHeader","formatSelectedDate","trim","getTime","Icon","toISOString","DateRangePicker","disabled","openDirection","placeholder","responsivePositioning","isOpen","setIsOpen","setSelectedStartDate","setSelectedEndDate","setShouldShowCustomRange","calendarOpenDirection","setCalendarOpenDirection","calendarContainerRef","useRef","calendarOptions","defaultDate","useEffect","useLayoutEffect","current","getBoundingClientRect","right","window","innerWidth","closeDatePicker","useCallback","handleOpenChange","handleSelectDate","selectedDate","onTriggerKeyDown","e","shouldShowPredefinedDates","length","body"],"mappings":"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"}

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

@@ -7,7 +7,7 @@ import { DateTimeRangePickerInput, StyledDropdownItem, CalendarRenderer, DateTab
 import { Container } from '../Container/index.js';
 import { Panel } from '../Panel/index.js';
 import { Icon as SvgImage } from '../Icon/index.js';
-import { datesAreWithinMaxRange } from './utils.js';
+import { shiftToTimezone, datesAreWithinMaxRange, shiftFromTimezone } from './utils.js';
 import '../../utils/date.js';
 import { Tabs } from '../Tabs/index.js';
 import { ButtonGroup } from '../ButtonGroup/index.js';
@@ -69,9 +69,13 @@ const Calendar = ({
   maxRangeLength,
   setSelectedDate,
   startDate,
-  endDate
+  endDate,
+  timezone
 }) => {
   const [hoveredDate, setHoveredDate] = useState();
+  const today = shiftToTimezone(/* @__PURE__ */ new Date(), timezone);
+  const shiftedStart = startDate ? shiftToTimezone(startDate, timezone) : void 0;
+  const shiftedEnd = endDate ? shiftToTimezone(endDate, timezone) : void 0;
   const handleMouseOut = () => {
     setHoveredDate(void 0);
   };
@@ -85,10 +89,9 @@ const Calendar = ({
       key: dayKey,
       value: fullDate
     }) => {
-      const isSelected = startDate && isSameDate(startDate, fullDate) || endDate && isSameDate(endDate, fullDate);
-      const today = /* @__PURE__ */ new Date();
+      const isSelected = shiftedStart && isSameDate(shiftedStart, fullDate) || shiftedEnd && isSameDate(shiftedEnd, fullDate);
       const isCurrentDate = isSameDate(today, fullDate);
-      const isBetweenStartAndEndDates = Boolean(startDate && endDate && fullDate > startDate && fullDate < endDate);
+      const isBetweenStartAndEndDates = Boolean(shiftedStart && shiftedEnd && fullDate > shiftedStart && fullDate < shiftedEnd);
       let isDisabled = false;
       if (futureDatesDisabled && fullDate > today) {
         isDisabled = true;
@@ -96,17 +99,17 @@ const Calendar = ({
       if (futureStartDatesDisabled && calendarType === "startDate" && fullDate > today) {
         isDisabled = true;
       }
-      if (maxRangeLength > 1 && startDate && !datesAreWithinMaxRange(startDate, fullDate, maxRangeLength)) {
+      if (maxRangeLength > 1 && shiftedStart && !datesAreWithinMaxRange(shiftedStart, fullDate, maxRangeLength)) {
         isDisabled = true;
       }
-      if (calendarType === "endDate" && startDate && startDate > fullDate && !isSameDate(startDate, fullDate)) {
+      if (calendarType === "endDate" && !shiftedEnd && shiftedStart && shiftedStart > fullDate && !isSameDate(shiftedStart, fullDate)) {
         isDisabled = true;
       }
-      if (calendarType === "startDate" && !startDate && endDate && fullDate > endDate) {
+      if (calendarType === "startDate" && !shiftedStart && shiftedEnd && fullDate > shiftedEnd) {
         isDisabled = true;
       }
-      const startDateSelectedAndIsSelectingEndDate = calendarType === "endDate" && !endDate && Boolean(startDate && hoveredDate && fullDate > startDate && fullDate < hoveredDate);
-      const endDateSelectedAndIsSelectingStartDate = calendarType === "startDate" && !startDate && Boolean(endDate && hoveredDate && fullDate < endDate && fullDate > hoveredDate);
+      const startDateSelectedAndIsSelectingEndDate = calendarType === "endDate" && !shiftedEnd && Boolean(shiftedStart && hoveredDate && fullDate > shiftedStart && fullDate < hoveredDate);
+      const endDateSelectedAndIsSelectingStartDate = calendarType === "startDate" && !shiftedStart && Boolean(shiftedEnd && hoveredDate && fullDate < shiftedEnd && fullDate > hoveredDate);
       const shouldShowRangeIndicator = startDateSelectedAndIsSelectingEndDate || endDateSelectedAndIsSelectingStartDate;
       const handleMouseEnter = () => {
         setHoveredDate(fullDate);
@@ -115,17 +118,30 @@ const Calendar = ({
         if (isDisabled) {
           return false;
         }
+        const originalFullDate = shiftFromTimezone(fullDate, timezone);
         if (calendarType === "startDate" && startDate) {
-          fullDate.setHours(startDate.getHours());
-          fullDate.setMinutes(startDate.getMinutes());
-          fullDate.setSeconds(startDate.getSeconds());
+          if (timezone === "UTC") {
+            originalFullDate.setUTCHours(startDate.getUTCHours());
+            originalFullDate.setUTCMinutes(startDate.getUTCMinutes());
+            originalFullDate.setUTCSeconds(startDate.getUTCSeconds());
+          } else {
+            originalFullDate.setHours(startDate.getHours());
+            originalFullDate.setMinutes(startDate.getMinutes());
+            originalFullDate.setSeconds(startDate.getSeconds());
+          }
         }
         if (calendarType === "endDate" && endDate) {
-          fullDate.setHours(endDate.getHours());
-          fullDate.setMinutes(endDate.getMinutes());
-          fullDate.setSeconds(endDate.getSeconds());
+          if (timezone === "UTC") {
+            originalFullDate.setUTCHours(endDate.getUTCHours());
+            originalFullDate.setUTCMinutes(endDate.getUTCMinutes());
+            originalFullDate.setUTCSeconds(endDate.getUTCSeconds());
+          } else {
+            originalFullDate.setHours(endDate.getHours());
+            originalFullDate.setMinutes(endDate.getMinutes());
+            originalFullDate.setSeconds(endDate.getSeconds());
+          }
         }
-        setSelectedDate(fullDate, calendarType);
+        setSelectedDate(originalFullDate, calendarType);
       };
       return /* @__PURE__ */ jsx(DateRangeTableCell, { $shouldShowRangeIndicator: shouldShowRangeIndicator || isBetweenStartAndEndDates, $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isPresent: isCurrentDate, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseOut, children: date }, dayKey);
     }) }, weekKey);
@@ -234,9 +250,10 @@ const validTimeRegex = /^\d{1,2}(:\d{1,2}(:\d{1,2})?)?$/;
 const TimeInput = ({
   date,
   setDate,
-  shouldShowSeconds
+  shouldShowSeconds,
+  timezone
 }) => {
-  let dayjsDate = dayjs(date);
+  let dayjsDate = timezone === "UTC" ? dayjs.utc(date) : dayjs(date);
   if (!date) {
     dayjsDate = dayjsDate.hour(12).minute(0);
   }
@@ -335,7 +352,8 @@ const TabbedCalendar = ({
   setSelectedDate,
   setStartDate,
   shouldShowSeconds,
-  startDate
+  startDate,
+  timezone
 }) => {
   const [activeTab, setActiveTab] = useState(defaultActiveTab);
   useEffect(() => {
@@ -366,12 +384,12 @@ const TabbedCalendar = ({
       /* @__PURE__ */ jsx(Tabs.Trigger, { value: "endDate", "data-testid": "tabbed-calendar-trigger-end", children: "End date" })
     ] }),
     /* @__PURE__ */ jsxs(Tabs.Content, { value: "startDate", children: [
-      /* @__PURE__ */ jsx(StyledCalendarRenderer, { calendarOptions: startDateCalendarOptions, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, calendarType: "startDate", endDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate, startDate }) }),
-      /* @__PURE__ */ jsx(TimeInput, { date: startDate, setDate: handleSetStartDate, shouldShowSeconds })
+      /* @__PURE__ */ jsx(StyledCalendarRenderer, { calendarOptions: startDateCalendarOptions, timezone, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, calendarType: "startDate", endDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate, startDate, timezone }) }),
+      /* @__PURE__ */ jsx(TimeInput, { date: startDate, setDate: handleSetStartDate, shouldShowSeconds, timezone })
     ] }),
     /* @__PURE__ */ jsxs(Tabs.Content, { value: "endDate", children: [
-      /* @__PURE__ */ jsx(StyledCalendarRenderer, { calendarOptions: endDateCalendarOptions, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, calendarType: "endDate", endDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate, startDate }) }),
-      /* @__PURE__ */ jsx(TimeInput, { date: endDate, setDate: handleSetEndDate, shouldShowSeconds })
+      /* @__PURE__ */ jsx(StyledCalendarRenderer, { calendarOptions: endDateCalendarOptions, timezone, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, calendarType: "endDate", endDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate, startDate, timezone }) }),
+      /* @__PURE__ */ jsx(TimeInput, { date: endDate, setDate: handleSetEndDate, shouldShowSeconds, timezone })
     ] })
   ] });
 };
@@ -388,7 +406,8 @@ const DateTimeRangePicker = ({
   placeholder = "start date – end date",
   predefinedTimesList,
   shouldShowSeconds,
-  startDate
+  startDate,
+  timezone = "system"
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedStartDate, setSelectedStartDate] = useState();
@@ -397,21 +416,35 @@ const DateTimeRangePicker = ({
   const [calendarOpenDirection, setCalendarOpenDirection] = useState(openDirection);
   const calendarContainerRef = useRef(null);
   useEffect(() => {
-    if (startDate) {
-      if (startDate.getHours() === 0) {
-        startDate.setHours(12);
+    if (!startDate) {
+      return;
+    }
+    const startDateCopy = new Date(startDate);
+    const hours = timezone === "UTC" ? startDateCopy.getUTCHours() : startDateCopy.getHours();
+    if (hours === 0) {
+      if (timezone === "UTC") {
+        startDateCopy.setUTCHours(12);
+      } else {
+        startDateCopy.setHours(12);
       }
-      setSelectedStartDate(startDate);
     }
-  }, [startDate]);
+    setSelectedStartDate(startDateCopy);
+  }, [startDate, timezone]);
   useEffect(() => {
-    if (endDate) {
-      if (endDate.getHours() === 0) {
-        endDate.setHours(12);
+    if (!endDate) {
+      return;
+    }
+    const endDateCopy = new Date(endDate);
+    const hours = timezone === "UTC" ? endDateCopy.getUTCHours() : endDateCopy.getHours();
+    if (hours === 0) {
+      if (timezone === "UTC") {
+        endDateCopy.setUTCHours(12);
+      } else {
+        endDateCopy.setHours(12);
       }
-      setSelectedEndDate(endDate);
     }
-  }, [endDate]);
+    setSelectedEndDate(endDateCopy);
+  }, [endDate, timezone]);
   useLayoutEffect(() => {
     if (shouldShowCustomRange && calendarContainerRef.current) {
       const rect = calendarContainerRef.current.getBoundingClientRect();
@@ -433,8 +466,13 @@ const DateTimeRangePicker = ({
     }
   }, []);
   const handleSelectDate = useCallback((selectedDate, calendarType) => {
-    if (selectedDate.getHours() === 0 && selectedDate.getMinutes() === 0 && selectedDate.getSeconds() === 0) {
-      selectedDate.setHours(12);
+    const isMidnight = timezone === "UTC" ? selectedDate.getUTCHours() === 0 && selectedDate.getUTCMinutes() === 0 && selectedDate.getUTCSeconds() === 0 : selectedDate.getHours() === 0 && selectedDate.getMinutes() === 0 && selectedDate.getSeconds() === 0;
+    if (isMidnight) {
+      if (timezone === "UTC") {
+        selectedDate.setUTCHours(12);
+      } else {
+        selectedDate.setHours(12);
+      }
     }
     if (calendarType === "startDate") {
       setSelectedStartDate(selectedDate);
@@ -454,7 +492,7 @@ const DateTimeRangePicker = ({
         }
       }
     }
-  }, [onSelectDateRange, selectedEndDate, selectedStartDate]);
+  }, [closeDatePicker, closeOnDateRangeSelected, onSelectDateRange, selectedEndDate, selectedStartDate, timezone]);
   const onTriggerKeyDown = useCallback((e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
@@ -463,11 +501,11 @@ const DateTimeRangePicker = ({
   }, []);
   const shouldShowPredefinedTimes = predefinedTimesList !== void 0 && predefinedTimesList.length > 0;
   return /* @__PURE__ */ jsxs(Dropdown, { onOpenChange: handleOpenChange, open: isOpen, children: [
-    /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, onKeyDown: onTriggerKeyDown, children: /* @__PURE__ */ jsx(DateTimeRangePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedEndDate, selectedStartDate, shouldShowSeconds }) }),
+    /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, onKeyDown: onTriggerKeyDown, children: /* @__PURE__ */ jsx(DateTimeRangePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedEndDate, selectedStartDate, shouldShowSeconds, timezone }) }),
     /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsx(Container, { orientation: "horizontal", children: shouldShowPredefinedTimes ? /* @__PURE__ */ jsxs(PredefinedCalendarContainer, { gap: "none", orientation: "horizontal", padding: "none", children: [
       /* @__PURE__ */ jsx(PredefinedTimes, { onSelectDateRange, predefinedTimesList, selectedEndDate, selectedStartDate, setEndDate: setSelectedEndDate, setStartDate: setSelectedStartDate, shouldShowCustomRange, showCustomDateRange: setShouldShowCustomRange }),
-      shouldShowCustomRange && /* @__PURE__ */ jsx(CalendarRendererContainer, { $openDirection: calendarOpenDirection, ref: calendarContainerRef, children: /* @__PURE__ */ jsx(TabbedCalendar, { defaultActiveTab, endDate: selectedEndDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setEndDate: setSelectedEndDate, setSelectedDate: handleSelectDate, setStartDate: setSelectedStartDate, shouldShowSeconds: Boolean(shouldShowSeconds), startDate: selectedStartDate }) })
-    ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(TabbedCalendar, { defaultActiveTab, endDate: selectedEndDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setEndDate: setSelectedEndDate, setSelectedDate: handleSelectDate, setStartDate: setSelectedStartDate, shouldShowSeconds: Boolean(shouldShowSeconds), startDate: selectedStartDate }) }) }) })
+      shouldShowCustomRange && /* @__PURE__ */ jsx(CalendarRendererContainer, { $openDirection: calendarOpenDirection, ref: calendarContainerRef, children: /* @__PURE__ */ jsx(TabbedCalendar, { defaultActiveTab, endDate: selectedEndDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setEndDate: setSelectedEndDate, setSelectedDate: handleSelectDate, setStartDate: setSelectedStartDate, shouldShowSeconds: Boolean(shouldShowSeconds), startDate: selectedStartDate, timezone }) })
+    ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(TabbedCalendar, { defaultActiveTab, endDate: selectedEndDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setEndDate: setSelectedEndDate, setSelectedDate: handleSelectDate, setStartDate: setSelectedStartDate, shouldShowSeconds: Boolean(shouldShowSeconds), startDate: selectedStartDate, timezone }) }) }) })
   ] });
 };