@fluentui/react-timepicker-compat 0.1.9 → 0.2.0

package/CHANGELOG.md

@@ -1,17 +1,34 @@
 # Change Log - @fluentui/react-timepicker-compat
 
-This log was last generated on Tue, 06 Feb 2024 17:52:10 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Feb 2024 14:15:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.2.0)
+
+Tue, 20 Feb 2024 14:15:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.1.9..@fluentui/react-timepicker-compat_v0.2.0)
+
+### Minor changes
+
+- feat: add "clearable" prop ([PR #30512](https://github.com/microsoft/fluentui/pull/30512) by olfedias@microsoft.com)
+- Bump @fluentui/react-combobox to v9.8.0 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-field to v9.1.54 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.30 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-utilities to v9.18.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+
+### Patches
+
+- refactor: update activedescendant management from combobox ([PR #30539](https://github.com/microsoft/fluentui/pull/30539) by lingfan.gao@microsoft.com)
+
 ## [0.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.1.9)
 
-Tue, 06 Feb 2024 17:52:10 GMT 
+Tue, 06 Feb 2024 17:55:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.1.8..@fluentui/react-timepicker-compat_v0.1.9)
 
 ### Patches
 
-- Bump @fluentui/react-combobox to v9.7.5 ([PR #26681](https://github.com/microsoft/fluentui/pull/26681) by beachball)
+- Bump @fluentui/react-combobox to v9.7.5 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
 
 ## [0.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.1.8)
 

package/dist/index.d.ts

@@ -55,7 +55,7 @@ export declare type TimePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'r
 /**
  * TimePicker Props
  */
-export declare type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & Pick<ComboboxProps, 'appearance' | 'defaultOpen' | 'defaultValue' | 'inlinePopup' | 'onOpenChange' | 'open' | 'placeholder' | 'positioning' | 'size' | 'value' | 'mountNode' | 'freeform'> & TimeFormatOptions & {
+export declare type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & Pick<ComboboxProps, 'appearance' | 'clearable' | 'defaultOpen' | 'defaultValue' | 'inlinePopup' | 'onOpenChange' | 'open' | 'placeholder' | 'positioning' | 'size' | 'value' | 'mountNode' | 'freeform'> & TimeFormatOptions & {
     /**
      * Start hour (inclusive) for the time range, 0-24.
      */
@@ -94,7 +94,7 @@ export declare type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>
     parseTimeStringToDate?: (time: string | undefined) => TimeStringValidationResult;
 };
 
-export declare type TimePickerSlots = Omit<ComboboxSlots, 'clearIcon'>;
+export declare type TimePickerSlots = ComboboxSlots;
 
 /**
  * State used in rendering TimePicker

package/lib/components/TimePicker/TimePicker.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TimePicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComboboxSlots, ComboboxState, ComboboxProps, SelectionEvents } from '@fluentui/react-combobox';\nimport type { ComponentProps } from '@fluentui/react-utilities';\n\nexport type Hour =\n  | 0\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10\n  | 11\n  | 12\n  | 13\n  | 14\n  | 15\n  | 16\n  | 17\n  | 18\n  | 19\n  | 20\n  | 21\n  | 22\n  | 23\n  | 24;\n\n/**\n * Data structure for rendering options in the TimePicker.\n */\nexport type TimePickerOption = {\n  /**\n   * The Date object associated with the option.\n   */\n  date: Date;\n\n  /**\n   * A unique identifier for the option.\n   */\n  key: string;\n\n  /**\n   * The display text for the option within the Combobox dropdown.\n   */\n  text: string;\n};\n\n/**\n * Error types returned by the `onValidationResult` callback.\n */\nexport type TimePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input';\n\nexport type TimeStringValidationResult = {\n  date: Date | null;\n  errorType?: TimePickerErrorType;\n};\n\nexport type TimePickerSlots = Omit<ComboboxSlots, 'clearIcon'>;\n\nexport type TimeSelectionEvents = SelectionEvents | React.FocusEvent<HTMLElement>;\nexport type TimeSelectionData = {\n  /**\n   * The Date object associated with the selected option. For freeform TimePicker it can also be the Date object parsed from the user input.\n   */\n  selectedTime: Date | null;\n  /**\n   * The display text for the selected option. For freeform TimePicker it can also be the value in user input.\n   */\n  selectedTimeText: string | undefined;\n  /**\n   * The error type for the selected option.\n   */\n  errorType: TimePickerErrorType | undefined;\n};\n\nexport type TimeFormatOptions = {\n  /**\n   * A string value indicating whether the 12-hour format (\"h11\", \"h12\") or the 24-hour format (\"h23\", \"h24\") should be used.\n   * - 'h11' and 'h23' start with hour 0 and go up to 11 and 23 respectively.\n   * - 'h12' and 'h24' start with hour 1 and go up to 12 and 24 respectively.\n   * @default undefined\n   */\n  hourCycle?: 'h11' | 'h12' | 'h23' | 'h24' | undefined;\n\n  /**\n   * If true, show seconds in the dropdown options and consider seconds for default validation purposes.\n   */\n  showSeconds?: boolean;\n};\n\n/**\n * TimePicker Props\n */\nexport type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  Pick<\n    ComboboxProps,\n    | 'appearance'\n    | 'defaultOpen'\n    | 'defaultValue'\n    | 'inlinePopup'\n    | 'onOpenChange'\n    | 'open'\n    | 'placeholder'\n    | 'positioning'\n    | 'size'\n    | 'value'\n    | 'mountNode'\n    | 'freeform'\n  > &\n  TimeFormatOptions & {\n    /**\n     * Start hour (inclusive) for the time range, 0-24.\n     */\n    startHour?: Hour;\n\n    /**\n     * End hour (exclusive) for the time range, 0-24.\n     */\n    endHour?: Hour;\n\n    /**\n     * Time increment, in minutes, of the options in the dropdown.\n     */\n    increment?: number;\n\n    /**\n     * The date in which all dropdown options are based off of.\n     */\n    dateAnchor?: Date;\n\n    /**\n     * Currently selected time in the TimePicker.\n     */\n    selectedTime?: Date | null;\n\n    /**\n     * Default selected time in the TimePicker, for uncontrolled scenarios.\n     */\n    defaultSelectedTime?: Date;\n\n    /**\n     * Callback for when a time selection is made.\n     */\n    onTimeChange?: (event: TimeSelectionEvents, data: TimeSelectionData) => void;\n\n    /**\n     * Customizes the formatting of date strings displayed in dropdown options.\n     */\n    formatDateToTimeString?: (date: Date) => string;\n\n    /**\n     * In the freeform TimePicker, customizes the parsing from the input time string into a Date and provides custom validation.\n     */\n    parseTimeStringToDate?: (time: string | undefined) => TimeStringValidationResult;\n  };\n\n/**\n * State used in rendering TimePicker\n */\nexport type TimePickerState = ComboboxState &\n  Required<Pick<TimePickerProps, 'freeform' | 'parseTimeStringToDate'>> & {\n    /**\n     * Submitted text from the input field. It is used to determine if the input value has changed when user submit a new value on Enter or blur from input.\n     */\n    submittedText: string | undefined;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["TimePicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComboboxSlots, ComboboxState, ComboboxProps, SelectionEvents } from '@fluentui/react-combobox';\nimport type { ComponentProps } from '@fluentui/react-utilities';\n\nexport type Hour =\n  | 0\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10\n  | 11\n  | 12\n  | 13\n  | 14\n  | 15\n  | 16\n  | 17\n  | 18\n  | 19\n  | 20\n  | 21\n  | 22\n  | 23\n  | 24;\n\n/**\n * Data structure for rendering options in the TimePicker.\n */\nexport type TimePickerOption = {\n  /**\n   * The Date object associated with the option.\n   */\n  date: Date;\n\n  /**\n   * A unique identifier for the option.\n   */\n  key: string;\n\n  /**\n   * The display text for the option within the Combobox dropdown.\n   */\n  text: string;\n};\n\n/**\n * Error types returned by the `onValidationResult` callback.\n */\nexport type TimePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input';\n\nexport type TimeStringValidationResult = {\n  date: Date | null;\n  errorType?: TimePickerErrorType;\n};\n\nexport type TimePickerSlots = ComboboxSlots;\n\nexport type TimeSelectionEvents = SelectionEvents | React.FocusEvent<HTMLElement>;\nexport type TimeSelectionData = {\n  /**\n   * The Date object associated with the selected option. For freeform TimePicker it can also be the Date object parsed from the user input.\n   */\n  selectedTime: Date | null;\n  /**\n   * The display text for the selected option. For freeform TimePicker it can also be the value in user input.\n   */\n  selectedTimeText: string | undefined;\n  /**\n   * The error type for the selected option.\n   */\n  errorType: TimePickerErrorType | undefined;\n};\n\nexport type TimeFormatOptions = {\n  /**\n   * A string value indicating whether the 12-hour format (\"h11\", \"h12\") or the 24-hour format (\"h23\", \"h24\") should be used.\n   * - 'h11' and 'h23' start with hour 0 and go up to 11 and 23 respectively.\n   * - 'h12' and 'h24' start with hour 1 and go up to 12 and 24 respectively.\n   * @default undefined\n   */\n  hourCycle?: 'h11' | 'h12' | 'h23' | 'h24' | undefined;\n\n  /**\n   * If true, show seconds in the dropdown options and consider seconds for default validation purposes.\n   */\n  showSeconds?: boolean;\n};\n\n/**\n * TimePicker Props\n */\nexport type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  Pick<\n    ComboboxProps,\n    | 'appearance'\n    | 'clearable'\n    | 'defaultOpen'\n    | 'defaultValue'\n    | 'inlinePopup'\n    | 'onOpenChange'\n    | 'open'\n    | 'placeholder'\n    | 'positioning'\n    | 'size'\n    | 'value'\n    | 'mountNode'\n    | 'freeform'\n  > &\n  TimeFormatOptions & {\n    /**\n     * Start hour (inclusive) for the time range, 0-24.\n     */\n    startHour?: Hour;\n\n    /**\n     * End hour (exclusive) for the time range, 0-24.\n     */\n    endHour?: Hour;\n\n    /**\n     * Time increment, in minutes, of the options in the dropdown.\n     */\n    increment?: number;\n\n    /**\n     * The date in which all dropdown options are based off of.\n     */\n    dateAnchor?: Date;\n\n    /**\n     * Currently selected time in the TimePicker.\n     */\n    selectedTime?: Date | null;\n\n    /**\n     * Default selected time in the TimePicker, for uncontrolled scenarios.\n     */\n    defaultSelectedTime?: Date;\n\n    /**\n     * Callback for when a time selection is made.\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n    onTimeChange?: (event: TimeSelectionEvents, data: TimeSelectionData) => void;\n\n    /**\n     * Customizes the formatting of date strings displayed in dropdown options.\n     */\n    formatDateToTimeString?: (date: Date) => string;\n\n    /**\n     * In the freeform TimePicker, customizes the parsing from the input time string into a Date and provides custom validation.\n     */\n    parseTimeStringToDate?: (time: string | undefined) => TimeStringValidationResult;\n  };\n\n/**\n * State used in rendering TimePicker\n */\nexport type TimePickerState = ComboboxState &\n  Required<Pick<TimePickerProps, 'freeform' | 'parseTimeStringToDate'>> & {\n    /**\n     * Submitted text from the input field. It is used to determine if the input value has changed when user submit a new value on Enter or blur from input.\n     */\n    submittedText: string | undefined;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/TimePicker/useTimePicker.js

@@ -124,23 +124,33 @@ import { dateToKey, keyToDate, formatDateToTimeString as defaultFormatDateToTime
  * - Enter/Tab key is pressed on the input.
  * - TimePicker loses focus, signifying a possible change.
  */ const useSelectTimeFromValue = (state, callback)=>{
-    const { activeOption, freeform, parseTimeStringToDate, submittedText, setActiveOption, value } = state;
+    const { getOptionById, freeform, parseTimeStringToDate, submittedText, value, activeDescendantController } = state;
+    const getActiveOption = React.useCallback(()=>{
+        const activeOptionId = activeDescendantController.active();
+        return activeOptionId ? getOptionById(activeOptionId) : null;
+    }, [
+        activeDescendantController,
+        getOptionById
+    ]);
     // Base Combobox has activeOption default to first option in dropdown even if it doesn't match input value, and Enter key will select it.
     // This effect ensures that the activeOption is cleared when the input doesn't match any option.
     // This behavior is specific to a freeform TimePicker where the input value is treated as a valid time even if it's not in the dropdown.
     React.useEffect(()=>{
         if (freeform && value) {
-            setActiveOption((prevActiveOption)=>{
-                if ((prevActiveOption === null || prevActiveOption === void 0 ? void 0 : prevActiveOption.text) && prevActiveOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0) {
-                    return prevActiveOption;
-                }
-                return undefined;
-            });
+            const activeOption = getActiveOption();
+            if (!activeOption) {
+                return;
+            }
+            const valueMatchesActiveOption = activeOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0;
+            if (!valueMatchesActiveOption) {
+                activeDescendantController.blur();
+            }
         }
     }, [
         freeform,
-        setActiveOption,
-        value
+        value,
+        activeDescendantController,
+        getActiveOption
     ]);
     const selectTimeFromValue = useEventCallback((e)=>{
         if (!freeform) {
@@ -157,6 +167,7 @@ import { dateToKey, keyToDate, formatDateToTimeString as defaultFormatDateToTime
         }
     });
     const handleKeyDown = useEventCallback((e)=>{
+        const activeOption = getActiveOption();
         if (!activeOption && e.key === Enter) {
             selectTimeFromValue(e);
         }

package/lib/components/TimePicker/useTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTimePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  elementContains,\n  mergeCallbacks,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport type { Hour, TimePickerOption, TimePickerProps, TimePickerState, TimeSelectionData } from './TimePicker.types';\nimport { ComboboxProps, useCombobox_unstable, Option } from '@fluentui/react-combobox';\nimport { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';\nimport {\n  dateToKey,\n  keyToDate,\n  formatDateToTimeString as defaultFormatDateToTimeString,\n  getDateStartAnchor,\n  getDateEndAnchor,\n  getTimesBetween,\n  getDateFromTimeString,\n} from './timeMath';\n\n/**\n * Create the state required to render TimePicker.\n *\n * The returned state can be modified with hooks such as useTimePickerStyles_unstable,\n * before being passed to renderTimePicker_unstable.\n *\n * @param props - props from this instance of TimePicker\n * @param ref - reference to root HTMLElement of TimePicker\n */\nexport const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HTMLInputElement>): TimePickerState => {\n  const {\n    dateAnchor: dateAnchorInProps,\n    defaultSelectedTime: defaultSelectedTimeInProps,\n    endHour = 24,\n    formatDateToTimeString = defaultFormatDateToTimeString,\n    hourCycle,\n    increment = 30,\n    onTimeChange,\n    selectedTime: selectedTimeInProps,\n    showSeconds = false,\n    startHour = 0,\n    parseTimeStringToDate: parseTimeStringToDateInProps,\n    ...rest\n  } = props;\n  const { freeform = false } = rest;\n\n  const { dateStartAnchor, dateEndAnchor } = useStableDateAnchor(\n    dateAnchorInProps ?? selectedTimeInProps ?? defaultSelectedTimeInProps,\n    startHour,\n    endHour,\n  );\n\n  const options: TimePickerOption[] = React.useMemo(\n    () =>\n      getTimesBetween(dateStartAnchor, dateEndAnchor, increment).map(time => ({\n        date: time,\n        key: dateToKey(time),\n        text: formatDateToTimeString(time, { showSeconds, hourCycle }),\n      })),\n    [dateEndAnchor, dateStartAnchor, formatDateToTimeString, hourCycle, increment, showSeconds],\n  );\n\n  const [selectedTime, setSelectedTime] = useControllableState<Date | null>({\n    state: selectedTimeInProps,\n    defaultState: defaultSelectedTimeInProps,\n    initialState: null,\n  });\n\n  const [submittedText, setSubmittedText] = React.useState<string | undefined>(undefined);\n\n  const selectTime: TimePickerProps['onTimeChange'] = useEventCallback((e, data) => {\n    setSelectedTime(data.selectedTime);\n    setSubmittedText(data.selectedTimeText);\n    onTimeChange?.(e, data);\n  });\n\n  const selectedOptions = React.useMemo(() => {\n    const selectedTimeKey = dateToKey(selectedTime);\n    const selectedOption = options.find(date => date.key === selectedTimeKey);\n    return selectedOption ? [selectedOption.key] : [];\n  }, [options, selectedTime]);\n\n  const handleOptionSelect: ComboboxProps['onOptionSelect'] = useEventCallback((e, data) => {\n    if (freeform && data.optionValue === undefined) {\n      // Combobox clears selection when input value not matching any option; but we allow this case in freeform TimePicker.\n      return;\n    }\n    const timeSelectionData: TimeSelectionData = {\n      selectedTime: keyToDate(data.optionValue ?? ''),\n      selectedTimeText: data.optionText,\n      errorType: undefined,\n    };\n    selectTime(e, timeSelectionData);\n  });\n\n  const baseState = useCombobox_unstable(\n    {\n      autoComplete: 'off',\n      ...rest,\n      selectedOptions,\n      onOptionSelect: handleOptionSelect,\n      children: options.map(date => (\n        <Option key={date.key} value={date.key}>\n          {date.text}\n        </Option>\n      )),\n    },\n    ref,\n  );\n\n  const defaultParseTimeStringToDate = React.useCallback(\n    (time: string | undefined) =>\n      getDateFromTimeString(time, dateStartAnchor, dateEndAnchor, { hourCycle, showSeconds }),\n    [dateEndAnchor, dateStartAnchor, hourCycle, showSeconds],\n  );\n\n  const state: TimePickerState = {\n    ...baseState,\n    freeform,\n    parseTimeStringToDate: parseTimeStringToDateInProps ?? defaultParseTimeStringToDate,\n    submittedText,\n  };\n\n  useDefaultChevronIconLabel(state);\n  useSelectTimeFromValue(state, selectTime);\n\n  return state;\n};\n\n/**\n * Provides stable start and end date anchors based on the provided date and time parameters.\n * The hook ensures that the memoization remains consistent even if new Date objects representing the same date are provided.\n */\nconst useStableDateAnchor = (providedDate: Date | undefined, startHour: Hour, endHour: Hour) => {\n  const [fallbackDateAnchor] = React.useState(() => new Date());\n\n  const providedDateKey = dateToKey(providedDate ?? null);\n\n  return React.useMemo(() => {\n    const dateAnchor = providedDate ?? fallbackDateAnchor;\n\n    const dateStartAnchor = getDateStartAnchor(dateAnchor, startHour);\n    const dateEndAnchor = getDateEndAnchor(dateAnchor, startHour, endHour);\n\n    return { dateStartAnchor, dateEndAnchor };\n    // `providedDate`'s stable key representation is used as dependency instead of the Date object. This ensures that the memoization remains stable when a new Date object representing the same date is passed in.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [endHour, fallbackDateAnchor, providedDateKey, startHour]);\n};\n\n/**\n * Mimics the behavior of the browser's change event for a freeform TimePicker.\n * The provided callback is called when input changed and:\n * - Enter/Tab key is pressed on the input.\n * - TimePicker loses focus, signifying a possible change.\n */\nconst useSelectTimeFromValue = (state: TimePickerState, callback: TimePickerProps['onTimeChange']) => {\n  const { activeOption, freeform, parseTimeStringToDate, submittedText, setActiveOption, value } = state;\n\n  // Base Combobox has activeOption default to first option in dropdown even if it doesn't match input value, and Enter key will select it.\n  // This effect ensures that the activeOption is cleared when the input doesn't match any option.\n  // This behavior is specific to a freeform TimePicker where the input value is treated as a valid time even if it's not in the dropdown.\n  React.useEffect(() => {\n    if (freeform && value) {\n      setActiveOption(prevActiveOption => {\n        if (prevActiveOption?.text && prevActiveOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0) {\n          return prevActiveOption;\n        }\n        return undefined;\n      });\n    }\n  }, [freeform, setActiveOption, value]);\n\n  const selectTimeFromValue = useEventCallback(\n    (e: React.KeyboardEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement>) => {\n      if (!freeform) {\n        return;\n      }\n\n      const { date: selectedTime, errorType } = parseTimeStringToDate(value);\n\n      // Only triggers callback when the text in input has changed.\n      if (submittedText !== value) {\n        callback?.(e, { selectedTime, selectedTimeText: value, errorType });\n      }\n    },\n  );\n\n  const handleKeyDown: ComboboxProps['onKeyDown'] = useEventCallback(e => {\n    if (!activeOption && e.key === Enter) {\n      selectTimeFromValue(e);\n    }\n  });\n  state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  if (state.listbox) {\n    state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n  }\n\n  const handleInputBlur = useEventCallback((e: React.FocusEvent<HTMLInputElement>) => {\n    const isOutside = e.relatedTarget ? !elementContains(rootRef.current, e.relatedTarget) : true;\n    if (isOutside) {\n      selectTimeFromValue(e);\n    }\n  });\n  state.input.onBlur = mergeCallbacks(handleInputBlur, state.input.onBlur);\n};\n\n/**\n * Provides a default aria-labelledby for the chevron icon if the TimePicker is wrapped in a Field.\n */\nconst useDefaultChevronIconLabel = (state: TimePickerState) => {\n  const fieldContext = useFieldContext();\n  const chevronDefaultId = useId('timepicker-chevron-');\n  const defaultLabelFromCombobox = 'Open';\n\n  if (fieldContext?.labelId && state.expandIcon?.['aria-label'] === defaultLabelFromCombobox) {\n    const chevronId = state.expandIcon.id ?? chevronDefaultId;\n    state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;\n  }\n};\n"],"names":["React","elementContains","mergeCallbacks","useControllableState","useEventCallback","useId","useMergedRefs","Enter","useCombobox_unstable","Option","useFieldContext_unstable","useFieldContext","dateToKey","keyToDate","formatDateToTimeString","defaultFormatDateToTimeString","getDateStartAnchor","getDateEndAnchor","getTimesBetween","getDateFromTimeString","useTimePicker_unstable","props","ref","dateAnchor","dateAnchorInProps","defaultSelectedTime","defaultSelectedTimeInProps","endHour","hourCycle","increment","onTimeChange","selectedTime","selectedTimeInProps","showSeconds","startHour","parseTimeStringToDate","parseTimeStringToDateInProps","rest","freeform","dateStartAnchor","dateEndAnchor","useStableDateAnchor","options","useMemo","map","time","date","key","text","setSelectedTime","state","defaultState","initialState","submittedText","setSubmittedText","useState","undefined","selectTime","e","data","selectedTimeText","selectedOptions","selectedTimeKey","selectedOption","find","handleOptionSelect","optionValue","timeSelectionData","optionText","errorType","baseState","autoComplete","onOptionSelect","children","value","defaultParseTimeStringToDate","useCallback","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","callback","activeOption","setActiveOption","useEffect","prevActiveOption","toLowerCase","indexOf","selectTimeFromValue","handleKeyDown","root","onKeyDown","rootRef","useRef","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","current","input","onBlur","fieldContext","chevronDefaultId","defaultLabelFromCombobox","labelId","chevronId","id"],"mappings":"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"}
+{"version":3,"sources":["useTimePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  elementContains,\n  mergeCallbacks,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport type { Hour, TimePickerOption, TimePickerProps, TimePickerState, TimeSelectionData } from './TimePicker.types';\nimport { ComboboxProps, useCombobox_unstable, Option } from '@fluentui/react-combobox';\nimport { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';\nimport {\n  dateToKey,\n  keyToDate,\n  formatDateToTimeString as defaultFormatDateToTimeString,\n  getDateStartAnchor,\n  getDateEndAnchor,\n  getTimesBetween,\n  getDateFromTimeString,\n} from './timeMath';\n\n/**\n * Create the state required to render TimePicker.\n *\n * The returned state can be modified with hooks such as useTimePickerStyles_unstable,\n * before being passed to renderTimePicker_unstable.\n *\n * @param props - props from this instance of TimePicker\n * @param ref - reference to root HTMLElement of TimePicker\n */\nexport const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HTMLInputElement>): TimePickerState => {\n  const {\n    dateAnchor: dateAnchorInProps,\n    defaultSelectedTime: defaultSelectedTimeInProps,\n    endHour = 24,\n    formatDateToTimeString = defaultFormatDateToTimeString,\n    hourCycle,\n    increment = 30,\n    onTimeChange,\n    selectedTime: selectedTimeInProps,\n    showSeconds = false,\n    startHour = 0,\n    parseTimeStringToDate: parseTimeStringToDateInProps,\n    ...rest\n  } = props;\n  const { freeform = false } = rest;\n\n  const { dateStartAnchor, dateEndAnchor } = useStableDateAnchor(\n    dateAnchorInProps ?? selectedTimeInProps ?? defaultSelectedTimeInProps,\n    startHour,\n    endHour,\n  );\n\n  const options: TimePickerOption[] = React.useMemo(\n    () =>\n      getTimesBetween(dateStartAnchor, dateEndAnchor, increment).map(time => ({\n        date: time,\n        key: dateToKey(time),\n        text: formatDateToTimeString(time, { showSeconds, hourCycle }),\n      })),\n    [dateEndAnchor, dateStartAnchor, formatDateToTimeString, hourCycle, increment, showSeconds],\n  );\n\n  const [selectedTime, setSelectedTime] = useControllableState<Date | null>({\n    state: selectedTimeInProps,\n    defaultState: defaultSelectedTimeInProps,\n    initialState: null,\n  });\n\n  const [submittedText, setSubmittedText] = React.useState<string | undefined>(undefined);\n\n  const selectTime: TimePickerProps['onTimeChange'] = useEventCallback((e, data) => {\n    setSelectedTime(data.selectedTime);\n    setSubmittedText(data.selectedTimeText);\n    onTimeChange?.(e, data);\n  });\n\n  const selectedOptions = React.useMemo(() => {\n    const selectedTimeKey = dateToKey(selectedTime);\n    const selectedOption = options.find(date => date.key === selectedTimeKey);\n    return selectedOption ? [selectedOption.key] : [];\n  }, [options, selectedTime]);\n\n  const handleOptionSelect: ComboboxProps['onOptionSelect'] = useEventCallback((e, data) => {\n    if (freeform && data.optionValue === undefined) {\n      // Combobox clears selection when input value not matching any option; but we allow this case in freeform TimePicker.\n      return;\n    }\n    const timeSelectionData: TimeSelectionData = {\n      selectedTime: keyToDate(data.optionValue ?? ''),\n      selectedTimeText: data.optionText,\n      errorType: undefined,\n    };\n    selectTime(e, timeSelectionData);\n  });\n\n  const baseState = useCombobox_unstable(\n    {\n      autoComplete: 'off',\n      ...rest,\n      selectedOptions,\n      onOptionSelect: handleOptionSelect,\n      children: options.map(date => (\n        <Option key={date.key} value={date.key}>\n          {date.text}\n        </Option>\n      )),\n    },\n    ref,\n  );\n\n  const defaultParseTimeStringToDate = React.useCallback(\n    (time: string | undefined) =>\n      getDateFromTimeString(time, dateStartAnchor, dateEndAnchor, { hourCycle, showSeconds }),\n    [dateEndAnchor, dateStartAnchor, hourCycle, showSeconds],\n  );\n\n  const state: TimePickerState = {\n    ...baseState,\n    freeform,\n    parseTimeStringToDate: parseTimeStringToDateInProps ?? defaultParseTimeStringToDate,\n    submittedText,\n  };\n\n  useDefaultChevronIconLabel(state);\n  useSelectTimeFromValue(state, selectTime);\n\n  return state;\n};\n\n/**\n * Provides stable start and end date anchors based on the provided date and time parameters.\n * The hook ensures that the memoization remains consistent even if new Date objects representing the same date are provided.\n */\nconst useStableDateAnchor = (providedDate: Date | undefined, startHour: Hour, endHour: Hour) => {\n  const [fallbackDateAnchor] = React.useState(() => new Date());\n\n  const providedDateKey = dateToKey(providedDate ?? null);\n\n  return React.useMemo(() => {\n    const dateAnchor = providedDate ?? fallbackDateAnchor;\n\n    const dateStartAnchor = getDateStartAnchor(dateAnchor, startHour);\n    const dateEndAnchor = getDateEndAnchor(dateAnchor, startHour, endHour);\n\n    return { dateStartAnchor, dateEndAnchor };\n    // `providedDate`'s stable key representation is used as dependency instead of the Date object. This ensures that the memoization remains stable when a new Date object representing the same date is passed in.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [endHour, fallbackDateAnchor, providedDateKey, startHour]);\n};\n\n/**\n * Mimics the behavior of the browser's change event for a freeform TimePicker.\n * The provided callback is called when input changed and:\n * - Enter/Tab key is pressed on the input.\n * - TimePicker loses focus, signifying a possible change.\n */\nconst useSelectTimeFromValue = (state: TimePickerState, callback: TimePickerProps['onTimeChange']) => {\n  const { getOptionById, freeform, parseTimeStringToDate, submittedText, value, activeDescendantController } = state;\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : null;\n  }, [activeDescendantController, getOptionById]);\n\n  // Base Combobox has activeOption default to first option in dropdown even if it doesn't match input value, and Enter key will select it.\n  // This effect ensures that the activeOption is cleared when the input doesn't match any option.\n  // This behavior is specific to a freeform TimePicker where the input value is treated as a valid time even if it's not in the dropdown.\n  React.useEffect(() => {\n    if (freeform && value) {\n      const activeOption = getActiveOption();\n      if (!activeOption) {\n        return;\n      }\n\n      const valueMatchesActiveOption = activeOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0;\n      if (!valueMatchesActiveOption) {\n        activeDescendantController.blur();\n      }\n    }\n  }, [freeform, value, activeDescendantController, getActiveOption]);\n\n  const selectTimeFromValue = useEventCallback(\n    (e: React.KeyboardEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement>) => {\n      if (!freeform) {\n        return;\n      }\n\n      const { date: selectedTime, errorType } = parseTimeStringToDate(value);\n\n      // Only triggers callback when the text in input has changed.\n      if (submittedText !== value) {\n        callback?.(e, { selectedTime, selectedTimeText: value, errorType });\n      }\n    },\n  );\n\n  const handleKeyDown: ComboboxProps['onKeyDown'] = useEventCallback(e => {\n    const activeOption = getActiveOption();\n    if (!activeOption && e.key === Enter) {\n      selectTimeFromValue(e);\n    }\n  });\n  state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  if (state.listbox) {\n    state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n  }\n\n  const handleInputBlur = useEventCallback((e: React.FocusEvent<HTMLInputElement>) => {\n    const isOutside = e.relatedTarget ? !elementContains(rootRef.current, e.relatedTarget) : true;\n    if (isOutside) {\n      selectTimeFromValue(e);\n    }\n  });\n  state.input.onBlur = mergeCallbacks(handleInputBlur, state.input.onBlur);\n};\n\n/**\n * Provides a default aria-labelledby for the chevron icon if the TimePicker is wrapped in a Field.\n */\nconst useDefaultChevronIconLabel = (state: TimePickerState) => {\n  const fieldContext = useFieldContext();\n  const chevronDefaultId = useId('timepicker-chevron-');\n  const defaultLabelFromCombobox = 'Open';\n\n  if (fieldContext?.labelId && state.expandIcon?.['aria-label'] === defaultLabelFromCombobox) {\n    const chevronId = state.expandIcon.id ?? chevronDefaultId;\n    state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;\n  }\n};\n"],"names":["React","elementContains","mergeCallbacks","useControllableState","useEventCallback","useId","useMergedRefs","Enter","useCombobox_unstable","Option","useFieldContext_unstable","useFieldContext","dateToKey","keyToDate","formatDateToTimeString","defaultFormatDateToTimeString","getDateStartAnchor","getDateEndAnchor","getTimesBetween","getDateFromTimeString","useTimePicker_unstable","props","ref","dateAnchor","dateAnchorInProps","defaultSelectedTime","defaultSelectedTimeInProps","endHour","hourCycle","increment","onTimeChange","selectedTime","selectedTimeInProps","showSeconds","startHour","parseTimeStringToDate","parseTimeStringToDateInProps","rest","freeform","dateStartAnchor","dateEndAnchor","useStableDateAnchor","options","useMemo","map","time","date","key","text","setSelectedTime","state","defaultState","initialState","submittedText","setSubmittedText","useState","undefined","selectTime","e","data","selectedTimeText","selectedOptions","selectedTimeKey","selectedOption","find","handleOptionSelect","optionValue","timeSelectionData","optionText","errorType","baseState","autoComplete","onOptionSelect","children","value","defaultParseTimeStringToDate","useCallback","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","callback","getOptionById","activeDescendantController","getActiveOption","activeOptionId","active","useEffect","activeOption","valueMatchesActiveOption","toLowerCase","indexOf","blur","selectTimeFromValue","handleKeyDown","root","onKeyDown","rootRef","useRef","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","current","input","onBlur","fieldContext","chevronDefaultId","defaultLabelFromCombobox","labelId","chevronId","id"],"mappings":"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"}

package/lib/components/TimePicker/useTimePickerStyles.styles.js

@@ -4,6 +4,7 @@ export const timePickerClassNames = {
   root: 'fui-TimePicker',
   input: 'fui-TimePicker__input',
   expandIcon: 'fui-TimePicker__expandIcon',
+  clearIcon: 'fui-TimePicker__clearIcon',
   listbox: 'fui-TimePicker__listbox'
 };
 const useStyles = /*#__PURE__*/__styles({
@@ -23,6 +24,9 @@ export const useTimePickerStyles_unstable = state => {
   if (state.expandIcon) {
     state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);
   }
+  if (state.clearIcon) {
+    state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);
+  }
   if (state.listbox) {
     state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);
   }

package/lib/components/TimePicker/useTimePickerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","listbox","useStyles","Bxyxcbc","d","useTimePickerStyles_unstable","state","styles","className"],"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\nexport const timePickerClassNames = {\n    root: 'fui-TimePicker',\n    input: 'fui-TimePicker__input',\n    expandIcon: 'fui-TimePicker__expandIcon',\n    listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = makeStyles({\n    listbox: {\n        maxHeight: 'min(80vh, 416px)'\n    }\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */ export const useTimePickerStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n    state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n    }\n    if (state.listbox) {\n        state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n    }\n    useComboboxStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE,4BAA4B;EACxCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,gBAAGR,QAAA;EAAAO,OAAA;IAAAE,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1BI,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EACpFF,KAAK,CAACP,KAAK,CAACS,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACE,KAAK,EAAEO,KAAK,CAACP,KAAK,CAACS,SAAS,CAAC;EACvF,IAAIF,KAAK,CAACN,UAAU,EAAE;IAClBM,KAAK,CAACN,UAAU,CAACQ,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACG,UAAU,EAAEM,KAAK,CAACN,UAAU,CAACQ,SAAS,CAAC;EAC1G;EACA,IAAIF,KAAK,CAACL,OAAO,EAAE;IACfK,KAAK,CAACL,OAAO,CAACO,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACI,OAAO,EAAEM,MAAM,CAACN,OAAO,EAAEK,KAAK,CAACL,OAAO,CAACO,SAAS,CAAC;EACjH;EACAZ,0BAA0B,CAACU,KAAK,CAAC;EACjC,OAAOA,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","clearIcon","listbox","useStyles","Bxyxcbc","d","useTimePickerStyles_unstable","state","styles","className"],"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\nexport const timePickerClassNames = {\n    root: 'fui-TimePicker',\n    input: 'fui-TimePicker__input',\n    expandIcon: 'fui-TimePicker__expandIcon',\n    clearIcon: 'fui-TimePicker__clearIcon',\n    listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = makeStyles({\n    listbox: {\n        maxHeight: 'min(80vh, 416px)'\n    }\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */ export const useTimePickerStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n    state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n    }\n    if (state.clearIcon) {\n        state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n    }\n    if (state.listbox) {\n        state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n    }\n    useComboboxStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE,4BAA4B;EACxCC,SAAS,EAAE,2BAA2B;EACtCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,gBAAGT,QAAA;EAAAQ,OAAA;IAAAE,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1BI,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EACpFF,KAAK,CAACR,KAAK,CAACU,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACE,KAAK,EAAEQ,KAAK,CAACR,KAAK,CAACU,SAAS,CAAC;EACvF,IAAIF,KAAK,CAACP,UAAU,EAAE;IAClBO,KAAK,CAACP,UAAU,CAACS,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACG,UAAU,EAAEO,KAAK,CAACP,UAAU,CAACS,SAAS,CAAC;EAC1G;EACA,IAAIF,KAAK,CAACN,SAAS,EAAE;IACjBM,KAAK,CAACN,SAAS,CAACQ,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACI,SAAS,EAAEM,KAAK,CAACN,SAAS,CAACQ,SAAS,CAAC;EACvG;EACA,IAAIF,KAAK,CAACL,OAAO,EAAE;IACfK,KAAK,CAACL,OAAO,CAACO,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACK,OAAO,EAAEM,MAAM,CAACN,OAAO,EAAEK,KAAK,CAACL,OAAO,CAACO,SAAS,CAAC;EACjH;EACAb,0BAA0B,CAACW,KAAK,CAAC;EACjC,OAAOA,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/TimePicker/useTimePicker.js

@@ -127,23 +127,33 @@ const useTimePicker_unstable = (props, ref)=>{
  * - Enter/Tab key is pressed on the input.
  * - TimePicker loses focus, signifying a possible change.
  */ const useSelectTimeFromValue = (state, callback)=>{
-    const { activeOption, freeform, parseTimeStringToDate, submittedText, setActiveOption, value } = state;
+    const { getOptionById, freeform, parseTimeStringToDate, submittedText, value, activeDescendantController } = state;
+    const getActiveOption = _react.useCallback(()=>{
+        const activeOptionId = activeDescendantController.active();
+        return activeOptionId ? getOptionById(activeOptionId) : null;
+    }, [
+        activeDescendantController,
+        getOptionById
+    ]);
     // Base Combobox has activeOption default to first option in dropdown even if it doesn't match input value, and Enter key will select it.
     // This effect ensures that the activeOption is cleared when the input doesn't match any option.
     // This behavior is specific to a freeform TimePicker where the input value is treated as a valid time even if it's not in the dropdown.
     _react.useEffect(()=>{
         if (freeform && value) {
-            setActiveOption((prevActiveOption)=>{
-                if ((prevActiveOption === null || prevActiveOption === void 0 ? void 0 : prevActiveOption.text) && prevActiveOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0) {
-                    return prevActiveOption;
-                }
-                return undefined;
-            });
+            const activeOption = getActiveOption();
+            if (!activeOption) {
+                return;
+            }
+            const valueMatchesActiveOption = activeOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0;
+            if (!valueMatchesActiveOption) {
+                activeDescendantController.blur();
+            }
         }
     }, [
         freeform,
-        setActiveOption,
-        value
+        value,
+        activeDescendantController,
+        getActiveOption
     ]);
     const selectTimeFromValue = (0, _reactutilities.useEventCallback)((e)=>{
         if (!freeform) {
@@ -160,6 +170,7 @@ const useTimePicker_unstable = (props, ref)=>{
         }
     });
     const handleKeyDown = (0, _reactutilities.useEventCallback)((e)=>{
+        const activeOption = getActiveOption();
         if (!activeOption && e.key === _keyboardkeys.Enter) {
             selectTimeFromValue(e);
         }

package/lib-commonjs/components/TimePicker/useTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTimePicker.js"],"sourcesContent":["import * as React from 'react';\nimport { elementContains, mergeCallbacks, useControllableState, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useCombobox_unstable, Option } from '@fluentui/react-combobox';\nimport { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';\nimport { dateToKey, keyToDate, formatDateToTimeString as defaultFormatDateToTimeString, getDateStartAnchor, getDateEndAnchor, getTimesBetween, getDateFromTimeString } from './timeMath';\n/**\n * Create the state required to render TimePicker.\n *\n * The returned state can be modified with hooks such as useTimePickerStyles_unstable,\n * before being passed to renderTimePicker_unstable.\n *\n * @param props - props from this instance of TimePicker\n * @param ref - reference to root HTMLElement of TimePicker\n */ export const useTimePicker_unstable = (props, ref)=>{\n    const { dateAnchor: dateAnchorInProps, defaultSelectedTime: defaultSelectedTimeInProps, endHour = 24, formatDateToTimeString = defaultFormatDateToTimeString, hourCycle, increment = 30, onTimeChange, selectedTime: selectedTimeInProps, showSeconds = false, startHour = 0, parseTimeStringToDate: parseTimeStringToDateInProps, ...rest } = props;\n    const { freeform = false } = rest;\n    var _ref;\n    const { dateStartAnchor, dateEndAnchor } = useStableDateAnchor((_ref = dateAnchorInProps !== null && dateAnchorInProps !== void 0 ? dateAnchorInProps : selectedTimeInProps) !== null && _ref !== void 0 ? _ref : defaultSelectedTimeInProps, startHour, endHour);\n    const options = React.useMemo(()=>getTimesBetween(dateStartAnchor, dateEndAnchor, increment).map((time)=>({\n                date: time,\n                key: dateToKey(time),\n                text: formatDateToTimeString(time, {\n                    showSeconds,\n                    hourCycle\n                })\n            })), [\n        dateEndAnchor,\n        dateStartAnchor,\n        formatDateToTimeString,\n        hourCycle,\n        increment,\n        showSeconds\n    ]);\n    const [selectedTime, setSelectedTime] = useControllableState({\n        state: selectedTimeInProps,\n        defaultState: defaultSelectedTimeInProps,\n        initialState: null\n    });\n    const [submittedText, setSubmittedText] = React.useState(undefined);\n    const selectTime = useEventCallback((e, data)=>{\n        setSelectedTime(data.selectedTime);\n        setSubmittedText(data.selectedTimeText);\n        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(e, data);\n    });\n    const selectedOptions = React.useMemo(()=>{\n        const selectedTimeKey = dateToKey(selectedTime);\n        const selectedOption = options.find((date)=>date.key === selectedTimeKey);\n        return selectedOption ? [\n            selectedOption.key\n        ] : [];\n    }, [\n        options,\n        selectedTime\n    ]);\n    const handleOptionSelect = useEventCallback((e, data)=>{\n        if (freeform && data.optionValue === undefined) {\n            // Combobox clears selection when input value not matching any option; but we allow this case in freeform TimePicker.\n            return;\n        }\n        var _data_optionValue;\n        const timeSelectionData = {\n            selectedTime: keyToDate((_data_optionValue = data.optionValue) !== null && _data_optionValue !== void 0 ? _data_optionValue : ''),\n            selectedTimeText: data.optionText,\n            errorType: undefined\n        };\n        selectTime(e, timeSelectionData);\n    });\n    const baseState = useCombobox_unstable({\n        autoComplete: 'off',\n        ...rest,\n        selectedOptions,\n        onOptionSelect: handleOptionSelect,\n        children: options.map((date)=>/*#__PURE__*/ React.createElement(Option, {\n                key: date.key,\n                value: date.key\n            }, date.text))\n    }, ref);\n    const defaultParseTimeStringToDate = React.useCallback((time)=>getDateFromTimeString(time, dateStartAnchor, dateEndAnchor, {\n            hourCycle,\n            showSeconds\n        }), [\n        dateEndAnchor,\n        dateStartAnchor,\n        hourCycle,\n        showSeconds\n    ]);\n    const state = {\n        ...baseState,\n        freeform,\n        parseTimeStringToDate: parseTimeStringToDateInProps !== null && parseTimeStringToDateInProps !== void 0 ? parseTimeStringToDateInProps : defaultParseTimeStringToDate,\n        submittedText\n    };\n    useDefaultChevronIconLabel(state);\n    useSelectTimeFromValue(state, selectTime);\n    return state;\n};\n/**\n * Provides stable start and end date anchors based on the provided date and time parameters.\n * The hook ensures that the memoization remains consistent even if new Date objects representing the same date are provided.\n */ const useStableDateAnchor = (providedDate, startHour, endHour)=>{\n    const [fallbackDateAnchor] = React.useState(()=>new Date());\n    const providedDateKey = dateToKey(providedDate !== null && providedDate !== void 0 ? providedDate : null);\n    return React.useMemo(()=>{\n        const dateAnchor = providedDate !== null && providedDate !== void 0 ? providedDate : fallbackDateAnchor;\n        const dateStartAnchor = getDateStartAnchor(dateAnchor, startHour);\n        const dateEndAnchor = getDateEndAnchor(dateAnchor, startHour, endHour);\n        return {\n            dateStartAnchor,\n            dateEndAnchor\n        };\n    // `providedDate`'s stable key representation is used as dependency instead of the Date object. This ensures that the memoization remains stable when a new Date object representing the same date is passed in.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        endHour,\n        fallbackDateAnchor,\n        providedDateKey,\n        startHour\n    ]);\n};\n/**\n * Mimics the behavior of the browser's change event for a freeform TimePicker.\n * The provided callback is called when input changed and:\n * - Enter/Tab key is pressed on the input.\n * - TimePicker loses focus, signifying a possible change.\n */ const useSelectTimeFromValue = (state, callback)=>{\n    const { activeOption, freeform, parseTimeStringToDate, submittedText, setActiveOption, value } = state;\n    // Base Combobox has activeOption default to first option in dropdown even if it doesn't match input value, and Enter key will select it.\n    // This effect ensures that the activeOption is cleared when the input doesn't match any option.\n    // This behavior is specific to a freeform TimePicker where the input value is treated as a valid time even if it's not in the dropdown.\n    React.useEffect(()=>{\n        if (freeform && value) {\n            setActiveOption((prevActiveOption)=>{\n                if ((prevActiveOption === null || prevActiveOption === void 0 ? void 0 : prevActiveOption.text) && prevActiveOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0) {\n                    return prevActiveOption;\n                }\n                return undefined;\n            });\n        }\n    }, [\n        freeform,\n        setActiveOption,\n        value\n    ]);\n    const selectTimeFromValue = useEventCallback((e)=>{\n        if (!freeform) {\n            return;\n        }\n        const { date: selectedTime, errorType } = parseTimeStringToDate(value);\n        // Only triggers callback when the text in input has changed.\n        if (submittedText !== value) {\n            callback === null || callback === void 0 ? void 0 : callback(e, {\n                selectedTime,\n                selectedTimeText: value,\n                errorType\n            });\n        }\n    });\n    const handleKeyDown = useEventCallback((e)=>{\n        if (!activeOption && e.key === Enter) {\n            selectTimeFromValue(e);\n        }\n    });\n    state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);\n    const rootRef = React.useRef(null);\n    state.root.ref = useMergedRefs(state.root.ref, rootRef);\n    if (state.listbox) {\n        state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n    }\n    if (state.expandIcon) {\n        state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n    }\n    const handleInputBlur = useEventCallback((e)=>{\n        const isOutside = e.relatedTarget ? !elementContains(rootRef.current, e.relatedTarget) : true;\n        if (isOutside) {\n            selectTimeFromValue(e);\n        }\n    });\n    state.input.onBlur = mergeCallbacks(handleInputBlur, state.input.onBlur);\n};\n/**\n * Provides a default aria-labelledby for the chevron icon if the TimePicker is wrapped in a Field.\n */ const useDefaultChevronIconLabel = (state)=>{\n    var _state_expandIcon;\n    const fieldContext = useFieldContext();\n    const chevronDefaultId = useId('timepicker-chevron-');\n    const defaultLabelFromCombobox = 'Open';\n    if ((fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.labelId) && ((_state_expandIcon = state.expandIcon) === null || _state_expandIcon === void 0 ? void 0 : _state_expandIcon['aria-label']) === defaultLabelFromCombobox) {\n        var _state_expandIcon_id;\n        const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : chevronDefaultId;\n        state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;\n    }\n};\n"],"names":["useTimePicker_unstable","props","ref","dateAnchor","dateAnchorInProps","defaultSelectedTime","defaultSelectedTimeInProps","endHour","formatDateToTimeString","defaultFormatDateToTimeString","hourCycle","increment","onTimeChange","selectedTime","selectedTimeInProps","showSeconds","startHour","parseTimeStringToDate","parseTimeStringToDateInProps","rest","freeform","_ref","dateStartAnchor","dateEndAnchor","useStableDateAnchor","options","React","useMemo","getTimesBetween","map","time","date","key","dateToKey","text","setSelectedTime","useControllableState","state","defaultState","initialState","submittedText","setSubmittedText","useState","undefined","selectTime","useEventCallback","e","data","selectedTimeText","selectedOptions","selectedTimeKey","selectedOption","find","handleOptionSelect","optionValue","_data_optionValue","timeSelectionData","keyToDate","optionText","errorType","baseState","useCombobox_unstable","autoComplete","onOptionSelect","children","createElement","Option","value","defaultParseTimeStringToDate","useCallback","getDateFromTimeString","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","getDateStartAnchor","getDateEndAnchor","callback","activeOption","setActiveOption","useEffect","prevActiveOption","toLowerCase","indexOf","selectTimeFromValue","handleKeyDown","Enter","root","onKeyDown","mergeCallbacks","rootRef","useRef","useMergedRefs","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","elementContains","current","input","onBlur","_state_expandIcon","fieldContext","useFieldContext","chevronDefaultId","useId","defaultLabelFromCombobox","labelId","_state_expandIcon_id","chevronId","id"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACuF;8BACxF;+BACuB;4BACe;0BACgH;AASjK,MAAMA,yBAAyB,CAACC,OAAOC;IAC9C,MAAM,EAAEC,YAAYC,iBAAiB,EAAEC,qBAAqBC,0BAA0B,EAAEC,UAAU,EAAE,EAAEC,yBAAyBC,gCAA6B,EAAEC,SAAS,EAAEC,YAAY,EAAE,EAAEC,YAAY,EAAEC,cAAcC,mBAAmB,EAAEC,cAAc,KAAK,EAAEC,YAAY,CAAC,EAAEC,uBAAuBC,4BAA4B,EAAE,GAAGC,MAAM,GAAGlB;IAC/U,MAAM,EAAEmB,WAAW,KAAK,EAAE,GAAGD;IAC7B,IAAIE;IACJ,MAAM,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGC,oBAAoB,AAACH,CAAAA,OAAOjB,sBAAsB,QAAQA,sBAAsB,KAAK,IAAIA,oBAAoBU,mBAAkB,MAAO,QAAQO,SAAS,KAAK,IAAIA,OAAOf,4BAA4BU,WAAWT;IACzP,MAAMkB,UAAUC,OAAMC,OAAO,CAAC,IAAIC,IAAAA,yBAAe,EAACN,iBAAiBC,eAAeZ,WAAWkB,GAAG,CAAC,CAACC,OAAQ,CAAA;gBAC9FC,MAAMD;gBACNE,KAAKC,IAAAA,mBAAS,EAACH;gBACfI,MAAM1B,uBAAuBsB,MAAM;oBAC/Bf;oBACAL;gBACJ;YACJ,CAAA,IAAK;QACTa;QACAD;QACAd;QACAE;QACAC;QACAI;KACH;IACD,MAAM,CAACF,cAAcsB,gBAAgB,GAAGC,IAAAA,oCAAoB,EAAC;QACzDC,OAAOvB;QACPwB,cAAchC;QACdiC,cAAc;IAClB;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGf,OAAMgB,QAAQ,CAACC;IACzD,MAAMC,aAAaC,IAAAA,gCAAgB,EAAC,CAACC,GAAGC;QACpCZ,gBAAgBY,KAAKlC,YAAY;QACjC4B,iBAAiBM,KAAKC,gBAAgB;QACtCpC,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAakC,GAAGC;IAChF;IACA,MAAME,kBAAkBvB,OAAMC,OAAO,CAAC;QAClC,MAAMuB,kBAAkBjB,IAAAA,mBAAS,EAACpB;QAClC,MAAMsC,iBAAiB1B,QAAQ2B,IAAI,CAAC,CAACrB,OAAOA,KAAKC,GAAG,KAAKkB;QACzD,OAAOC,iBAAiB;YACpBA,eAAenB,GAAG;SACrB,GAAG,EAAE;IACV,GAAG;QACCP;QACAZ;KACH;IACD,MAAMwC,qBAAqBR,IAAAA,gCAAgB,EAAC,CAACC,GAAGC;QAC5C,IAAI3B,YAAY2B,KAAKO,WAAW,KAAKX,WAAW;YAC5C,qHAAqH;YACrH;QACJ;QACA,IAAIY;QACJ,MAAMC,oBAAoB;YACtB3C,cAAc4C,IAAAA,mBAAS,EAAC,AAACF,CAAAA,oBAAoBR,KAAKO,WAAW,AAAD,MAAO,QAAQC,sBAAsB,KAAK,IAAIA,oBAAoB;YAC9HP,kBAAkBD,KAAKW,UAAU;YACjCC,WAAWhB;QACf;QACAC,WAAWE,GAAGU;IAClB;IACA,MAAMI,YAAYC,IAAAA,mCAAoB,EAAC;QACnCC,cAAc;QACd,GAAG3C,IAAI;QACP8B;QACAc,gBAAgBV;QAChBW,UAAUvC,QAAQI,GAAG,CAAC,CAACE,OAAO,WAAW,GAAGL,OAAMuC,aAAa,CAACC,qBAAM,EAAE;gBAChElC,KAAKD,KAAKC,GAAG;gBACbmC,OAAOpC,KAAKC,GAAG;YACnB,GAAGD,KAAKG,IAAI;IACpB,GAAGhC;IACH,MAAMkE,+BAA+B1C,OAAM2C,WAAW,CAAC,CAACvC,OAAOwC,IAAAA,+BAAqB,EAACxC,MAAMR,iBAAiBC,eAAe;YACnHb;YACAK;QACJ,IAAI;QACJQ;QACAD;QACAZ;QACAK;KACH;IACD,MAAMsB,QAAQ;QACV,GAAGuB,SAAS;QACZxC;QACAH,uBAAuBC,iCAAiC,QAAQA,iCAAiC,KAAK,IAAIA,+BAA+BkD;QACzI5B;IACJ;IACA+B,2BAA2BlC;IAC3BmC,uBAAuBnC,OAAOO;IAC9B,OAAOP;AACX;AACA;;;CAGC,GAAG,MAAMb,sBAAsB,CAACiD,cAAczD,WAAWT;IACtD,MAAM,CAACmE,mBAAmB,GAAGhD,OAAMgB,QAAQ,CAAC,IAAI,IAAIiC;IACpD,MAAMC,kBAAkB3C,IAAAA,mBAAS,EAACwC,iBAAiB,QAAQA,iBAAiB,KAAK,IAAIA,eAAe;IACpG,OAAO/C,OAAMC,OAAO,CAAC;QACjB,MAAMxB,aAAasE,iBAAiB,QAAQA,iBAAiB,KAAK,IAAIA,eAAeC;QACrF,MAAMpD,kBAAkBuD,IAAAA,4BAAkB,EAAC1E,YAAYa;QACvD,MAAMO,gBAAgBuD,IAAAA,0BAAgB,EAAC3E,YAAYa,WAAWT;QAC9D,OAAO;YACHe;YACAC;QACJ;IACJ,gNAAgN;IAChN,uDAAuD;IACvD,GAAG;QACChB;QACAmE;QACAE;QACA5D;KACH;AACL;AACA;;;;;CAKC,GAAG,MAAMwD,yBAAyB,CAACnC,OAAO0C;IACvC,MAAM,EAAEC,YAAY,EAAE5D,QAAQ,EAAEH,qBAAqB,EAAEuB,aAAa,EAAEyC,eAAe,EAAEd,KAAK,EAAE,GAAG9B;IACjG,yIAAyI;IACzI,gGAAgG;IAChG,wIAAwI;IACxIX,OAAMwD,SAAS,CAAC;QACZ,IAAI9D,YAAY+C,OAAO;YACnBc,gBAAgB,CAACE;gBACb,IAAI,AAACA,CAAAA,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBjD,IAAI,AAAD,KAAMiD,iBAAiBjD,IAAI,CAACkD,WAAW,GAAGC,OAAO,CAAClB,MAAMiB,WAAW,QAAQ,GAAG;oBACvK,OAAOD;gBACX;gBACA,OAAOxC;YACX;QACJ;IACJ,GAAG;QACCvB;QACA6D;QACAd;KACH;IACD,MAAMmB,sBAAsBzC,IAAAA,gCAAgB,EAAC,CAACC;QAC1C,IAAI,CAAC1B,UAAU;YACX;QACJ;QACA,MAAM,EAAEW,MAAMlB,YAAY,EAAE8C,SAAS,EAAE,GAAG1C,sBAAsBkD;QAChE,6DAA6D;QAC7D,IAAI3B,kBAAkB2B,OAAO;YACzBY,aAAa,QAAQA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASjC,GAAG;gBAC5DjC;gBACAmC,kBAAkBmB;gBAClBR;YACJ;QACJ;IACJ;IACA,MAAM4B,gBAAgB1C,IAAAA,gCAAgB,EAAC,CAACC;QACpC,IAAI,CAACkC,gBAAgBlC,EAAEd,GAAG,KAAKwD,mBAAK,EAAE;YAClCF,oBAAoBxC;QACxB;IACJ;IACAT,MAAMoD,IAAI,CAACC,SAAS,GAAGC,IAAAA,8BAAc,EAACJ,eAAelD,MAAMoD,IAAI,CAACC,SAAS;IACzE,MAAME,UAAUlE,OAAMmE,MAAM,CAAC;IAC7BxD,MAAMoD,IAAI,CAACvF,GAAG,GAAG4F,IAAAA,6BAAa,EAACzD,MAAMoD,IAAI,CAACvF,GAAG,EAAE0F;IAC/C,IAAIvD,MAAM0D,OAAO,EAAE;QACf1D,MAAM0D,OAAO,CAACC,QAAQ,GAAG,CAAC,GAAG,qDAAqD;IACtF;IACA,IAAI3D,MAAM4D,UAAU,EAAE;QAClB5D,MAAM4D,UAAU,CAACD,QAAQ,GAAG,CAAC,GAAG,qDAAqD;IACzF;IACA,MAAME,kBAAkBrD,IAAAA,gCAAgB,EAAC,CAACC;QACtC,MAAMqD,YAAYrD,EAAEsD,aAAa,GAAG,CAACC,IAAAA,+BAAe,EAACT,QAAQU,OAAO,EAAExD,EAAEsD,aAAa,IAAI;QACzF,IAAID,WAAW;YACXb,oBAAoBxC;QACxB;IACJ;IACAT,MAAMkE,KAAK,CAACC,MAAM,GAAGb,IAAAA,8BAAc,EAACO,iBAAiB7D,MAAMkE,KAAK,CAACC,MAAM;AAC3E;AACA;;CAEC,GAAG,MAAMjC,6BAA6B,CAAClC;IACpC,IAAIoE;IACJ,MAAMC,eAAeC,IAAAA,oCAAe;IACpC,MAAMC,mBAAmBC,IAAAA,qBAAK,EAAC;IAC/B,MAAMC,2BAA2B;IACjC,IAAI,AAACJ,CAAAA,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaK,OAAO,AAAD,KAAM,AAAC,CAAA,AAACN,CAAAA,oBAAoBpE,MAAM4D,UAAU,AAAD,MAAO,QAAQQ,sBAAsB,KAAK,IAAI,KAAK,IAAIA,iBAAiB,CAAC,aAAa,AAAD,MAAOK,0BAA0B;QACjP,IAAIE;QACJ,MAAMC,YAAY,AAACD,CAAAA,uBAAuB3E,MAAM4D,UAAU,CAACiB,EAAE,AAAD,MAAO,QAAQF,yBAAyB,KAAK,IAAIA,uBAAuBJ;QACpIvE,MAAM4D,UAAU,CAAC,kBAAkB,GAAG,CAAC,EAAEgB,UAAU,CAAC,EAAEP,aAAaK,OAAO,CAAC,CAAC;IAChF;AACJ"}
+{"version":3,"sources":["useTimePicker.js"],"sourcesContent":["import * as React from 'react';\nimport { elementContains, mergeCallbacks, useControllableState, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useCombobox_unstable, Option } from '@fluentui/react-combobox';\nimport { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';\nimport { dateToKey, keyToDate, formatDateToTimeString as defaultFormatDateToTimeString, getDateStartAnchor, getDateEndAnchor, getTimesBetween, getDateFromTimeString } from './timeMath';\n/**\n * Create the state required to render TimePicker.\n *\n * The returned state can be modified with hooks such as useTimePickerStyles_unstable,\n * before being passed to renderTimePicker_unstable.\n *\n * @param props - props from this instance of TimePicker\n * @param ref - reference to root HTMLElement of TimePicker\n */ export const useTimePicker_unstable = (props, ref)=>{\n    const { dateAnchor: dateAnchorInProps, defaultSelectedTime: defaultSelectedTimeInProps, endHour = 24, formatDateToTimeString = defaultFormatDateToTimeString, hourCycle, increment = 30, onTimeChange, selectedTime: selectedTimeInProps, showSeconds = false, startHour = 0, parseTimeStringToDate: parseTimeStringToDateInProps, ...rest } = props;\n    const { freeform = false } = rest;\n    var _ref;\n    const { dateStartAnchor, dateEndAnchor } = useStableDateAnchor((_ref = dateAnchorInProps !== null && dateAnchorInProps !== void 0 ? dateAnchorInProps : selectedTimeInProps) !== null && _ref !== void 0 ? _ref : defaultSelectedTimeInProps, startHour, endHour);\n    const options = React.useMemo(()=>getTimesBetween(dateStartAnchor, dateEndAnchor, increment).map((time)=>({\n                date: time,\n                key: dateToKey(time),\n                text: formatDateToTimeString(time, {\n                    showSeconds,\n                    hourCycle\n                })\n            })), [\n        dateEndAnchor,\n        dateStartAnchor,\n        formatDateToTimeString,\n        hourCycle,\n        increment,\n        showSeconds\n    ]);\n    const [selectedTime, setSelectedTime] = useControllableState({\n        state: selectedTimeInProps,\n        defaultState: defaultSelectedTimeInProps,\n        initialState: null\n    });\n    const [submittedText, setSubmittedText] = React.useState(undefined);\n    const selectTime = useEventCallback((e, data)=>{\n        setSelectedTime(data.selectedTime);\n        setSubmittedText(data.selectedTimeText);\n        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(e, data);\n    });\n    const selectedOptions = React.useMemo(()=>{\n        const selectedTimeKey = dateToKey(selectedTime);\n        const selectedOption = options.find((date)=>date.key === selectedTimeKey);\n        return selectedOption ? [\n            selectedOption.key\n        ] : [];\n    }, [\n        options,\n        selectedTime\n    ]);\n    const handleOptionSelect = useEventCallback((e, data)=>{\n        if (freeform && data.optionValue === undefined) {\n            // Combobox clears selection when input value not matching any option; but we allow this case in freeform TimePicker.\n            return;\n        }\n        var _data_optionValue;\n        const timeSelectionData = {\n            selectedTime: keyToDate((_data_optionValue = data.optionValue) !== null && _data_optionValue !== void 0 ? _data_optionValue : ''),\n            selectedTimeText: data.optionText,\n            errorType: undefined\n        };\n        selectTime(e, timeSelectionData);\n    });\n    const baseState = useCombobox_unstable({\n        autoComplete: 'off',\n        ...rest,\n        selectedOptions,\n        onOptionSelect: handleOptionSelect,\n        children: options.map((date)=>/*#__PURE__*/ React.createElement(Option, {\n                key: date.key,\n                value: date.key\n            }, date.text))\n    }, ref);\n    const defaultParseTimeStringToDate = React.useCallback((time)=>getDateFromTimeString(time, dateStartAnchor, dateEndAnchor, {\n            hourCycle,\n            showSeconds\n        }), [\n        dateEndAnchor,\n        dateStartAnchor,\n        hourCycle,\n        showSeconds\n    ]);\n    const state = {\n        ...baseState,\n        freeform,\n        parseTimeStringToDate: parseTimeStringToDateInProps !== null && parseTimeStringToDateInProps !== void 0 ? parseTimeStringToDateInProps : defaultParseTimeStringToDate,\n        submittedText\n    };\n    useDefaultChevronIconLabel(state);\n    useSelectTimeFromValue(state, selectTime);\n    return state;\n};\n/**\n * Provides stable start and end date anchors based on the provided date and time parameters.\n * The hook ensures that the memoization remains consistent even if new Date objects representing the same date are provided.\n */ const useStableDateAnchor = (providedDate, startHour, endHour)=>{\n    const [fallbackDateAnchor] = React.useState(()=>new Date());\n    const providedDateKey = dateToKey(providedDate !== null && providedDate !== void 0 ? providedDate : null);\n    return React.useMemo(()=>{\n        const dateAnchor = providedDate !== null && providedDate !== void 0 ? providedDate : fallbackDateAnchor;\n        const dateStartAnchor = getDateStartAnchor(dateAnchor, startHour);\n        const dateEndAnchor = getDateEndAnchor(dateAnchor, startHour, endHour);\n        return {\n            dateStartAnchor,\n            dateEndAnchor\n        };\n    // `providedDate`'s stable key representation is used as dependency instead of the Date object. This ensures that the memoization remains stable when a new Date object representing the same date is passed in.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        endHour,\n        fallbackDateAnchor,\n        providedDateKey,\n        startHour\n    ]);\n};\n/**\n * Mimics the behavior of the browser's change event for a freeform TimePicker.\n * The provided callback is called when input changed and:\n * - Enter/Tab key is pressed on the input.\n * - TimePicker loses focus, signifying a possible change.\n */ const useSelectTimeFromValue = (state, callback)=>{\n    const { getOptionById, freeform, parseTimeStringToDate, submittedText, value, activeDescendantController } = state;\n    const getActiveOption = React.useCallback(()=>{\n        const activeOptionId = activeDescendantController.active();\n        return activeOptionId ? getOptionById(activeOptionId) : null;\n    }, [\n        activeDescendantController,\n        getOptionById\n    ]);\n    // Base Combobox has activeOption default to first option in dropdown even if it doesn't match input value, and Enter key will select it.\n    // This effect ensures that the activeOption is cleared when the input doesn't match any option.\n    // This behavior is specific to a freeform TimePicker where the input value is treated as a valid time even if it's not in the dropdown.\n    React.useEffect(()=>{\n        if (freeform && value) {\n            const activeOption = getActiveOption();\n            if (!activeOption) {\n                return;\n            }\n            const valueMatchesActiveOption = activeOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0;\n            if (!valueMatchesActiveOption) {\n                activeDescendantController.blur();\n            }\n        }\n    }, [\n        freeform,\n        value,\n        activeDescendantController,\n        getActiveOption\n    ]);\n    const selectTimeFromValue = useEventCallback((e)=>{\n        if (!freeform) {\n            return;\n        }\n        const { date: selectedTime, errorType } = parseTimeStringToDate(value);\n        // Only triggers callback when the text in input has changed.\n        if (submittedText !== value) {\n            callback === null || callback === void 0 ? void 0 : callback(e, {\n                selectedTime,\n                selectedTimeText: value,\n                errorType\n            });\n        }\n    });\n    const handleKeyDown = useEventCallback((e)=>{\n        const activeOption = getActiveOption();\n        if (!activeOption && e.key === Enter) {\n            selectTimeFromValue(e);\n        }\n    });\n    state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);\n    const rootRef = React.useRef(null);\n    state.root.ref = useMergedRefs(state.root.ref, rootRef);\n    if (state.listbox) {\n        state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n    }\n    if (state.expandIcon) {\n        state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n    }\n    const handleInputBlur = useEventCallback((e)=>{\n        const isOutside = e.relatedTarget ? !elementContains(rootRef.current, e.relatedTarget) : true;\n        if (isOutside) {\n            selectTimeFromValue(e);\n        }\n    });\n    state.input.onBlur = mergeCallbacks(handleInputBlur, state.input.onBlur);\n};\n/**\n * Provides a default aria-labelledby for the chevron icon if the TimePicker is wrapped in a Field.\n */ const useDefaultChevronIconLabel = (state)=>{\n    var _state_expandIcon;\n    const fieldContext = useFieldContext();\n    const chevronDefaultId = useId('timepicker-chevron-');\n    const defaultLabelFromCombobox = 'Open';\n    if ((fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.labelId) && ((_state_expandIcon = state.expandIcon) === null || _state_expandIcon === void 0 ? void 0 : _state_expandIcon['aria-label']) === defaultLabelFromCombobox) {\n        var _state_expandIcon_id;\n        const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : chevronDefaultId;\n        state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;\n    }\n};\n"],"names":["useTimePicker_unstable","props","ref","dateAnchor","dateAnchorInProps","defaultSelectedTime","defaultSelectedTimeInProps","endHour","formatDateToTimeString","defaultFormatDateToTimeString","hourCycle","increment","onTimeChange","selectedTime","selectedTimeInProps","showSeconds","startHour","parseTimeStringToDate","parseTimeStringToDateInProps","rest","freeform","_ref","dateStartAnchor","dateEndAnchor","useStableDateAnchor","options","React","useMemo","getTimesBetween","map","time","date","key","dateToKey","text","setSelectedTime","useControllableState","state","defaultState","initialState","submittedText","setSubmittedText","useState","undefined","selectTime","useEventCallback","e","data","selectedTimeText","selectedOptions","selectedTimeKey","selectedOption","find","handleOptionSelect","optionValue","_data_optionValue","timeSelectionData","keyToDate","optionText","errorType","baseState","useCombobox_unstable","autoComplete","onOptionSelect","children","createElement","Option","value","defaultParseTimeStringToDate","useCallback","getDateFromTimeString","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","getDateStartAnchor","getDateEndAnchor","callback","getOptionById","activeDescendantController","getActiveOption","activeOptionId","active","useEffect","activeOption","valueMatchesActiveOption","toLowerCase","indexOf","blur","selectTimeFromValue","handleKeyDown","Enter","root","onKeyDown","mergeCallbacks","rootRef","useRef","useMergedRefs","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","elementContains","current","input","onBlur","_state_expandIcon","fieldContext","useFieldContext","chevronDefaultId","useId","defaultLabelFromCombobox","labelId","_state_expandIcon_id","chevronId","id"],"mappings":"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"}

package/lib-commonjs/components/TimePicker/useTimePickerStyles.styles.js

@@ -22,6 +22,7 @@ const timePickerClassNames = {
     root: 'fui-TimePicker',
     input: 'fui-TimePicker__input',
     expandIcon: 'fui-TimePicker__expandIcon',
+    clearIcon: 'fui-TimePicker__clearIcon',
     listbox: 'fui-TimePicker__listbox'
 };
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -40,6 +41,9 @@ const useTimePickerStyles_unstable = (state)=>{
     if (state.expandIcon) {
         state.expandIcon.className = (0, _react.mergeClasses)(timePickerClassNames.expandIcon, state.expandIcon.className);
     }
+    if (state.clearIcon) {
+        state.clearIcon.className = (0, _react.mergeClasses)(timePickerClassNames.clearIcon, state.clearIcon.className);
+    }
     if (state.listbox) {
         state.listbox.className = (0, _react.mergeClasses)(timePickerClassNames.listbox, styles.listbox, state.listbox.className);
     }

package/lib-commonjs/components/TimePicker/useTimePickerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\nexport const timePickerClassNames = {\n  root: 'fui-TimePicker',\n  input: 'fui-TimePicker__input',\n  expandIcon: 'fui-TimePicker__expandIcon',\n  listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  listbox: {\n    Bxyxcbc: \"f1vfnyiv\"\n  }\n}, {\n  d: [\".f1vfnyiv{max-height:min(80vh, 416px);}\"]\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */\nexport const useTimePickerStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n  state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n  }\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n  }\n  useComboboxStyles_unstable(state);\n  return state;\n};\n//# sourceMappingURL=useTimePickerStyles.styles.js.map"],"names":["timePickerClassNames","useTimePickerStyles_unstable","root","input","expandIcon","listbox","useStyles","__styles","Bxyxcbc","d","state","styles","className","mergeClasses","useComboboxStyles_unstable"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAgBAC,4BAA4B;eAA5BA;;;uBAlB0B;+BACI;AACpC,MAAMD,uBAAuB;IAClCE,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,SAAS;AACX;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,SAAS;QACPG,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;KAA0C;AAChD;AAIO,MAAMR,+BAA+BS,CAAAA;IAC1C,MAAMC,SAASL;IACfI,MAAMR,IAAI,CAACU,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBE,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IACnFF,MAAMP,KAAK,CAACS,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBG,KAAK,EAAEO,MAAMP,KAAK,CAACS,SAAS;IACtF,IAAIF,MAAMN,UAAU,EAAE;QACpBM,MAAMN,UAAU,CAACQ,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBI,UAAU,EAAEM,MAAMN,UAAU,CAACQ,SAAS;IACvG;IACA,IAAIF,MAAML,OAAO,EAAE;QACjBK,MAAML,OAAO,CAACO,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBK,OAAO,EAAEM,OAAON,OAAO,EAAEK,MAAML,OAAO,CAACO,SAAS;IAC9G;IACAE,IAAAA,yCAA0B,EAACJ;IAC3B,OAAOA;AACT,GACA,sDAAsD"}
+{"version":3,"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\nexport const timePickerClassNames = {\n  root: 'fui-TimePicker',\n  input: 'fui-TimePicker__input',\n  expandIcon: 'fui-TimePicker__expandIcon',\n  clearIcon: 'fui-TimePicker__clearIcon',\n  listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  listbox: {\n    Bxyxcbc: \"f1vfnyiv\"\n  }\n}, {\n  d: [\".f1vfnyiv{max-height:min(80vh, 416px);}\"]\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */\nexport const useTimePickerStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n  state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n  }\n  if (state.clearIcon) {\n    state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n  }\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n  }\n  useComboboxStyles_unstable(state);\n  return state;\n};\n//# sourceMappingURL=useTimePickerStyles.styles.js.map"],"names":["timePickerClassNames","useTimePickerStyles_unstable","root","input","expandIcon","clearIcon","listbox","useStyles","__styles","Bxyxcbc","d","state","styles","className","mergeClasses","useComboboxStyles_unstable"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAiBAC,4BAA4B;eAA5BA;;;uBAnB0B;+BACI;AACpC,MAAMD,uBAAuB;IAClCE,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,WAAW;IACXC,SAAS;AACX;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,SAAS;QACPG,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;KAA0C;AAChD;AAIO,MAAMT,+BAA+BU,CAAAA;IAC1C,MAAMC,SAASL;IACfI,MAAMT,IAAI,CAACW,SAAS,GAAGC,IAAAA,mBAAY,EAACd,qBAAqBE,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IACnFF,MAAMR,KAAK,CAACU,SAAS,GAAGC,IAAAA,mBAAY,EAACd,qBAAqBG,KAAK,EAAEQ,MAAMR,KAAK,CAACU,SAAS;IACtF,IAAIF,MAAMP,UAAU,EAAE;QACpBO,MAAMP,UAAU,CAACS,SAAS,GAAGC,IAAAA,mBAAY,EAACd,qBAAqBI,UAAU,EAAEO,MAAMP,UAAU,CAACS,SAAS;IACvG;IACA,IAAIF,MAAMN,SAAS,EAAE;QACnBM,MAAMN,SAAS,CAACQ,SAAS,GAAGC,IAAAA,mBAAY,EAACd,qBAAqBK,SAAS,EAAEM,MAAMN,SAAS,CAACQ,SAAS;IACpG;IACA,IAAIF,MAAML,OAAO,EAAE;QACjBK,MAAML,OAAO,CAACO,SAAS,GAAGC,IAAAA,mBAAY,EAACd,qBAAqBM,OAAO,EAAEM,OAAON,OAAO,EAAEK,MAAML,OAAO,CAACO,SAAS;IAC9G;IACAE,IAAAA,yCAA0B,EAACJ;IAC3B,OAAOA;AACT,GACA,sDAAsD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-timepicker-compat",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "Fluent UI TimePicker Compat Component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -40,12 +40,12 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-combobox": "^9.7.5",
-    "@fluentui/react-field": "^9.1.53",
-    "@fluentui/react-jsx-runtime": "^9.0.29",
+    "@fluentui/react-combobox": "^9.8.0",
+    "@fluentui/react-field": "^9.1.54",
+    "@fluentui/react-jsx-runtime": "^9.0.30",
     "@fluentui/react-shared-contexts": "^9.14.0",
     "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.18.0",
+    "@fluentui/react-utilities": "^9.18.1",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },