@servicetitan/anvil2 1.42.2 → 1.43.0

package/dist/TimeField-DRHLRqN3.js

@@ -0,0 +1,913 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { forwardRef, useState, useRef, useEffect, useMemo, useCallback, useImperativeHandle } from 'react';
+import { useTrackingId } from './useTrackingId.js';
+import { c as childrenToString } from './childrenToString-Bz9MqbHb-Bz9MqbHb.js';
+import { T as TextField } from './TextField-CRTh0gL_-D2CjcYXX.js';
+import { u as usePopoverSupport, a as useMaskito, e as maskitoTimeOptionsGenerator, b as maskitoWithPlaceholder } from './usePopoverSupport-B9Lsqryr-DhZHMoNb.js';
+import { I as Icon } from './Icon-B6HmlQiR-BxQkO3X5.js';
+import { c as cx } from './index-tZvMCc77.js';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
+import { P as Popover } from './Popover-CU2cGVD8-Casl3vM1.js';
+import { b as Listbox } from './Listbox-B-WUuj-_-BWWeWtLW.js';
+import { u as useOptionallyControlledState } from './useOptionallyControlledState-DAv5LXXh-DAv5LXXh.js';
+import { u as usePopoverCloseDelayWorkaround } from './usePopoverCloseDelayWorkaround-BZcjPkvT-BZcjPkvT.js';
+
+import './TimeField.css';const SvgAccessTime = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24a.71.71 0 0 0-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72z" }));
+
+const timePlaceholderMask = ({
+  format,
+  placeholder
+}) => {
+  const timeOptions = maskitoTimeOptionsGenerator({
+    mode: format === 12 ? "HH:MM AA" : "HH:MM",
+    step: 0
+    // We handle step logic in your business layer
+  });
+  const { plugins, removePlaceholder, ...placeholderOptions } = maskitoWithPlaceholder(placeholder);
+  const timePlaceholderMask2 = {
+    ...timeOptions,
+    plugins: plugins.concat(timeOptions.plugins || []),
+    preprocessors: [
+      ...placeholderOptions.preprocessors,
+      ...timeOptions.preprocessors
+    ],
+    postprocessors: [
+      ...timeOptions.postprocessors,
+      ...placeholderOptions.postprocessors
+    ]
+  };
+  return { options: timePlaceholderMask2, removePlaceholder };
+};
+
+const TIME_CONSTANTS = {
+  /** Minutes in a full day (24 hours * 60 minutes) */
+  MINUTES_IN_DAY: 1440,
+  /** Maximum hour in 24-hour format */
+  MAX_HOUR_24: 23,
+  /** Maximum minute value */
+  MAX_MINUTE: 59,
+  /** Timeout in milliseconds for input debouncing */
+  INPUT_DEBOUNCE_TIMEOUT: 100
+};
+const TIME_FORMAT_PLACEHOLDERS = {
+  12: "––:–– ––",
+  24: "––:––"
+};
+const CLOCK_ICON = SvgAccessTime;
+
+function formatTimeString(hours, minutes, format) {
+  if (hours === 24) {
+    hours = 0;
+  }
+  if (format === 12) {
+    let displayHours = hours;
+    let period = "AM";
+    if (hours === 0) {
+      displayHours = 12;
+    } else if (hours > 12) {
+      displayHours = hours - 12;
+      period = "PM";
+    } else if (hours === 12) {
+      period = "PM";
+    }
+    return `${displayHours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")} ${period}`;
+  } else {
+    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+  }
+}
+
+const MAX_HOUR = TIME_CONSTANTS.MAX_HOUR_24;
+const MAX_MINUTE = TIME_CONSTANTS.MAX_MINUTE;
+function getConstraintMinutes(min, max) {
+  const minMinutes = min ? timeToMinutes(convertTimeFormat(min, 24)) : 0;
+  const maxMinutes = max ? timeToMinutes(convertTimeFormat(max, 24)) : TIME_CONSTANTS.MINUTES_IN_DAY;
+  return { minMinutes, maxMinutes };
+}
+function isWithinConstraints(timeMinutes, minMinutes, maxMinutes) {
+  return timeMinutes >= minMinutes && timeMinutes <= maxMinutes;
+}
+const timeToMinutes = (timeStr) => {
+  const match = timeStr.match(/^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/i);
+  if (!match) return 0;
+  let hours = parseInt(match[1], 10);
+  const minutes = parseInt(match[2], 10);
+  const period = match[3]?.toUpperCase();
+  if (minutes > MAX_MINUTE) return 0;
+  if (period === "PM" && hours !== 12) {
+    hours += 12;
+  } else if (period === "AM" && hours === 12) {
+    hours = 0;
+  }
+  if (hours > MAX_HOUR) return 0;
+  return hours * 60 + minutes;
+};
+function convertTimeFormat(time, targetFormat) {
+  if (!time) return time;
+  const minutes = timeToMinutes(time);
+  if (minutes === 0 && time !== "00:00" && time !== "12:00 AM") {
+    return time;
+  }
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  return formatTimeString(hours, mins, targetFormat);
+}
+function normalizePartialInput(value) {
+  const cleanValue = value.replace(/[–_:]/g, "").replace(/\s+/g, "");
+  if (/^\d{1,2}$/.test(cleanValue)) {
+    const result = `${cleanValue}:00`;
+    return result;
+  } else if (/^\d{1,2}:\d{1}$/.test(cleanValue)) {
+    const result = `${cleanValue}0`;
+    return result;
+  } else if (/^\d{4}$/.test(cleanValue)) {
+    const result = `${cleanValue.slice(0, 2)}:${cleanValue.slice(2)}`;
+    return result;
+  } else if (/^\d{4}(AM|PM)$/i.test(cleanValue)) {
+    const digits = cleanValue.slice(0, 4);
+    const ampm = cleanValue.slice(4);
+    const result = `${digits.slice(0, 2)}:${digits.slice(2)} ${ampm}`;
+    return result;
+  }
+  return value;
+}
+function parse12HourFormat(normalizedValue, min, max) {
+  const match = normalizedValue.match(/^(\d{1,2}):(\d{1,2})(?:\s*(AM|PM))?$/i);
+  if (!match) return null;
+  let hours = parseInt(match[1], 10);
+  let minutes = parseInt(match[2], 10);
+  const ampm = match[3]?.toUpperCase();
+  if (minutes < 10 && normalizedValue.match(/^(\d{1,2}):(\d{1})$/)) {
+    minutes *= 10;
+  }
+  if (ampm === "PM") {
+    if (hours !== 12) {
+      hours += 12;
+    }
+  } else if (ampm === "AM") {
+    if (hours === 12) {
+      hours = 0;
+    }
+  } else {
+    if (hours === 12) {
+      hours = 12;
+    } else {
+      if (min || max) {
+        const amHours = hours;
+        const pmHours = hours + 12;
+        const { minMinutes, maxMinutes } = getConstraintMinutes(min, max);
+        const amMinutes = amHours * 60 + minutes;
+        const pmMinutes = pmHours * 60 + minutes;
+        const amValid = isWithinConstraints(amMinutes, minMinutes, maxMinutes);
+        const pmValid = isWithinConstraints(pmMinutes, minMinutes, maxMinutes);
+        if (amValid && pmValid) ; else if (pmValid) {
+          hours = pmHours;
+        } else ;
+      }
+    }
+  }
+  return { hours, minutes };
+}
+function parse24HourFormat(normalizedValue) {
+  const match = normalizedValue.match(/^(\d{1,2}):(\d{1,2})$/);
+  if (!match) {
+    return null;
+  }
+  const hours = parseInt(match[1], 10);
+  let minutes = parseInt(match[2], 10);
+  if (minutes < 10 && normalizedValue.match(/^(\d{1,2}):(\d{1})$/)) {
+    minutes *= 10;
+  }
+  const result = { hours, minutes };
+  return result;
+}
+function validate12HourConstraints(timeString, value, min, max) {
+  if (!min && !max) return true;
+  const originalHasAMPM = value.toUpperCase().includes("AM") || value.toUpperCase().includes("PM");
+  if (!originalHasAMPM) {
+    const timePart = timeString.replace(/\s*(AM|PM)$/i, "");
+    const amTime = `${timePart} AM`;
+    const pmTime = `${timePart} PM`;
+    const amMinutes = timeToMinutes(convertTimeFormat(amTime, 24));
+    const pmMinutes = timeToMinutes(convertTimeFormat(pmTime, 24));
+    const { minMinutes, maxMinutes } = getConstraintMinutes(min, max);
+    return isWithinConstraints(amMinutes, minMinutes, maxMinutes) || isWithinConstraints(pmMinutes, minMinutes, maxMinutes);
+  } else {
+    const timeMinutes = timeToMinutes(convertTimeFormat(timeString, 24));
+    const { minMinutes, maxMinutes } = getConstraintMinutes(min, max);
+    return isWithinConstraints(timeMinutes, minMinutes, maxMinutes);
+  }
+}
+function validate24HourConstraints(timeString, min, max) {
+  if (!min && !max) return true;
+  const timeMinutes = timeToMinutes(timeString);
+  const { minMinutes, maxMinutes } = getConstraintMinutes(min, max);
+  if (isWithinConstraints(timeMinutes, minMinutes, maxMinutes)) {
+    return true;
+  }
+  const hours = Math.floor(timeMinutes / 60);
+  const minutes = timeMinutes % 60;
+  if (minutes === 0) {
+    for (let h = minMinutes; h <= maxMinutes; h += 60) {
+      const potentialHour = Math.floor(h / 60);
+      if (potentialHour.toString().startsWith(hours.toString())) {
+        return true;
+      }
+    }
+  }
+  if (hours >= Math.floor(minMinutes / 60) && hours <= Math.floor(maxMinutes / 60)) {
+    const hourMinutes = hours * 60;
+    const hourMinMinutes = Math.max(minMinutes, hourMinutes);
+    const hourMaxMinutes = Math.min(maxMinutes, hourMinutes + 59);
+    for (let m = hourMinMinutes; m <= hourMaxMinutes; m++) {
+      const potentialMinutes = m % 60;
+      if (potentialMinutes.toString().startsWith(minutes.toString())) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function parseInputValue(value, format, removePlaceholder, min, max) {
+  const valueMinusPlaceholder = removePlaceholder(value);
+  if (valueMinusPlaceholder === "") {
+    return {
+      time: null,
+      isInputValid: false,
+      isInputEmpty: true
+    };
+  }
+  const normalizedValue = normalizePartialInput(valueMinusPlaceholder);
+  const parsed = format === 12 ? parse12HourFormat(normalizedValue, min, max) : parse24HourFormat(normalizedValue);
+  if (!parsed) {
+    return {
+      time: null,
+      isInputValid: false,
+      isInputEmpty: false
+    };
+  }
+  const { hours, minutes } = parsed;
+  if (hours < 0 || hours > MAX_HOUR || minutes < 0 || minutes > MAX_MINUTE) {
+    return {
+      time: null,
+      isInputValid: false,
+      isInputEmpty: false
+    };
+  }
+  const timeString = formatTimeString(hours, minutes, format);
+  const isValid = format === 12 ? validate12HourConstraints(timeString, value, min, max) : validate24HourConstraints(timeString, min, max);
+  if (!isValid) {
+    return {
+      time: null,
+      isInputValid: false,
+      isInputEmpty: false
+    };
+  }
+  return {
+    time: timeString,
+    isInputValid: true,
+    isInputEmpty: false
+  };
+}
+
+function isTimeOnStep(time, step) {
+  if (!step || step <= 0) return true;
+  const totalMinutes = timeToMinutes(time);
+  return totalMinutes % step === 0;
+}
+function isValidTime(time) {
+  if (!time) return false;
+  return timeToMinutes(time) > 0 || time === "00:00";
+}
+function isPartialInputPotentiallyValid(inputValue, format, min, max) {
+  if (!min || !max) return false;
+  const digits = inputValue.replace(/[^\d]/g, "");
+  if (digits.length === 1) {
+    const digit = parseInt(digits, 10);
+    const minMinutes = timeToMinutes(min);
+    const maxMinutes = timeToMinutes(max);
+    for (let h = 0; h <= 23; h++) {
+      const hourStr = h.toString().padStart(2, "0");
+      const hourStrNoPad = h.toString();
+      const startsWithDigit = hourStr.startsWith(digit.toString()) || hourStrNoPad.startsWith(digit.toString());
+      if (!startsWithDigit) continue;
+      if (format === 24) {
+        const hourMinutes = h * 60;
+        if (hourMinutes >= minMinutes && hourMinutes <= maxMinutes) {
+          return true;
+        }
+      } else {
+        if (h === 0) {
+          if (digit === 1) {
+            const midnightMinutes = 0;
+            if (midnightMinutes >= minMinutes && midnightMinutes <= maxMinutes) {
+              return true;
+            }
+          }
+        } else if (h >= 1 && h <= 12) {
+          const amHour24 = h === 12 ? 0 : h;
+          const amMinutes = amHour24 * 60;
+          if (amMinutes >= minMinutes && amMinutes <= maxMinutes) {
+            return true;
+          }
+          const pmHour24 = h === 12 ? 12 : h + 12;
+          const pmMinutes = pmHour24 * 60;
+          if (pmMinutes >= minMinutes && pmMinutes <= maxMinutes) {
+            return true;
+          }
+        }
+      }
+    }
+  }
+  return false;
+}
+
+const styles = {
+	"time-field": "_time-field_11xzw_2"
+};
+
+const MaskedTimeInput = forwardRef(
+  ({
+    lastValidTime,
+    format,
+    placeholder,
+    min,
+    max,
+    onInputChange,
+    onKeyDown,
+    onFocus,
+    className,
+    ...props
+  }, ref) => {
+    const [inputValue, setInputValue] = useState(placeholder);
+    const { options, removePlaceholder } = timePlaceholderMask({
+      format,
+      placeholder
+    });
+    const maskedInputRef = useMaskito({ options });
+    const inputRef = useRef(null);
+    const combinedRef = useMergeRefs([maskedInputRef, inputRef, ref]);
+    const previousTimeRef = useRef(null);
+    const isUserTypingRef = useRef(false);
+    const inputValueRef = useRef(placeholder);
+    const previousPlaceholderRef = useRef(placeholder);
+    const currentParsedData = useMemo(() => {
+      return parseInputValue(inputValue, format, removePlaceholder, min, max);
+    }, [inputValue, format, removePlaceholder, min, max]);
+    useEffect(() => {
+      inputValueRef.current = inputValue;
+    }, [inputValue]);
+    useEffect(() => {
+      previousPlaceholderRef.current = placeholder;
+    }, [placeholder]);
+    useEffect(() => {
+      if (lastValidTime === void 0) return;
+      if (lastValidTime === previousTimeRef.current) return;
+      if (isUserTypingRef.current) return;
+      const newInputValue = lastValidTime ? convertTimeFormat(lastValidTime, format) : placeholder;
+      setInputValue(newInputValue);
+      inputValueRef.current = newInputValue;
+      previousTimeRef.current = lastValidTime;
+    }, [lastValidTime, format, placeholder]);
+    useEffect(() => {
+      if (placeholder === previousPlaceholderRef.current) return;
+      if (lastValidTime && inputValue === lastValidTime) return;
+      const isOldPlaceholder = inputValue === TIME_FORMAT_PLACEHOLDERS[12] || inputValue === TIME_FORMAT_PLACEHOLDERS[24];
+      if (isOldPlaceholder) {
+        setInputValue(placeholder);
+      }
+      previousPlaceholderRef.current = placeholder;
+    }, [placeholder, lastValidTime, inputValue]);
+    const handleChange = useCallback(
+      (event) => {
+        isUserTypingRef.current = true;
+        const { time, isInputValid, isInputEmpty } = parseInputValue(
+          event.target.value,
+          format,
+          removePlaceholder,
+          min,
+          max
+        );
+        const isPotentiallyValidPartial = !isInputValid && !isInputEmpty && event.target.value.length >= placeholder.length && // User is typing, not deleting
+        isPartialInputPotentiallyValid(event.target.value, format, min, max);
+        if (isInputValid || isInputEmpty || isPotentiallyValidPartial) {
+          setInputValue(event.target.value);
+        } else {
+          setInputValue(placeholder);
+        }
+        onInputChange?.({
+          event,
+          time,
+          isInputValid,
+          isInputEmpty
+        });
+        setTimeout(() => {
+          isUserTypingRef.current = false;
+        }, TIME_CONSTANTS.INPUT_DEBOUNCE_TIMEOUT);
+      },
+      [format, removePlaceholder, onInputChange, min, max, placeholder]
+    );
+    const resetTypingFlag = useCallback(() => {
+      isUserTypingRef.current = false;
+    }, []);
+    useImperativeHandle(
+      ref,
+      () => ({
+        ...inputRef.current,
+        focus: () => inputRef.current?.focus(),
+        resetTypingFlag
+      })
+    );
+    const classNames = useMemo(() => {
+      return cx(styles["time-field"], className);
+    }, [className]);
+    return /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ref: combinedRef,
+        "data-input-valid": currentParsedData.isInputValid,
+        "data-input-empty": currentParsedData.isInputEmpty,
+        "data-time": currentParsedData.time ?? "",
+        value: inputValue,
+        onChange: handleChange,
+        prefix: /* @__PURE__ */ jsx(Icon, { svg: CLOCK_ICON }),
+        autoComplete: "off",
+        onKeyDown,
+        onFocus,
+        className: classNames,
+        ...props
+      }
+    );
+  }
+);
+MaskedTimeInput.displayName = "MaskedTimeInput";
+
+function generateTimeOptions({
+  step = 30,
+  min,
+  max,
+  format
+}) {
+  const options = [];
+  const minMinutes = min ? timeToMinutes(min) : 0;
+  const maxMinutes = max ? timeToMinutes(max) : TIME_CONSTANTS.MINUTES_IN_DAY - 1;
+  for (let minutes = 0; minutes < TIME_CONSTANTS.MINUTES_IN_DAY; minutes += step) {
+    if (minutes < minMinutes || minutes > maxMinutes) {
+      continue;
+    }
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    options.push(formatTimeString(hours, mins, format));
+  }
+  return options;
+}
+function normalizeTimeString(str) {
+  return str.replace(/[–_:]/g, "").replace(/\s+/g, "").toLowerCase();
+}
+function filterTimeOptions(options, userInput) {
+  if (!userInput || userInput === TIME_FORMAT_PLACEHOLDERS[12] || userInput === TIME_FORMAT_PLACEHOLDERS[24]) {
+    return options;
+  }
+  const normalizedInput = normalizeTimeString(userInput);
+  const filtered = options.filter((option) => {
+    const normalizedOption = normalizeTimeString(option);
+    return normalizedOption.startsWith(normalizedInput);
+  });
+  return filtered;
+}
+
+function getNextFutureStep(time, step, format) {
+  if (!step || step <= 0) return time;
+  const totalMinutes = timeToMinutes(time);
+  const nextStep = Math.ceil(totalMinutes / step) * step;
+  const hours = Math.floor(nextStep / 60);
+  const minutes = nextStep % 60;
+  return formatTimeString(hours, minutes, format);
+}
+function handleAutoRounding(time, options) {
+  const { autoround, step, format } = options;
+  if (!autoround || !time) return time;
+  const stepValue = step ?? 30;
+  if (isTimeOnStep(time, stepValue)) {
+    return time;
+  }
+  return getNextFutureStep(time, stepValue, format);
+}
+function generateAmPmVariants(currentTime, step, inputValue) {
+  const hasAM = inputValue.toUpperCase().includes("AM");
+  const hasPM = inputValue.toUpperCase().includes("PM");
+  const getNextStepForTime = (time) => {
+    const currentMinutes = timeToMinutes(time);
+    const nextStepMinutes = Math.ceil(currentMinutes / step) * step;
+    const finalMinutes = nextStepMinutes === currentMinutes ? nextStepMinutes + step : nextStepMinutes;
+    const hours = Math.floor(finalMinutes / 60);
+    const minutes = finalMinutes % 60;
+    return formatTimeString(hours, minutes, 12);
+  };
+  const nextStep = getNextFutureStep(currentTime, step, 12);
+  if (hasAM || hasPM) {
+    return [nextStep];
+  } else {
+    const currentMinutes = timeToMinutes(currentTime);
+    const pmMinutes = currentMinutes + 12 * 60;
+    const pmHours = Math.floor(pmMinutes / 60);
+    const pmMins = pmMinutes % 60;
+    const pmVersion = getNextStepForTime(formatTimeString(pmHours, pmMins, 24));
+    return [nextStep, pmVersion];
+  }
+}
+function generatePmInterpretation(currentTime, step, inputValue) {
+  if (inputValue.toUpperCase().includes("AM") || inputValue.toUpperCase().includes("PM")) {
+    return [];
+  }
+  const currentMinutes = timeToMinutes(currentTime);
+  const pmMinutes = currentMinutes + 12 * 60;
+  const pmHours = Math.floor(pmMinutes / 60);
+  const pmMins = pmMinutes % 60;
+  const pmTime = formatTimeString(pmHours, pmMins, 12);
+  if (isValidTime(pmTime)) {
+    const pmNextStep = getNextFutureStep(pmTime, step, 12);
+    return [pmNextStep];
+  }
+  return [];
+}
+function getAutoRoundingOptions(currentTime, step, format, inputValue, min) {
+  if (!currentTime) {
+    return [];
+  }
+  if (!isValidTime(currentTime)) {
+    if (format === 12) {
+      return generatePmInterpretation(currentTime, step, inputValue);
+    }
+    return [];
+  }
+  const nextStep = getNextFutureStep(currentTime, step, format);
+  if (format === 12 && !min) {
+    return generateAmPmVariants(currentTime, step, inputValue);
+  }
+  return [nextStep];
+}
+
+const TimeFieldElement = forwardRef(
+  function TimeField2({
+    value: valueProp,
+    defaultValue,
+    min,
+    max,
+    onChange,
+    format = 12,
+    step = 30,
+    required,
+    description,
+    error: errorProp,
+    disableSuggestions = false,
+    autoround = false,
+    className,
+    ...rest
+  }, ref) {
+    const [lastValidTime, setLastValidTime] = useOptionallyControlledState({
+      controlledValue: valueProp,
+      defaultValue: defaultValue ?? null
+    });
+    const [isDropdownOpen, setIsDropdownOpenRaw] = useState(false);
+    const setIsDropdownOpen = (open) => {
+      setIsDropdownOpenRaw(open);
+    };
+    const [selectedOptionIndex, setSelectedOptionIndex] = useState(0);
+    const [inputValueForFiltering, setInputValueForFiltering] = useState("");
+    const [currentParsedTime, setCurrentParsedTime] = useState(
+      null
+    );
+    const [inputParsedData, setInputParsedData] = useState({ time: null, isInputValid: false, isInputEmpty: true });
+    const lastOnChangeCallRef = useRef(null);
+    const isDropdownClickingRef = useRef(false);
+    const [justSelected, setJustSelected] = useState(false);
+    const tabJustPressedRef = useRef(false);
+    const inputRef = useRef(null);
+    const popoverContentRef = useRef(null);
+    const combinedRef = useMergeRefs([inputRef, ref]);
+    const popoverSupported = usePopoverSupport();
+    const placeholder = TIME_FORMAT_PLACEHOLDERS[format];
+    const shouldShowOptionsFromHook = usePopoverCloseDelayWorkaround(isDropdownOpen);
+    const shouldShowOptions = tabJustPressedRef.current ? false : shouldShowOptionsFromHook;
+    const dropdownTimeoutRef = useRef(null);
+    useEffect(() => {
+      const dropdownRef = dropdownTimeoutRef.current;
+      return () => {
+        if (dropdownRef) {
+          clearTimeout(dropdownRef);
+        }
+      };
+    }, []);
+    const allTimeOptions = useMemo(
+      () => generateTimeOptions({ step, min, max, format }),
+      [step, min, max, format]
+    );
+    const baseFilteredOptions = useMemo(() => {
+      if (!inputValueForFiltering || inputValueForFiltering.match(/^[–_:]+$/)) {
+        return allTimeOptions;
+      }
+      return filterTimeOptions(allTimeOptions, inputValueForFiltering);
+    }, [allTimeOptions, inputValueForFiltering]);
+    const autoRoundingOptions = useMemo(() => {
+      if (!autoround || baseFilteredOptions.length > 0 || !inputValueForFiltering || inputValueForFiltering.match(/^[–_:]+$/)) {
+        return [];
+      }
+      const currentTime = currentParsedTime || inputParsedData.time;
+      const autoRoundedOptions = getAutoRoundingOptions(
+        currentTime,
+        step ?? 30,
+        format,
+        inputValueForFiltering,
+        min
+      );
+      return autoRoundedOptions.filter(
+        (option) => !baseFilteredOptions.includes(option)
+      );
+    }, [
+      autoround,
+      baseFilteredOptions,
+      inputValueForFiltering,
+      currentParsedTime,
+      inputParsedData.time,
+      format,
+      min,
+      step
+    ]);
+    const filteredOptions = useMemo(() => {
+      if (baseFilteredOptions.length === 0 && autoRoundingOptions.length === 0) {
+        if (!inputParsedData.isInputValid && inputValueForFiltering && !inputValueForFiltering.match(/^[–_:]+$/)) {
+          return allTimeOptions;
+        }
+      }
+      return [...baseFilteredOptions, ...autoRoundingOptions];
+    }, [
+      baseFilteredOptions,
+      autoRoundingOptions,
+      allTimeOptions,
+      inputValueForFiltering,
+      inputParsedData.isInputValid
+    ]);
+    const handleBlur = useCallback(
+      (event) => {
+        if (event.relatedTarget && popoverContentRef.current?.contains(event.relatedTarget) && isDropdownClickingRef.current) {
+          isDropdownClickingRef.current = false;
+          return;
+        }
+        setIsDropdownOpen(false);
+        setSelectedOptionIndex(0);
+        const input = event.target;
+        const parsedInputTime = input.dataset.time || null;
+        const isInputValid = input.dataset.inputValid === "true";
+        const isInputEmpty = input.dataset.inputEmpty === "true";
+        let finalTime = parsedInputTime;
+        if (autoround && finalTime && isInputValid) {
+          finalTime = handleAutoRounding(finalTime, {
+            autoround,
+            step,
+            format
+          });
+        }
+        if (finalTime) {
+          inputRef.current?.resetTypingFlag?.();
+          setLastValidTime(finalTime);
+        }
+        const currentChange = {
+          time: finalTime,
+          isInputValid,
+          isInputEmpty
+        };
+        const lastChange = lastOnChangeCallRef.current;
+        const isDuplicate = lastChange && lastChange.time === currentChange.time && lastChange.isInputValid === currentChange.isInputValid && lastChange.isInputEmpty === currentChange.isInputEmpty;
+        if (!isDuplicate) {
+          onChange?.(currentChange);
+          lastOnChangeCallRef.current = currentChange;
+        }
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [format, step, autoround, onChange]
+    );
+    const handleFocus = useCallback(() => {
+      if (!disableSuggestions && !justSelected) {
+        setIsDropdownOpen(true);
+        setSelectedOptionIndex(0);
+      }
+    }, [disableSuggestions, justSelected]);
+    useEffect(() => {
+      if (filteredOptions.length <= 1 && isDropdownOpen) {
+        setIsDropdownOpen(false);
+      }
+      if (!disableSuggestions && filteredOptions.length > 1 && document.activeElement && document.activeElement.tagName === "INPUT" && !isDropdownOpen && !justSelected && !tabJustPressedRef.current) {
+        setIsDropdownOpen(true);
+        setSelectedOptionIndex(0);
+      }
+    }, [filteredOptions, disableSuggestions, isDropdownOpen, justSelected]);
+    const handleInputChange = (change) => {
+      setInputValueForFiltering(change.event.target.value);
+      setCurrentParsedTime(change.time);
+      setInputParsedData({
+        time: change.time,
+        isInputValid: change.isInputValid,
+        isInputEmpty: change.isInputEmpty
+      });
+      setSelectedOptionIndex(0);
+      setJustSelected(false);
+    };
+    const scrollToSelectedOption = useCallback(() => {
+      if (!popoverContentRef.current || selectedOptionIndex < 0) return;
+      const optionElements = popoverContentRef.current.querySelectorAll('[role="option"]');
+      const targetElement = optionElements[selectedOptionIndex];
+      if (targetElement) {
+        targetElement.scrollIntoView({
+          block: "center",
+          behavior: "auto"
+        });
+      }
+    }, [selectedOptionIndex]);
+    useEffect(() => {
+      if (isDropdownOpen && selectedOptionIndex >= 0) {
+        scrollToSelectedOption();
+      }
+    }, [selectedOptionIndex, isDropdownOpen, scrollToSelectedOption]);
+    const handleOptionSelect = useCallback(
+      (selectedTime) => {
+        if (inputRef.current?.resetTypingFlag) {
+          inputRef.current.resetTypingFlag();
+        }
+        setIsDropdownOpen(false);
+        setSelectedOptionIndex(0);
+        setJustSelected(true);
+        setLastValidTime(selectedTime);
+        setCurrentParsedTime(selectedTime);
+        const changeData = {
+          time: selectedTime,
+          isInputValid: true,
+          isInputEmpty: false
+        };
+        onChange?.(changeData);
+        lastOnChangeCallRef.current = changeData;
+        requestAnimationFrame(() => {
+          inputRef.current?.focus();
+        });
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [onChange]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (!isDropdownOpen) {
+          return;
+        }
+        switch (event.key) {
+          case "ArrowDown":
+            event.preventDefault();
+            setSelectedOptionIndex(
+              (prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0
+            );
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            setSelectedOptionIndex(
+              (prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1
+            );
+            break;
+          case "Enter":
+            event.preventDefault();
+            if (filteredOptions[selectedOptionIndex]) {
+              handleOptionSelect(filteredOptions[selectedOptionIndex]);
+            }
+            break;
+          case "Tab":
+            tabJustPressedRef.current = true;
+            setIsDropdownOpen(false);
+            setSelectedOptionIndex(0);
+            setTimeout(() => {
+              tabJustPressedRef.current = false;
+            }, 50);
+            break;
+        }
+      },
+      [
+        isDropdownOpen,
+        selectedOptionIndex,
+        filteredOptions,
+        handleOptionSelect
+      ]
+    );
+    const popoverDisabled = disableSuggestions || !popoverSupported;
+    const justTheInput = /* @__PURE__ */ jsx(
+      MaskedTimeInput,
+      {
+        ref: combinedRef,
+        lastValidTime,
+        format,
+        placeholder,
+        min,
+        max,
+        onInputChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        description,
+        error: errorProp,
+        className: popoverDisabled ? className : void 0,
+        ...rest,
+        "data-anv": "time-field"
+      }
+    );
+    if (popoverDisabled) {
+      return justTheInput;
+    }
+    return /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: isDropdownOpen,
+        noPadding: true,
+        disableCaret: true,
+        placement: "bottom-start",
+        matchReferenceWidth: true,
+        modal: false,
+        onClickOutside: () => {
+          setIsDropdownOpen(false);
+        },
+        onClose: () => {
+          setIsDropdownOpen(false);
+        },
+        fitScreen: true,
+        children: [
+          /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: popoverRef }) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: popoverRef,
+              className,
+              children: justTheInput
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Popover.Content,
+            {
+              ref: popoverContentRef,
+              "data-open": isDropdownOpen,
+              "data-disabled": disableSuggestions,
+              onMouseDown: () => {
+                isDropdownClickingRef.current = true;
+              },
+              onTouchStart: () => {
+                isDropdownClickingRef.current = true;
+              },
+              children: shouldShowOptions && /* @__PURE__ */ jsx(
+                Listbox,
+                {
+                  selected: filteredOptions[selectedOptionIndex],
+                  onSelectionChange: (selected) => {
+                    if (selected) {
+                      handleOptionSelect(selected);
+                    } else {
+                      const currentOption = filteredOptions[selectedOptionIndex];
+                      if (currentOption) {
+                        handleOptionSelect(currentOption);
+                      }
+                    }
+                  },
+                  "aria-label": "Time suggestions",
+                  children: filteredOptions.map((option) => /* @__PURE__ */ jsx(Listbox.Option, { value: option, label: option, children: option }, option))
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+const TimeField$1 = Object.assign(TimeFieldElement, {});
+TimeField$1.displayName = "TimeField";
+
+const TimeField = forwardRef(
+  (props, ref) => {
+    const data = {
+      label: childrenToString(props.label),
+      labelProps: props.labelProps,
+      prefix: childrenToString(props.prefix),
+      hint: childrenToString(props.hint),
+      description: childrenToString(props.description),
+      size: props.size,
+      format: props.format,
+      step: props.step,
+      min: props.min,
+      max: props.max,
+      autoround: props.autoround,
+      disableSuggestions: props.disableSuggestions
+    };
+    const trackingId = useTrackingId({
+      name: "TimeField",
+      data,
+      hasOverride: !!props["data-tracking-id"]
+    });
+    return /* @__PURE__ */ jsx(TimeField$1, { ref, "data-tracking-id": trackingId, ...props });
+  }
+);
+TimeField.displayName = TimeField$1.displayName;
+
+export { TimeField as T };
+//# sourceMappingURL=TimeField-DRHLRqN3.js.map