@oneuptime/common 12.0.7 → 12.0.8

package/UI/Components/Input/Input.tsx

@@ -25,7 +25,20 @@ export interface ComponentProps {
   initialValue?: undefined | string | Date;
   id?: string | undefined;
   ariaLabelledby?: string | undefined;
+  // Set together by fields that open a popup, so the state is on the focusable element.
+  ariaHasPopup?: "dialog" | "listbox" | "menu" | "grid" | "tree" | undefined;
+  ariaExpanded?: boolean | undefined;
+  ariaControls?: string | undefined;
+  /*
+   * For fields that render their own error text - a picker whose message sits
+   * below the whole control rather than below this input.
+   */
+  ariaDescribedby?: string | undefined;
+  ariaInvalid?: boolean | undefined;
   onClick?: undefined | (() => void);
+  onKeyDown?:
+    | undefined
+    | ((event: React.KeyboardEvent<HTMLInputElement>) => void);
   placeholder?: undefined | string;
   className?: undefined | string;
   onChange?: undefined | ((value: string) => void);
@@ -164,8 +177,13 @@ const Input: FunctionComponent<ComponentProps> = (
           spellCheck={!props.disableSpellCheck}
           autoComplete={props.autoComplete}
           aria-labelledby={props.ariaLabelledby}
-          aria-invalid={props.error ? "true" : undefined}
-          aria-describedby={props.error ? "input-error-message" : undefined}
+          aria-haspopup={props.ariaHasPopup}
+          aria-expanded={props.ariaExpanded}
+          aria-controls={props.ariaControls}
+          aria-invalid={props.error || props.ariaInvalid ? "true" : undefined}
+          aria-describedby={
+            props.error ? "input-error-message" : props.ariaDescribedby
+          }
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             const value: string | Date = e.target.value;
 
@@ -194,8 +212,18 @@ const Input: FunctionComponent<ComponentProps> = (
           }}
           tabIndex={props.tabIndex}
           onKeyDown={
-            props.onEnterPress
+            props.onEnterPress || props.onKeyDown
               ? (event: React.KeyboardEvent<HTMLInputElement>) => {
+                  props.onKeyDown?.(event);
+
+                  /*
+                   * A handler that claimed the key - a picker opening its popup
+                   * on Enter, say - has already decided what it means.
+                   */
+                  if (event.defaultPrevented) {
+                    return;
+                  }
+
                   if (event.key === "Enter") {
                     props.onEnterPress?.();
                   }

package/UI/Components/LogsViewer/components/LogTimeRangePicker.tsx

@@ -1,233 +1,28 @@
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-} from "react";
-import Icon from "../../Icon/Icon";
-import IconProp from "../../../../Types/Icon/IconProp";
+import React, { FunctionComponent, ReactElement } from "react";
 import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
-import TimeRange from "../../../../Types/Time/TimeRange";
-import InBetween from "../../../../Types/BaseDatabase/InBetween";
-import StartAndEndDate, {
-  StartAndEndDateType,
-} from "../../Date/StartAndEndDate";
-import {
-  DropdownHorizontalAlignment,
-  getDropdownAlignmentClassName,
-  useDropdownHorizontalAlignment,
-} from "../../../Utils/DropdownAlignment";
+import TimeRangePickerDropdown from "../../Date/TimeRangePickerDropdown";
 
 export interface LogTimeRangePickerProps {
   value: RangeStartAndEndDateTime;
   onChange: (value: RangeStartAndEndDateTime) => void;
 }
 
-// Matches the Tailwind `w-72` on the dropdown below (18rem).
+// Matches the Tailwind `w-72` on the rendered dropdown (18rem).
 export const LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX: number = 288;
 
-// Preset options to show in the dropdown (ordered for log investigation use)
-const PRESET_OPTIONS: Array<{ range: TimeRange; label: string }> = [
-  { range: TimeRange.PAST_FIVE_MINS, label: "Past 5 Minutes" },
-  { range: TimeRange.PAST_FIFTEEN_MINS, label: "Past 15 Minutes" },
-  { range: TimeRange.PAST_THIRTY_MINS, label: "Past 30 Minutes" },
-  { range: TimeRange.PAST_ONE_HOUR, label: "Past 1 Hour" },
-  { range: TimeRange.PAST_TWO_HOURS, label: "Past 2 Hours" },
-  { range: TimeRange.PAST_THREE_HOURS, label: "Past 3 Hours" },
-  { range: TimeRange.PAST_ONE_DAY, label: "Past 1 Day" },
-  { range: TimeRange.PAST_TWO_DAYS, label: "Past 2 Days" },
-  { range: TimeRange.PAST_ONE_WEEK, label: "Past 1 Week" },
-  { range: TimeRange.PAST_TWO_WEEKS, label: "Past 2 Weeks" },
-  { range: TimeRange.PAST_ONE_MONTH, label: "Past 1 Month" },
-  { range: TimeRange.PAST_THREE_MONTHS, label: "Past 3 Months" },
-];
-
-function formatDateShort(date: Date): string {
-  const month: string = date.toLocaleString("en-US", { month: "short" });
-  const day: number = date.getDate();
-  const hours: string = date.getHours().toString().padStart(2, "0");
-  const minutes: string = date.getMinutes().toString().padStart(2, "0");
-  return `${month} ${day}, ${hours}:${minutes}`;
-}
-
-function getButtonLabel(value: RangeStartAndEndDateTime): string {
-  if (value.range === TimeRange.CUSTOM && value.startAndEndDate) {
-    const start: string = formatDateShort(value.startAndEndDate.startValue);
-    const end: string = formatDateShort(value.startAndEndDate.endValue);
-    return `${start} – ${end}`;
-  }
-
-  const preset: { range: TimeRange; label: string } | undefined =
-    PRESET_OPTIONS.find((opt: { range: TimeRange; label: string }) => {
-      return opt.range === value.range;
-    });
-  return preset ? preset.label : value.range;
-}
+export const LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX: string =
+  "log-time-range-picker";
 
 const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
   props: LogTimeRangePickerProps,
 ): ReactElement => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [showCustom, setShowCustom] = useState<boolean>(
-    props.value.range === TimeRange.CUSTOM,
-  );
-  const containerRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
-    null!,
-  );
-  const buttonRef: React.RefObject<HTMLButtonElement> =
-    useRef<HTMLButtonElement>(null!);
-  const dropdownRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
-    null!,
-  );
-
-  const alignment: DropdownHorizontalAlignment = useDropdownHorizontalAlignment(
-    {
-      isOpen: isOpen,
-      anchorRef: buttonRef,
-      dropdownRef: dropdownRef,
-      dropdownWidthInPx: LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX,
-    },
-  );
-
-  // Close on click outside
-  useEffect(() => {
-    const handleClickOutside: (e: MouseEvent) => void = (
-      e: MouseEvent,
-    ): void => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  // Sync showCustom when value changes externally (e.g., histogram drag)
-  useEffect(() => {
-    setShowCustom(props.value.range === TimeRange.CUSTOM);
-  }, [props.value.range]);
-
-  const handlePresetSelect: (range: TimeRange) => void = useCallback(
-    (range: TimeRange): void => {
-      props.onChange({ range });
-      setShowCustom(false);
-      setIsOpen(false);
-    },
-    [props],
-  );
-
-  const handleCustomDateChange: (dateRange: InBetween<Date> | null) => void =
-    useCallback(
-      (dateRange: InBetween<Date> | null): void => {
-        if (dateRange) {
-          props.onChange({
-            range: TimeRange.CUSTOM,
-            startAndEndDate: dateRange,
-          });
-        }
-      },
-      [props],
-    );
-
-  const buttonLabel: string = getButtonLabel(props.value);
-
   return (
-    <div ref={containerRef} className="relative">
-      <button
-        ref={buttonRef}
-        type="button"
-        data-testid="log-time-range-picker-button"
-        aria-haspopup="true"
-        aria-expanded={isOpen}
-        className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${
-          isOpen
-            ? "border-indigo-300 bg-indigo-50 text-indigo-700"
-            : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"
-        }`}
-        onClick={() => {
-          setIsOpen(!isOpen);
-        }}
-      >
-        <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
-        <span>{buttonLabel}</span>
-        <Icon
-          icon={IconProp.ChevronDown}
-          className={`h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}`}
-        />
-      </button>
-
-      {isOpen && (
-        <div
-          ref={dropdownRef}
-          data-testid="log-time-range-picker-dropdown"
-          data-align={alignment}
-          className={`absolute ${getDropdownAlignmentClassName(
-            alignment,
-          )} top-full z-50 mt-1 w-72 max-w-[calc(100vw-1rem)] rounded-lg border border-gray-200 bg-white shadow-lg`}
-        >
-          {/* Preset options */}
-          <div className="max-h-64 overflow-y-auto py-1">
-            {PRESET_OPTIONS.map(
-              (option: { range: TimeRange; label: string }) => {
-                const isActive: boolean = props.value.range === option.range;
-
-                return (
-                  <button
-                    key={option.range}
-                    type="button"
-                    className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
-                      isActive
-                        ? "bg-indigo-50 font-medium text-indigo-700"
-                        : "text-gray-700 hover:bg-gray-50"
-                    }`}
-                    onClick={() => {
-                      handlePresetSelect(option.range);
-                    }}
-                  >
-                    {option.label}
-                  </button>
-                );
-              },
-            )}
-
-            {/* Custom option */}
-            <button
-              type="button"
-              className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
-                props.value.range === TimeRange.CUSTOM
-                  ? "bg-indigo-50 font-medium text-indigo-700"
-                  : "text-gray-700 hover:bg-gray-50"
-              }`}
-              onClick={() => {
-                setShowCustom(true);
-              }}
-            >
-              Custom Range...
-            </button>
-          </div>
-
-          {/* Custom date inputs */}
-          {showCustom && (
-            <div className="border-t border-gray-100 p-3">
-              <StartAndEndDate
-                type={StartAndEndDateType.DateTime}
-                value={props.value.startAndEndDate}
-                hideTimeButtons={true}
-                onValueChanged={handleCustomDateChange}
-              />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
+    <TimeRangePickerDropdown
+      value={props.value}
+      onChange={props.onChange}
+      dataTestIdPrefix={LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX}
+      dropdownWidthInPx={LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX}
+    />
   );
 };
 

package/UI/Components/Modal/Modal.tsx

@@ -7,6 +7,7 @@ import ModalFooter from "./ModalFooter";
 import { VeryLightGray } from "../../../Types/BrandColors";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
+import { wasPressConsumedByAnAnchoredPopup } from "../../Types/LayeredDismissal";
 import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
 import React, {
   FunctionComponent,
@@ -78,6 +79,8 @@ const Modal: FunctionComponent<ComponentProps> = (
   >(props.onClose);
   const backdropPressStartedOutsideRef: React.MutableRefObject<boolean> =
     useRef<boolean>(false);
+  const backdropPressEndedInsideRef: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
   const titleId: string = useId();
   const descriptionId: string = useId();
 
@@ -332,25 +335,54 @@ const Modal: FunctionComponent<ComponentProps> = (
   const onBackdropMouseDown: BackdropPressHandler = (
     event: React.MouseEvent<HTMLDivElement>,
   ): void => {
+    backdropPressEndedInsideRef.current = false;
+
+    /*
+     * A press that a portalled popup has already spent on closing itself is
+     * not a dismissal of this dialog. Without this, clicking the backdrop to
+     * put away an open colour picker closed the picker and the form behind it
+     * in one go.
+     */
+    if (wasPressConsumedByAnAnchoredPopup(event.nativeEvent)) {
+      backdropPressStartedOutsideRef.current = false;
+      return;
+    }
+
     backdropPressStartedOutsideRef.current = isEventOutsideModal(event);
   };
 
+  const onBackdropMouseUp: BackdropPressHandler = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ): void => {
+    /*
+     * The click that follows is reported against the nearest common ancestor
+     * of press and release — this very layer — so by the time it arrives the
+     * two ends are indistinguishable. Where the release landed has to be
+     * recorded while it is still known.
+     */
+    backdropPressEndedInsideRef.current = !isEventOutsideModal(event);
+  };
+
   const onBackdropClick: BackdropPressHandler = (
     event: React.MouseEvent<HTMLDivElement>,
   ): void => {
     /*
-     * Both ends of the click have to land on the backdrop. Selecting text in
-     * the body and releasing the mouse past the edge of the panel is a drag,
-     * not a dismissal, and it used to be the fastest way to lose a filled-in
-     * form.
+     * Both ends of the click have to land on the backdrop. A press that
+     * wandered across the edge of the panel in either direction is a drag —
+     * selecting text in the body and releasing outside, or pressing outside and
+     * releasing on the panel — and either used to be the fastest way to lose a
+     * filled-in form.
      */
     const pressStartedOutside: boolean = backdropPressStartedOutsideRef.current;
+    const pressEndedInside: boolean = backdropPressEndedInsideRef.current;
     backdropPressStartedOutsideRef.current = false;
+    backdropPressEndedInsideRef.current = false;
 
     if (
       props.disableCloseOnBackdropClick ||
       !props.onClose ||
       !pressStartedOutside ||
+      pressEndedInside ||
       !isEventOutsideModal(event) ||
       !isTopmostDialog()
     ) {
@@ -391,6 +423,7 @@ const Modal: FunctionComponent<ComponentProps> = (
       <div
         className="fixed inset-0 z-50 overflow-y-auto"
         onMouseDown={onBackdropMouseDown}
+        onMouseUp={onBackdropMouseUp}
         onClick={onBackdropClick}
       >
         <div className="flex min-h-full items-end justify-center p-0 text-center sm:items-center sm:p-6">

package/UI/Components/TelemetryViewer/components/TelemetryTimeRangePicker.tsx

@@ -1,227 +1,28 @@
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-} from "react";
-import Icon from "../../Icon/Icon";
-import IconProp from "../../../../Types/Icon/IconProp";
+import React, { FunctionComponent, ReactElement } from "react";
 import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
-import TimeRange from "../../../../Types/Time/TimeRange";
-import InBetween from "../../../../Types/BaseDatabase/InBetween";
-import StartAndEndDate, {
-  StartAndEndDateType,
-} from "../../Date/StartAndEndDate";
-import {
-  DropdownHorizontalAlignment,
-  getDropdownAlignmentClassName,
-  useDropdownHorizontalAlignment,
-} from "../../../Utils/DropdownAlignment";
+import TimeRangePickerDropdown from "../../Date/TimeRangePickerDropdown";
 
 export interface TelemetryTimeRangePickerProps {
   value: RangeStartAndEndDateTime;
   onChange: (value: RangeStartAndEndDateTime) => void;
 }
 
-// Matches the Tailwind `w-72` on the dropdown below (18rem).
+// Matches the Tailwind `w-72` on the rendered dropdown (18rem).
 export const TIME_RANGE_DROPDOWN_WIDTH_IN_PX: number = 288;
 
-const PRESET_OPTIONS: Array<{ range: TimeRange; label: string }> = [
-  { range: TimeRange.PAST_FIVE_MINS, label: "Past 5 Minutes" },
-  { range: TimeRange.PAST_FIFTEEN_MINS, label: "Past 15 Minutes" },
-  { range: TimeRange.PAST_THIRTY_MINS, label: "Past 30 Minutes" },
-  { range: TimeRange.PAST_ONE_HOUR, label: "Past 1 Hour" },
-  { range: TimeRange.PAST_TWO_HOURS, label: "Past 2 Hours" },
-  { range: TimeRange.PAST_THREE_HOURS, label: "Past 3 Hours" },
-  { range: TimeRange.PAST_ONE_DAY, label: "Past 1 Day" },
-  { range: TimeRange.PAST_TWO_DAYS, label: "Past 2 Days" },
-  { range: TimeRange.PAST_ONE_WEEK, label: "Past 1 Week" },
-  { range: TimeRange.PAST_TWO_WEEKS, label: "Past 2 Weeks" },
-  { range: TimeRange.PAST_ONE_MONTH, label: "Past 1 Month" },
-  { range: TimeRange.PAST_THREE_MONTHS, label: "Past 3 Months" },
-];
-
-function formatDateShort(date: Date): string {
-  const month: string = date.toLocaleString("en-US", { month: "short" });
-  const day: number = date.getDate();
-  const hours: string = date.getHours().toString().padStart(2, "0");
-  const minutes: string = date.getMinutes().toString().padStart(2, "0");
-  return `${month} ${day}, ${hours}:${minutes}`;
-}
-
-function getButtonLabel(value: RangeStartAndEndDateTime): string {
-  if (value.range === TimeRange.CUSTOM && value.startAndEndDate) {
-    const start: string = formatDateShort(value.startAndEndDate.startValue);
-    const end: string = formatDateShort(value.startAndEndDate.endValue);
-    return `${start} – ${end}`;
-  }
-
-  const preset: { range: TimeRange; label: string } | undefined =
-    PRESET_OPTIONS.find((opt: { range: TimeRange; label: string }) => {
-      return opt.range === value.range;
-    });
-  return preset ? preset.label : value.range;
-}
+export const TELEMETRY_TIME_RANGE_PICKER_TEST_ID_PREFIX: string =
+  "telemetry-time-range-picker";
 
 const TelemetryTimeRangePicker: FunctionComponent<
   TelemetryTimeRangePickerProps
 > = (props: TelemetryTimeRangePickerProps): ReactElement => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [showCustom, setShowCustom] = useState<boolean>(
-    props.value.range === TimeRange.CUSTOM,
-  );
-  const containerRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
-    null!,
-  );
-  const buttonRef: React.RefObject<HTMLButtonElement> =
-    useRef<HTMLButtonElement>(null!);
-  const dropdownRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
-    null!,
-  );
-
-  const alignment: DropdownHorizontalAlignment = useDropdownHorizontalAlignment(
-    {
-      isOpen: isOpen,
-      anchorRef: buttonRef,
-      dropdownRef: dropdownRef,
-      dropdownWidthInPx: TIME_RANGE_DROPDOWN_WIDTH_IN_PX,
-    },
-  );
-
-  useEffect(() => {
-    const handleClickOutside: (e: MouseEvent) => void = (
-      e: MouseEvent,
-    ): void => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  useEffect(() => {
-    setShowCustom(props.value.range === TimeRange.CUSTOM);
-  }, [props.value.range]);
-
-  const handlePresetSelect: (range: TimeRange) => void = useCallback(
-    (range: TimeRange): void => {
-      props.onChange({ range });
-      setShowCustom(false);
-      setIsOpen(false);
-    },
-    [props],
-  );
-
-  const handleCustomDateChange: (dateRange: InBetween<Date> | null) => void =
-    useCallback(
-      (dateRange: InBetween<Date> | null): void => {
-        if (dateRange) {
-          props.onChange({
-            range: TimeRange.CUSTOM,
-            startAndEndDate: dateRange,
-          });
-        }
-      },
-      [props],
-    );
-
-  const buttonLabel: string = getButtonLabel(props.value);
-
   return (
-    <div ref={containerRef} className="relative">
-      <button
-        ref={buttonRef}
-        type="button"
-        data-testid="telemetry-time-range-picker-button"
-        aria-haspopup="true"
-        aria-expanded={isOpen}
-        className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${
-          isOpen
-            ? "border-indigo-300 bg-indigo-50 text-indigo-700"
-            : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"
-        }`}
-        onClick={() => {
-          setIsOpen(!isOpen);
-        }}
-      >
-        <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
-        <span>{buttonLabel}</span>
-        <Icon
-          icon={IconProp.ChevronDown}
-          className={`h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}`}
-        />
-      </button>
-
-      {isOpen && (
-        <div
-          ref={dropdownRef}
-          data-testid="telemetry-time-range-picker-dropdown"
-          data-align={alignment}
-          className={`absolute ${getDropdownAlignmentClassName(
-            alignment,
-          )} top-full z-50 mt-1 w-72 max-w-[calc(100vw-1rem)] rounded-lg border border-gray-200 bg-white shadow-lg`}
-        >
-          <div className="max-h-64 overflow-y-auto py-1">
-            {PRESET_OPTIONS.map(
-              (option: { range: TimeRange; label: string }) => {
-                const isActive: boolean = props.value.range === option.range;
-
-                return (
-                  <button
-                    key={option.range}
-                    type="button"
-                    className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
-                      isActive
-                        ? "bg-indigo-50 font-medium text-indigo-700"
-                        : "text-gray-700 hover:bg-gray-50"
-                    }`}
-                    onClick={() => {
-                      handlePresetSelect(option.range);
-                    }}
-                  >
-                    {option.label}
-                  </button>
-                );
-              },
-            )}
-
-            <button
-              type="button"
-              className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
-                props.value.range === TimeRange.CUSTOM
-                  ? "bg-indigo-50 font-medium text-indigo-700"
-                  : "text-gray-700 hover:bg-gray-50"
-              }`}
-              onClick={() => {
-                setShowCustom(true);
-              }}
-            >
-              Custom Range...
-            </button>
-          </div>
-
-          {showCustom && (
-            <div className="border-t border-gray-100 p-3">
-              <StartAndEndDate
-                type={StartAndEndDateType.DateTime}
-                value={props.value.startAndEndDate}
-                hideTimeButtons={true}
-                onValueChanged={handleCustomDateChange}
-              />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
+    <TimeRangePickerDropdown
+      value={props.value}
+      onChange={props.onChange}
+      dataTestIdPrefix={TELEMETRY_TIME_RANGE_PICKER_TEST_ID_PREFIX}
+      dropdownWidthInPx={TIME_RANGE_DROPDOWN_WIDTH_IN_PX}
+    />
   );
 };