@clickhouse/click-ui 0.8.0 → 1.0.0-rc2

package/dist/cjs/components/DatePicker/DateTimeRangePicker.cjs

@@ -1,3 +1,4 @@
+require("./DateTimeRangePicker.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,7 +6,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const calendar = require('@h6s/calendar');
-const styledComponents = require('styled-components');
 const Dropdown = require('../Dropdown/index.cjs');
 const Common = require('./Common.cjs');
 const Container = require('../Container/index.cjs');
@@ -16,8 +16,11 @@ require('../../utils/date.cjs');
 const Tabs = require('../Tabs/index.cjs');
 const ButtonGroup = require('../ButtonGroup/index.cjs');
 const Label = require('../Label/index.cjs');
+const cva = require('../../lib/cva.cjs');
+const DateTimeRangePicker_module = require('./DateTimeRangePicker.module.css.cjs');
 const Text = require('../Text/index.cjs');
 const TextField = require('../TextField/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 const dayjs = require('dayjs');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
@@ -25,59 +28,167 @@ const _interopDefault = e => e && e.__esModule ? e : { default: e };
 const dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 
 const calendarFullWidth = "258px";
-const PredefinedCalendarContainer = styledComponents.styled(Panel.Panel).withConfig({
-  componentId: "sc-vcr4us-0"
-})(["align-items:start;background:", ";"], ({
-  theme
-}) => theme.click.panel.color.background.muted);
-const PredefinedTimesContainer = styledComponents.styled(Container.Container).withConfig({
-  componentId: "sc-vcr4us-1"
-})(["width:", ";"], calendarFullWidth);
-const CalendarRendererContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-vcr4us-2"
-})(["background:", ";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.color.background.default}`, ({
-  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: 259px;");
-const NoOverflowDropdownContent = styledComponents.styled(Dropdown.Dropdown.Content).withConfig({
-  componentId: "sc-vcr4us-3"
-})(["overflow-y:hidden;"]);
-const StyledCalendarRenderer = styledComponents.styled(Common.CalendarRenderer).withConfig({
-  componentId: "sc-vcr4us-4"
-})(["border-radius:", ";min-height:221px;"], ({
-  theme
-}) => theme.click.datePicker.dateOption.radii.default);
-const BottomPaddingTabs = styledComponents.styled(Tabs.Tabs).withConfig({
-  componentId: "sc-vcr4us-5"
-})(["padding-bottom:", ";"], ({
-  theme
-}) => `${theme.sizes[3]};`);
-const StyledTriggerList = styledComponents.styled(Tabs.Tabs.TriggersList).withConfig({
-  componentId: "sc-vcr4us-6"
-})(["justify-content:space-around;"]);
-const ScrollableContainer = styledComponents.styled(Container.Container).withConfig({
-  componentId: "sc-vcr4us-7"
-})(["max-height:210px;overflow-y:auto;"]);
-const TimeInputContainer = styledComponents.styled(Container.Container).withConfig({
-  componentId: "sc-vcr4us-8"
-})(["background:", ";"], ({
-  theme
-}) => theme.click.datePicker.dateOption.color.background.default);
-const DateRangeTableCell = styledComponents.styled(Common.DateTableCell).withConfig({
-  componentId: "sc-vcr4us-9"
-})(["", ""], ({
-  $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__ */ jsxRuntime.jsx(
+  Panel.Panel,
+  {
+    gap,
+    orientation,
+    padding,
+    className: cva.cn(DateTimeRangePicker_module.default["predefined-calendar-container"], className),
+    children
+  }
+);
+const PredefinedTimesContainer = ({
+  className,
+  children,
+  isResponsive,
+  orientation,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  Container.Container,
+  {
+    isResponsive,
+    orientation,
+    "data-testid": dataTestId,
+    className: cva.cn(DateTimeRangePicker_module.default["predefined-times-container"], className),
+    children
+  }
+);
+const calendarRendererContainerVariants = classVarianceAuthority.cva(DateTimeRangePicker_module.default["calendar-renderer-container"], {
+  variants: {
+    openDirection: {
+      left: DateTimeRangePicker_module.default["calendar-renderer-container_left"],
+      right: DateTimeRangePicker_module.default["calendar-renderer-container_right"]
+    }
+  },
+  defaultVariants: { openDirection: "right" }
+});
+const CalendarRendererContainer = react.forwardRef(({ openDirection, children }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: calendarRendererContainerVariants({ openDirection }),
+    children
+  }
+));
+CalendarRendererContainer.displayName = "CalendarRendererContainer";
+const NoOverflowDropdownContent = ({
+  className,
+  children,
+  align,
+  responsivePositioning
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  Dropdown.Dropdown.Content,
+  {
+    align,
+    responsivePositioning,
+    className: cva.cn(DateTimeRangePicker_module.default["no-overflow-dropdown-content"], className),
+    children
+  }
+);
+const StyledCalendarRenderer = ({
+  className,
+  children,
+  calendarOptions,
+  timezone
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  Common.CalendarRenderer,
+  {
+    calendarOptions,
+    timezone,
+    className: cva.cn(DateTimeRangePicker_module.default["styled-calendar-renderer"], className),
+    children
+  }
+);
+const BottomPaddingTabs = ({
+  className,
+  children,
+  onValueChange,
+  value
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  Tabs.Tabs,
+  {
+    onValueChange,
+    value,
+    className: cva.cn(DateTimeRangePicker_module.default["bottom-padding-tabs"], className),
+    children
+  }
+);
+const StyledTriggerList = ({
+  className,
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(Tabs.Tabs.TriggersList, { className: cva.cn(DateTimeRangePicker_module.default["styled-trigger-list"], className), children });
+const ScrollableContainer = ({
+  className,
+  children,
+  orientation
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  Container.Container,
+  {
+    orientation,
+    className: cva.cn(DateTimeRangePicker_module.default["scrollable-container"], className),
+    children
+  }
+);
+const TimeInputContainer = ({
+  className,
+  children,
+  gap,
+  padding,
+  maxWidth,
+  orientation,
+  justifyContent
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  Container.Container,
+  {
+    gap,
+    padding,
+    maxWidth,
+    orientation,
+    justifyContent,
+    className: cva.cn(DateTimeRangePicker_module.default["time-input-container"], className),
+    children
+  }
+);
+const dateRangeTableCellVariants = classVarianceAuthority.cva(void 0, {
+  variants: {
+    showRangeIndicator: { true: DateTimeRangePicker_module.default["date-range-table-cell_indicator"] }
+  }
+});
+const DateRangeTableCell = ({
+  shouldShowRangeIndicator,
+  className,
+  children,
+  isCurrentMonth,
+  isDisabled,
+  isSelected,
+  isPresent,
+  onClick,
+  onMouseEnter,
+  onMouseLeave
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  Common.DateTableCell,
+  {
+    isCurrentMonth,
+    isDisabled,
+    isSelected,
+    isPresent,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    className: cva.cn(
+      dateRangeTableCellVariants({ showRangeIndicator: shouldShowRangeIndicator }),
+      className
+    ),
+    children
+  }
+);
 const Calendar = ({
   calendarBody,
   calendarType,
@@ -96,19 +207,13 @@ const Calendar = ({
   const handleMouseOut = () => {
     setHoveredDate(void 0);
   };
-  return calendarBody.value.map(({
-    key: weekKey,
-    value: week
-  }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({
-      date,
-      isCurrentMonth,
-      key: dayKey,
-      value: fullDate
-    }) => {
+  return calendarBody.value.map(({ key: weekKey, value: week }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({ date, isCurrentMonth, key: dayKey, value: fullDate }) => {
       const isSelected = shiftedStart && calendar.isSameDate(shiftedStart, fullDate) || shiftedEnd && calendar.isSameDate(shiftedEnd, fullDate);
       const isCurrentDate = calendar.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;
@@ -125,8 +230,12 @@ const Calendar = ({
       if (calendarType === "startDate" && !shiftedStart && shiftedEnd && fullDate > shiftedEnd) {
         isDisabled = true;
       }
-      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 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);
@@ -160,7 +269,21 @@ const Calendar = ({
         }
         setSelectedDate(originalFullDate, calendarType);
       };
-      return /* @__PURE__ */ jsxRuntime.jsx(DateRangeTableCell, { $shouldShowRangeIndicator: shouldShowRangeIndicator || isBetweenStartAndEndDates, $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isPresent: isCurrentDate, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseOut, children: date }, dayKey);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DateRangeTableCell,
+        {
+          shouldShowRangeIndicator: shouldShowRangeIndicator || isBetweenStartAndEndDates,
+          isCurrentMonth,
+          isDisabled,
+          isSelected: Boolean(isSelected),
+          isPresent: isCurrentDate,
+          onClick: handleClick,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseOut,
+          children: date
+        },
+        dayKey
+      );
     }) }, weekKey);
   });
 };
@@ -178,48 +301,68 @@ const PredefinedTimes = ({
     event.preventDefault();
     showCustomDateRange(!shouldShowCustomRange);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(PredefinedTimesContainer, { "data-testid": "predefined-times-list", isResponsive: false, orientation: "vertical", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { orientation: "vertical", children: predefinedTimesList.map(({
-      dateRange: {
-        startDate,
-        endDate
-      },
-      label
-    }) => {
-      const handleItemClick = () => {
-        setStartDate(startDate);
-        setEndDate(endDate);
-        onSelectDateRange(startDate, endDate, label);
-      };
-      const rangeIsSelected = selectedEndDate && selectedEndDate.getTime() === endDate.getTime() && selectedStartDate && selectedStartDate.getTime() === startDate.getTime();
-      return /* @__PURE__ */ jsxRuntime.jsx(Common.StyledDropdownItem, { "data-testid": `predefined-date-${startDate.getTime()}`, onClick: handleItemClick, children: /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { "data-selected": rangeIsSelected, "data-testid": label, justifyContent: "space-between", orientation: "horizontal", children: [
-        label,
-        rangeIsSelected && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "check" })
-      ] }) }, startDate.toISOString());
-    }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Common.StyledDropdownItem, { onClick: handleCustomTimePeriodClick, children: /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { justifyContent: "space-between", orientation: "horizontal", children: [
-      "Custom time period ",
-      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right" })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    PredefinedTimesContainer,
+    {
+      "data-testid": "predefined-times-list",
+      isResponsive: false,
+      orientation: "vertical",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { orientation: "vertical", children: predefinedTimesList.map(({ dateRange: { startDate, endDate }, label }) => {
+          const handleItemClick = () => {
+            setStartDate(startDate);
+            setEndDate(endDate);
+            onSelectDateRange(startDate, endDate, label);
+          };
+          const rangeIsSelected = selectedEndDate && selectedEndDate.getTime() === endDate.getTime() && selectedStartDate && selectedStartDate.getTime() === startDate.getTime();
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Common.StyledDropdownItem,
+            {
+              "data-testid": `predefined-date-${startDate.getTime()}`,
+              onClick: handleItemClick,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Container.Container,
+                {
+                  "data-selected": rangeIsSelected,
+                  "data-testid": label,
+                  justifyContent: "space-between",
+                  orientation: "horizontal",
+                  children: [
+                    label,
+                    rangeIsSelected && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "check" })
+                  ]
+                }
+              )
+            },
+            startDate.toISOString()
+          );
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Common.StyledDropdownItem, { onClick: handleCustomTimePeriodClick, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Container.Container,
+          {
+            justifyContent: "space-between",
+            orientation: "horizontal",
+            children: [
+              "Custom time period ",
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 };
 const parseTimeString = (timeString) => {
   if (!validTimeRegex.test(timeString)) {
-    return {
-      isValid: false
-    };
+    return { isValid: false };
   }
   const [hours, minutes, seconds] = timeString.split(":");
   const hoursAsNumber = parseInt(hours, 10);
   if (Number.isNaN(hoursAsNumber)) {
-    return {
-      isValid: false
-    };
+    return { isValid: false };
   }
   if (hoursAsNumber > 23 || hoursAsNumber < 0) {
-    return {
-      isValid: false
-    };
+    return { isValid: false };
   }
   let parsedDate;
   if (!minutes) {
@@ -227,49 +370,31 @@ const parseTimeString = (timeString) => {
   } else {
     const minutesAsNumber = parseInt(minutes, 10);
     if (Number.isNaN(minutesAsNumber)) {
-      return {
-        isValid: false
-      };
+      return { isValid: false };
     }
     if (minutesAsNumber > 59 || minutesAsNumber < 0) {
-      return {
-        isValid: false
-      };
+      return { isValid: false };
     }
     if (!seconds) {
       parsedDate = dayjs__default.default(`${hours}:${minutes}`, "h:mm");
     } else {
       const secondsAsNumber = parseInt(seconds, 10);
       if (Number.isNaN(secondsAsNumber)) {
-        return {
-          isValid: false
-        };
+        return { isValid: false };
       }
       if (secondsAsNumber > 59 || secondsAsNumber < 0) {
-        return {
-          isValid: false
-        };
+        return { isValid: false };
       }
       parsedDate = dayjs__default.default(`${hours}:${minutes}:${seconds}`, "h:mm:ss");
     }
   }
   if (!parsedDate.isValid()) {
-    return {
-      isValid: false
-    };
+    return { isValid: false };
   }
-  return {
-    isValid: true,
-    parsedDate
-  };
+  return { isValid: true, parsedDate };
 };
 const validTimeRegex = /^\d{1,2}(:\d{1,2}(:\d{1,2})?)?$/;
-const TimeInput = ({
-  date,
-  setDate,
-  shouldShowSeconds,
-  timezone
-}) => {
+const TimeInput = ({ date, setDate, shouldShowSeconds, timezone }) => {
   let dayjsDate = timezone === "UTC" ? dayjs__default.default.utc(date) : dayjs__default.default(date);
   if (!date) {
     dayjsDate = dayjsDate.hour(12).minute(0);
@@ -284,80 +409,130 @@ const TimeInput = ({
       setMeridiem(dayjsDate.format("a"));
     }
   }, [date, dayjsDate]);
-  const handleTimeChange = react.useCallback((newTimeString) => {
-    setTimeString(newTimeString);
-    if (!date) {
-      return;
-    }
-    const trimmedTime = newTimeString.trim();
-    if (!trimmedTime) {
-      return;
-    }
-    const {
-      isValid,
-      parsedDate
-    } = parseTimeString(trimmedTime);
-    if (!isValid) {
-      setDateIsValid(false);
-      return;
-    }
-    if (!parsedDate) {
-      setDateIsValid(false);
-      return;
-    }
-    setDateIsValid(true);
-    let hour = parsedDate.hour();
-    if (meridiem === "am" && hour >= 12) {
-      setMeridiem("pm");
-    }
-    if (meridiem === "pm" && hour < 12) {
-      hour = parsedDate.hour() + 12;
-    }
-    const newDate = shouldShowSeconds ? dayjsDate.hour(hour).minute(parsedDate.minute()).second(parsedDate.second()).toDate() : dayjsDate.hour(hour).minute(parsedDate.minute()).toDate();
-    setDate(newDate);
-  }, [date, dayjsDate, meridiem, setDate, shouldShowSeconds]);
-  const handleMeridiemChange = react.useCallback((newMeridiem) => {
-    setMeridiem(newMeridiem);
-    if (newMeridiem === "pm" && dayjsDate.hour() < 12) {
-      const newDate = dayjsDate.hour(dayjsDate.hour() + 12).toDate();
-      setDate(newDate);
-      return;
-    }
-    if (newMeridiem === "am" && dayjsDate.hour() >= 12) {
-      const newDate = dayjsDate.hour(dayjsDate.hour() - 12).toDate();
-      setDate(newDate);
-      return;
-    }
-  }, [dayjsDate, setDate]);
-  const handleKeyDown = react.useCallback((event) => {
-    if (event.key === "Enter") {
-      const {
-        isValid,
-        parsedDate
-      } = parseTimeString(timeString);
+  const handleTimeChange = react.useCallback(
+    (newTimeString) => {
+      setTimeString(newTimeString);
+      if (!date) {
+        return;
+      }
+      const trimmedTime = newTimeString.trim();
+      if (!trimmedTime) {
+        return;
+      }
+      const { isValid, parsedDate } = parseTimeString(trimmedTime);
       if (!isValid) {
+        setDateIsValid(false);
         return;
       }
       if (!parsedDate) {
+        setDateIsValid(false);
         return;
       }
-      const newDate = shouldShowSeconds ? dayjsDate.hour(parsedDate.hour()).minute(parsedDate.minute()).second(parsedDate.second()).toDate() : dayjsDate.hour(parsedDate.hour()).minute(parsedDate.minute()).toDate();
+      setDateIsValid(true);
+      let hour = parsedDate.hour();
+      if (meridiem === "am" && hour >= 12) {
+        setMeridiem("pm");
+      }
+      if (meridiem === "pm" && hour < 12) {
+        hour = parsedDate.hour() + 12;
+      }
+      const newDate = shouldShowSeconds ? dayjsDate.hour(hour).minute(parsedDate.minute()).second(parsedDate.second()).toDate() : dayjsDate.hour(hour).minute(parsedDate.minute()).toDate();
       setDate(newDate);
+    },
+    [date, dayjsDate, meridiem, setDate, shouldShowSeconds]
+  );
+  const handleMeridiemChange = react.useCallback(
+    (newMeridiem) => {
+      setMeridiem(newMeridiem);
+      if (newMeridiem === "pm" && dayjsDate.hour() < 12) {
+        const newDate = dayjsDate.hour(dayjsDate.hour() + 12).toDate();
+        setDate(newDate);
+        return;
+      }
+      if (newMeridiem === "am" && dayjsDate.hour() >= 12) {
+        const newDate = dayjsDate.hour(dayjsDate.hour() - 12).toDate();
+        setDate(newDate);
+        return;
+      }
+    },
+    [dayjsDate, setDate]
+  );
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      if (event.key === "Enter") {
+        const { isValid, parsedDate } = parseTimeString(timeString);
+        if (!isValid) {
+          return;
+        }
+        if (!parsedDate) {
+          return;
+        }
+        const newDate = shouldShowSeconds ? dayjsDate.hour(parsedDate.hour()).minute(parsedDate.minute()).second(parsedDate.second()).toDate() : dayjsDate.hour(parsedDate.hour()).minute(parsedDate.minute()).toDate();
+        setDate(newDate);
+      }
+    },
+    [dayjsDate, setDate, shouldShowSeconds, timeString]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TimeInputContainer,
+    {
+      gap: "sm",
+      padding: "xs",
+      maxWidth: `${calendarFullWidth}`,
+      orientation: "horizontal",
+      justifyContent: "end",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { maxWidth: "8%", children: /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { htmlFor: "date-time-picker-time-input", children: "Time" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Container.Container,
+          {
+            justifyContent: "space-evenly",
+            orientation: "horizontal",
+            maxWidth: "85%",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Container.Container,
+                {
+                  maxWidth: "45%",
+                  orientation: "horizontal",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    TextField.TextField,
+                    {
+                      "data-testid": "date-time-picker-time-input",
+                      disabled: !isEnabled,
+                      error: dateIsValid ? null : true,
+                      id: "date-time-picker-time-input",
+                      onChange: handleTimeChange,
+                      onKeyDown: handleKeyDown,
+                      value: timeString
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { maxWidth: "45%", children: /* @__PURE__ */ jsxRuntime.jsx(
+                ButtonGroup.ButtonGroup,
+                {
+                  onClick: handleMeridiemChange,
+                  options: [
+                    {
+                      label: "am",
+                      value: "am"
+                    },
+                    {
+                      label: "pm",
+                      value: "pm"
+                    }
+                  ],
+                  selected: meridiem,
+                  type: "default"
+                }
+              ) })
+            ]
+          }
+        )
+      ]
     }
-  }, [dayjsDate, setDate, shouldShowSeconds, timeString]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(TimeInputContainer, { gap: "sm", padding: "xs", maxWidth: `${calendarFullWidth}`, orientation: "horizontal", justifyContent: "end", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { maxWidth: "8%", children: /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { htmlFor: "date-time-picker-time-input", children: "Time" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { justifyContent: "space-evenly", orientation: "horizontal", maxWidth: "85%", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { maxWidth: "45%", orientation: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsx(TextField.TextField, { "data-testid": "date-time-picker-time-input", disabled: !isEnabled, error: dateIsValid ? null : true, id: "date-time-picker-time-input", onChange: handleTimeChange, onKeyDown: handleKeyDown, value: timeString }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { maxWidth: "45%", children: /* @__PURE__ */ jsxRuntime.jsx(ButtonGroup.ButtonGroup, { onClick: handleMeridiemChange, options: [{
-        label: "am",
-        value: "am"
-      }, {
-        label: "pm",
-        value: "pm"
-      }], selected: meridiem, type: "default" }) })
-    ] })
-  ] });
+  );
 };
 const TabbedCalendar = ({
   defaultActiveTab = "startDate",
@@ -379,14 +554,20 @@ const TabbedCalendar = ({
   const handleTabChange = react.useCallback((newTab) => {
     setActiveTab(newTab);
   }, []);
-  const handleSetStartDate = react.useCallback((startDate2) => {
-    setStartDate(startDate2);
-    setSelectedDate(startDate2, "startDate");
-  }, [setSelectedDate, setStartDate]);
-  const handleSetEndDate = react.useCallback((endDate2) => {
-    setEndDate(endDate2);
-    setSelectedDate(endDate2, "endDate");
-  }, [setEndDate, setSelectedDate]);
+  const handleSetStartDate = react.useCallback(
+    (startDate2) => {
+      setStartDate(startDate2);
+      setSelectedDate(startDate2, "startDate");
+    },
+    [setSelectedDate, setStartDate]
+  );
+  const handleSetEndDate = react.useCallback(
+    (endDate2) => {
+      setEndDate(endDate2);
+      setSelectedDate(endDate2, "endDate");
+    },
+    [setEndDate, setSelectedDate]
+  );
   const startDateCalendarOptions = {};
   const endDateCalendarOptions = {};
   if (startDate) {
@@ -395,25 +576,107 @@ const TabbedCalendar = ({
   if (endDate) {
     endDateCalendarOptions.defaultDate = endDate;
   }
-  const startDateIsAfterEndDate = startDate && endDate && !utils.dateRangeIsValid({
-    startDate,
-    endDate
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(BottomPaddingTabs, { onValueChange: handleTabChange, value: activeTab, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(StyledTriggerList, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Tabs.Tabs.Trigger, { value: "startDate", "data-testid": "tabbed-calendar-trigger-start", children: "Start date" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Tabs.Tabs.Trigger, { value: "endDate", "data-testid": "tabbed-calendar-trigger-end", children: "End date" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Tabs.Tabs.Content, { value: "startDate", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(StyledCalendarRenderer, { calendarOptions: startDateCalendarOptions, timezone, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { calendarBody: body, calendarType: "startDate", endDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate, startDate, timezone }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TimeInput, { date: startDate, setDate: handleSetStartDate, shouldShowSeconds, timezone })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Tabs.Tabs.Content, { value: "endDate", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(StyledCalendarRenderer, { calendarOptions: endDateCalendarOptions, timezone, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { calendarBody: body, calendarType: "endDate", endDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate, startDate, timezone }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TimeInput, { date: endDate, setDate: handleSetEndDate, shouldShowSeconds, timezone })
-    ] }),
-    startDateIsAfterEndDate && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { align: "center", color: "danger", fillWidth: true, children: "End date and time must be after start" })
-  ] });
+  const startDateIsAfterEndDate = startDate && endDate && !utils.dateRangeIsValid({ startDate, endDate });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    BottomPaddingTabs,
+    {
+      onValueChange: handleTabChange,
+      value: activeTab,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(StyledTriggerList, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Tabs.Tabs.Trigger,
+            {
+              value: "startDate",
+              "data-testid": "tabbed-calendar-trigger-start",
+              children: "Start date"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Tabs.Tabs.Trigger,
+            {
+              value: "endDate",
+              "data-testid": "tabbed-calendar-trigger-end",
+              children: "End date"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Tabs.Tabs.Content, { value: "startDate", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StyledCalendarRenderer,
+            {
+              calendarOptions: startDateCalendarOptions,
+              timezone,
+              children: (body) => /* @__PURE__ */ jsxRuntime.jsx(
+                Calendar,
+                {
+                  calendarBody: body,
+                  calendarType: "startDate",
+                  endDate,
+                  futureDatesDisabled,
+                  futureStartDatesDisabled,
+                  maxRangeLength,
+                  setSelectedDate,
+                  startDate,
+                  timezone
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimeInput,
+            {
+              date: startDate,
+              setDate: handleSetStartDate,
+              shouldShowSeconds,
+              timezone
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Tabs.Tabs.Content, { value: "endDate", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StyledCalendarRenderer,
+            {
+              calendarOptions: endDateCalendarOptions,
+              timezone,
+              children: (body) => /* @__PURE__ */ jsxRuntime.jsx(
+                Calendar,
+                {
+                  calendarBody: body,
+                  calendarType: "endDate",
+                  endDate,
+                  futureDatesDisabled,
+                  futureStartDatesDisabled,
+                  maxRangeLength,
+                  setSelectedDate,
+                  startDate,
+                  timezone
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimeInput,
+            {
+              date: endDate,
+              setDate: handleSetEndDate,
+              shouldShowSeconds,
+              timezone
+            }
+          )
+        ] }),
+        startDateIsAfterEndDate && /* @__PURE__ */ jsxRuntime.jsx(
+          Text.Text,
+          {
+            align: "center",
+            color: "danger",
+            fillWidth: true,
+            children: "End date and time must be after start"
+          }
+        )
+      ]
+    }
+  );
 };
 const DateTimeRangePicker = ({
   closeOnDateRangeSelected = false,
@@ -489,46 +752,51 @@ const DateTimeRangePicker = ({
       setCalendarOpenDirection("right");
     }
   }, []);
-  const handleSelectDate = react.useCallback((selectedDate, calendarType) => {
-    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);
-      if (selectedEndDate) {
-        if (!shouldFireIfInvalid && !utils.dateRangeIsValid({
-          startDate: selectedDate,
-          endDate: selectedEndDate
-        })) {
-          return;
-        }
-        onSelectDateRange(selectedDate, selectedEndDate);
-        if (closeOnDateRangeSelected) {
-          closeDatePicker();
+  const handleSelectDate = react.useCallback(
+    (selectedDate, calendarType) => {
+      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 === "endDate") {
-      setSelectedEndDate(selectedDate);
-      if (selectedStartDate) {
-        if (!shouldFireIfInvalid && !utils.dateRangeIsValid({
-          startDate: selectedStartDate,
-          endDate: selectedDate
-        })) {
-          return;
+      if (calendarType === "startDate") {
+        setSelectedStartDate(selectedDate);
+        if (selectedEndDate) {
+          if (!shouldFireIfInvalid && !utils.dateRangeIsValid({ startDate: selectedDate, endDate: selectedEndDate })) {
+            return;
+          }
+          onSelectDateRange(selectedDate, selectedEndDate);
+          if (closeOnDateRangeSelected) {
+            closeDatePicker();
+          }
         }
-        onSelectDateRange(selectedStartDate, selectedDate);
-        if (closeOnDateRangeSelected) {
-          closeDatePicker();
+      }
+      if (calendarType === "endDate") {
+        setSelectedEndDate(selectedDate);
+        if (selectedStartDate) {
+          if (!shouldFireIfInvalid && !utils.dateRangeIsValid({ startDate: selectedStartDate, endDate: selectedDate })) {
+            return;
+          }
+          onSelectDateRange(selectedStartDate, selectedDate);
+          if (closeOnDateRangeSelected) {
+            closeDatePicker();
+          }
         }
       }
-    }
-  }, [closeDatePicker, closeOnDateRangeSelected, onSelectDateRange, selectedEndDate, selectedStartDate, shouldFireIfInvalid, timezone]);
+    },
+    [
+      closeDatePicker,
+      closeOnDateRangeSelected,
+      onSelectDateRange,
+      selectedEndDate,
+      selectedStartDate,
+      shouldFireIfInvalid,
+      timezone
+    ]
+  );
   const onTriggerKeyDown = react.useCallback((e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
@@ -536,13 +804,103 @@ const DateTimeRangePicker = ({
     }
   }, []);
   const shouldShowPredefinedTimes = predefinedTimesList !== void 0 && predefinedTimesList.length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.Dropdown, { onOpenChange: handleOpenChange, open: isOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown.Trigger, { disabled, onKeyDown: onTriggerKeyDown, children: /* @__PURE__ */ jsxRuntime.jsx(Common.DateTimeRangePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedEndDate, selectedStartDate, shouldShowSeconds, timezone }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(NoOverflowDropdownContent, { align: "start", responsivePositioning, children: /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { orientation: "horizontal", children: shouldShowPredefinedTimes ? /* @__PURE__ */ jsxRuntime.jsxs(PredefinedCalendarContainer, { gap: "none", orientation: "horizontal", padding: "none", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PredefinedTimes, { onSelectDateRange, predefinedTimesList, selectedEndDate, selectedStartDate, setEndDate: setSelectedEndDate, setStartDate: setSelectedStartDate, shouldShowCustomRange, showCustomDateRange: setShouldShowCustomRange }),
-      shouldShowCustomRange && /* @__PURE__ */ jsxRuntime.jsx(CalendarRendererContainer, { $openDirection: calendarOpenDirection, ref: calendarContainerRef, children: /* @__PURE__ */ jsxRuntime.jsx(TabbedCalendar, { defaultActiveTab, endDate: selectedEndDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setEndDate: setSelectedEndDate, setSelectedDate: handleSelectDate, setStartDate: setSelectedStartDate, shouldShowSeconds: Boolean(shouldShowSeconds), startDate: selectedStartDate, timezone }) })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(TabbedCalendar, { defaultActiveTab, endDate: selectedEndDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setEndDate: setSelectedEndDate, setSelectedDate: handleSelectDate, setStartDate: setSelectedStartDate, shouldShowSeconds: Boolean(shouldShowSeconds), startDate: selectedStartDate, timezone }) }) }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Dropdown.Dropdown,
+    {
+      onOpenChange: handleOpenChange,
+      open: isOpen,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Dropdown.Dropdown.Trigger,
+          {
+            disabled,
+            onKeyDown: onTriggerKeyDown,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Common.DateTimeRangePickerInput,
+              {
+                "data-testid": "datepicker-input-container",
+                disabled,
+                isActive: isOpen,
+                placeholder,
+                selectedEndDate,
+                selectedStartDate,
+                shouldShowSeconds,
+                timezone
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NoOverflowDropdownContent,
+          {
+            align: "start",
+            responsivePositioning,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { orientation: "horizontal", children: shouldShowPredefinedTimes ? /* @__PURE__ */ jsxRuntime.jsxs(
+              PredefinedCalendarContainer,
+              {
+                gap: "none",
+                orientation: "horizontal",
+                padding: "none",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    PredefinedTimes,
+                    {
+                      onSelectDateRange,
+                      predefinedTimesList,
+                      selectedEndDate,
+                      selectedStartDate,
+                      setEndDate: setSelectedEndDate,
+                      setStartDate: setSelectedStartDate,
+                      shouldShowCustomRange,
+                      showCustomDateRange: setShouldShowCustomRange
+                    }
+                  ),
+                  shouldShowCustomRange && /* @__PURE__ */ jsxRuntime.jsx(
+                    CalendarRendererContainer,
+                    {
+                      openDirection: calendarOpenDirection,
+                      ref: calendarContainerRef,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        TabbedCalendar,
+                        {
+                          defaultActiveTab,
+                          endDate: selectedEndDate,
+                          futureDatesDisabled,
+                          futureStartDatesDisabled,
+                          maxRangeLength,
+                          setEndDate: setSelectedEndDate,
+                          setSelectedDate: handleSelectDate,
+                          setStartDate: setSelectedStartDate,
+                          shouldShowSeconds: Boolean(shouldShowSeconds),
+                          startDate: selectedStartDate,
+                          timezone
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              TabbedCalendar,
+              {
+                defaultActiveTab,
+                endDate: selectedEndDate,
+                futureDatesDisabled,
+                futureStartDatesDisabled,
+                maxRangeLength,
+                setEndDate: setSelectedEndDate,
+                setSelectedDate: handleSelectDate,
+                setStartDate: setSelectedStartDate,
+                shouldShowSeconds: Boolean(shouldShowSeconds),
+                startDate: selectedStartDate,
+                timezone
+              }
+            ) }) })
+          }
+        )
+      ]
+    }
+  );
 };
 
 exports.DateTimeRangePicker = DateTimeRangePicker;