@fluentui/react-timepicker-compat 0.4.33 → 0.4.35

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-timepicker-compat
 
-This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:33:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.4.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.4.35)
+
+Tue, 26 May 2026 09:33:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.4.34..@fluentui/react-timepicker-compat_v0.4.35)
+
+### Patches
+
+- Bump @fluentui/react-combobox to v9.17.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [0.4.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.4.34)
+
+Thu, 23 Apr 2026 14:21:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.4.33..@fluentui/react-timepicker-compat_v0.4.34)
+
+### Patches
+
+- Bump @fluentui/react-combobox to v9.17.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [0.4.33](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.4.33)
 
-Wed, 01 Apr 2026 15:50:23 GMT 
+Wed, 01 Apr 2026 15:52:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.4.32..@fluentui/react-timepicker-compat_v0.4.33)
 
 ### Patches

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

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * State used in rendering TimePicker
+ */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/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"}
+{"version":3,"sources":["../src/components/TimePicker/TimePicker.types.ts"],"sourcesContent":["import type * 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":[],"mappings":"AAkKA;;CAEC,GACD,WAMI"}

package/lib/components/TimePicker/useTimePicker.js

@@ -180,13 +180,17 @@ import { dateToKey, keyToDate, formatDateToTimeString as defaultFormatDateToTime
             selectTimeFromValue(e);
         }
     });
+    // eslint-disable-next-line react-hooks/immutability
     state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);
     const rootRef = React.useRef(null);
+    // eslint-disable-next-line react-hooks/immutability
     state.root.ref = useMergedRefs(state.root.ref, rootRef);
     if (state.listbox) {
+        // eslint-disable-next-line react-hooks/immutability
         state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.
     }
     if (state.expandIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.
     }
     const handleInputBlur = useEventCallback((e)=>{
@@ -195,6 +199,7 @@ import { dateToKey, keyToDate, formatDateToTimeString as defaultFormatDateToTime
             selectTimeFromValue(e);
         }
     });
+    // eslint-disable-next-line react-hooks/immutability
     state.input.onBlur = mergeCallbacks(handleInputBlur, state.input.onBlur);
 };
 /**
@@ -207,6 +212,7 @@ import { dateToKey, keyToDate, formatDateToTimeString as defaultFormatDateToTime
     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) {
         var _state_expandIcon_id;
         const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : chevronDefaultId;
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/useTimePicker.tsx"],"sourcesContent":["'use client';\n\nimport * 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 clearIconRef = React.useRef<HTMLSpanElement>(null);\n  const handleOptionSelect: ComboboxProps['onOptionSelect'] = useEventCallback((e, data) => {\n    if (\n      freeform &&\n      data.optionValue === undefined &&\n      !(rest.clearable && e.type === 'click' && e.currentTarget === clearIconRef.current)\n    ) {\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 mergedClearIconRef = useMergedRefs(baseState.clearIcon?.ref, clearIconRef);\n  const state: TimePickerState = {\n    ...baseState,\n    clearIcon: baseState.clearIcon\n      ? {\n          ...baseState.clearIcon,\n          ref: mergedClearIconRef,\n        }\n      : undefined,\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","baseState","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","clearIconRef","useRef","handleOptionSelect","optionValue","clearable","type","currentTarget","current","timeSelectionData","optionText","errorType","autoComplete","onOptionSelect","children","value","defaultParseTimeStringToDate","useCallback","mergedClearIconRef","clearIcon","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","callback","getOptionById","activeDescendantController","getActiveOption","activeOptionId","active","useEffect","activeOption","valueMatchesActiveOption","toLowerCase","indexOf","blur","selectTimeFromValue","handleKeyDown","root","onKeyDown","rootRef","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","input","onBlur","fieldContext","chevronDefaultId","defaultLabelFromCombobox","labelId","chevronId","id"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TimePicker/useTimePicker.tsx"],"sourcesContent":["'use client';\n\nimport * 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 type { ComboboxProps } from '@fluentui/react-combobox';\nimport { 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 clearIconRef = React.useRef<HTMLSpanElement>(null);\n  const handleOptionSelect: ComboboxProps['onOptionSelect'] = useEventCallback((e, data) => {\n    if (\n      freeform &&\n      data.optionValue === undefined &&\n      !(rest.clearable && e.type === 'click' && e.currentTarget === clearIconRef.current)\n    ) {\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 mergedClearIconRef = useMergedRefs(baseState.clearIcon?.ref, clearIconRef);\n  const state: TimePickerState = {\n    ...baseState,\n    clearIcon: baseState.clearIcon\n      ? {\n          ...baseState.clearIcon,\n          ref: mergedClearIconRef,\n        }\n      : undefined,\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  // eslint-disable-next-line react-hooks/immutability\n  state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  if (state.listbox) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\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  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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","baseState","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","clearIconRef","useRef","handleOptionSelect","optionValue","clearable","type","currentTarget","current","timeSelectionData","optionText","errorType","autoComplete","onOptionSelect","children","value","defaultParseTimeStringToDate","useCallback","mergedClearIconRef","clearIcon","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","callback","getOptionById","activeDescendantController","getActiveOption","activeOptionId","active","useEffect","activeOption","valueMatchesActiveOption","toLowerCase","indexOf","blur","selectTimeFromValue","handleKeyDown","root","onKeyDown","rootRef","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","input","onBlur","fieldContext","chevronDefaultId","defaultLabelFromCombobox","labelId","chevronId","id"],"mappings":"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"}

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

@@ -23,15 +23,20 @@ export const useTimePickerStyles_unstable = state => {
   'use no memo';
 
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);
   if (state.expandIcon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);
   }
   if (state.clearIcon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);
   }
   if (state.listbox) {
+    // eslint-disable-next-line react-hooks/immutability
     state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);
   }
   useComboboxStyles_unstable(state);

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

@@ -1 +1 @@
-{"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":["'use client';\nimport { 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    'use no memo';\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,YAAY;;AACZ,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,aAAa;;EACb,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","ignoreList":[]}
+{"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":["'use client';\nimport { 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    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n    }\n    if (state.clearIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n    }\n    if (state.listbox) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n    }\n    useComboboxStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,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,aAAa;;EACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1B;EACAI,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EACpF;EACAF,KAAK,CAACR,KAAK,CAACU,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACE,KAAK,EAAEQ,KAAK,CAACR,KAAK,CAACU,SAAS,CAAC;EACvF,IAAIF,KAAK,CAACP,UAAU,EAAE;IAClB;IACAO,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;IACjB;IACAM,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;IACf;IACAK,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","ignoreList":[]}

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

@@ -18,15 +18,20 @@ const useStyles = makeStyles({
  */ export const useTimePickerStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);
     if (state.expandIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);
     }
     if (state.clearIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);
     }
     if (state.listbox) {
+        // eslint-disable-next-line react-hooks/immutability
         state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);
     }
     useComboboxStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/useTimePickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TimePickerSlots, TimePickerState } from './TimePicker.types';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\n\nexport const timePickerClassNames: SlotClassNames<TimePickerSlots> = {\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};\n\nconst useStyles = makeStyles({\n  listbox: {\n    maxHeight: 'min(80vh, 416px)', // height for 12 items or 80vh, whichever is smaller\n  },\n});\n\n/**\n * Apply styling to the TimePicker slots based on the state\n */\nexport const useTimePickerStyles_unstable = (state: TimePickerState): TimePickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n\n  state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n  }\n\n  if (state.clearIcon) {\n    state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n  }\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n  }\n\n  useComboboxStyles_unstable(state);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","clearIcon","listbox","useStyles","maxHeight","useTimePickerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,2BAA2B;AAEtE,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,WAAW;IACXC,SAAS;AACX,EAAE;AAEF,MAAMC,YAAYT,WAAW;IAC3BQ,SAAS;QACPE,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASJ;IAEfG,MAAMR,IAAI,CAACU,SAAS,GAAGb,aAAaE,qBAAqBC,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEnFF,MAAMP,KAAK,CAACS,SAAS,GAAGb,aAAaE,qBAAqBE,KAAK,EAAEO,MAAMP,KAAK,CAACS,SAAS;IAEtF,IAAIF,MAAMN,UAAU,EAAE;QACpBM,MAAMN,UAAU,CAACQ,SAAS,GAAGb,aAAaE,qBAAqBG,UAAU,EAAEM,MAAMN,UAAU,CAACQ,SAAS;IACvG;IAEA,IAAIF,MAAML,SAAS,EAAE;QACnBK,MAAML,SAAS,CAACO,SAAS,GAAGb,aAAaE,qBAAqBI,SAAS,EAAEK,MAAML,SAAS,CAACO,SAAS;IACpG;IAEA,IAAIF,MAAMJ,OAAO,EAAE;QACjBI,MAAMJ,OAAO,CAACM,SAAS,GAAGb,aAAaE,qBAAqBK,OAAO,EAAEK,OAAOL,OAAO,EAAEI,MAAMJ,OAAO,CAACM,SAAS;IAC9G;IAEAZ,2BAA2BU;IAE3B,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TimePicker/useTimePickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TimePickerSlots, TimePickerState } from './TimePicker.types';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\n\nexport const timePickerClassNames: SlotClassNames<TimePickerSlots> = {\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};\n\nconst useStyles = makeStyles({\n  listbox: {\n    maxHeight: 'min(80vh, 416px)', // height for 12 items or 80vh, whichever is smaller\n  },\n});\n\n/**\n * Apply styling to the TimePicker slots based on the state\n */\nexport const useTimePickerStyles_unstable = (state: TimePickerState): TimePickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n  }\n\n  if (state.clearIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n  }\n\n  if (state.listbox) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n  }\n\n  useComboboxStyles_unstable(state);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","clearIcon","listbox","useStyles","maxHeight","useTimePickerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,2BAA2B;AAEtE,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,WAAW;IACXC,SAAS;AACX,EAAE;AAEF,MAAMC,YAAYT,WAAW;IAC3BQ,SAAS;QACPE,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASJ;IAEf,oDAAoD;IACpDG,MAAMR,IAAI,CAACU,SAAS,GAAGb,aAAaE,qBAAqBC,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEnF,oDAAoD;IACpDF,MAAMP,KAAK,CAACS,SAAS,GAAGb,aAAaE,qBAAqBE,KAAK,EAAEO,MAAMP,KAAK,CAACS,SAAS;IAEtF,IAAIF,MAAMN,UAAU,EAAE;QACpB,oDAAoD;QACpDM,MAAMN,UAAU,CAACQ,SAAS,GAAGb,aAAaE,qBAAqBG,UAAU,EAAEM,MAAMN,UAAU,CAACQ,SAAS;IACvG;IAEA,IAAIF,MAAML,SAAS,EAAE;QACnB,oDAAoD;QACpDK,MAAML,SAAS,CAACO,SAAS,GAAGb,aAAaE,qBAAqBI,SAAS,EAAEK,MAAML,SAAS,CAACO,SAAS;IACpG;IAEA,IAAIF,MAAMJ,OAAO,EAAE;QACjB,oDAAoD;QACpDI,MAAMJ,OAAO,CAACM,SAAS,GAAGb,aAAaE,qBAAqBK,OAAO,EAAEK,OAAOL,OAAO,EAAEI,MAAMJ,OAAO,CAACM,SAAS;IAC9G;IAEAZ,2BAA2BU;IAE3B,OAAOA;AACT,EAAE"}

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

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * State used in rendering TimePicker
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/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":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/TimePicker/TimePicker.types.ts"],"sourcesContent":["import type * 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":[],"mappings":"AAkKA;;CAEC,GACD,WAMI"}

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

@@ -183,13 +183,17 @@ const useTimePicker_unstable = (props, ref)=>{
             selectTimeFromValue(e);
         }
     });
+    // eslint-disable-next-line react-hooks/immutability
     state.root.onKeyDown = (0, _reactutilities.mergeCallbacks)(handleKeyDown, state.root.onKeyDown);
     const rootRef = _react.useRef(null);
+    // eslint-disable-next-line react-hooks/immutability
     state.root.ref = (0, _reactutilities.useMergedRefs)(state.root.ref, rootRef);
     if (state.listbox) {
+        // eslint-disable-next-line react-hooks/immutability
         state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.
     }
     if (state.expandIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.
     }
     const handleInputBlur = (0, _reactutilities.useEventCallback)((e)=>{
@@ -198,6 +202,7 @@ const useTimePicker_unstable = (props, ref)=>{
             selectTimeFromValue(e);
         }
     });
+    // eslint-disable-next-line react-hooks/immutability
     state.input.onBlur = (0, _reactutilities.mergeCallbacks)(handleInputBlur, state.input.onBlur);
 };
 /**
@@ -210,6 +215,7 @@ const useTimePicker_unstable = (props, ref)=>{
     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) {
         var _state_expandIcon_id;
         const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : chevronDefaultId;
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/useTimePicker.tsx"],"sourcesContent":["'use client';\n\nimport * 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 clearIconRef = React.useRef<HTMLSpanElement>(null);\n  const handleOptionSelect: ComboboxProps['onOptionSelect'] = useEventCallback((e, data) => {\n    if (\n      freeform &&\n      data.optionValue === undefined &&\n      !(rest.clearable && e.type === 'click' && e.currentTarget === clearIconRef.current)\n    ) {\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 mergedClearIconRef = useMergedRefs(baseState.clearIcon?.ref, clearIconRef);\n  const state: TimePickerState = {\n    ...baseState,\n    clearIcon: baseState.clearIcon\n      ? {\n          ...baseState.clearIcon,\n          ref: mergedClearIconRef,\n        }\n      : undefined,\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","baseState","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","clearIconRef","useRef","handleOptionSelect","optionValue","clearable","type","currentTarget","current","timeSelectionData","optionText","errorType","autoComplete","onOptionSelect","children","value","defaultParseTimeStringToDate","useCallback","mergedClearIconRef","clearIcon","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","callback","getOptionById","activeDescendantController","getActiveOption","activeOptionId","active","useEffect","activeOption","valueMatchesActiveOption","toLowerCase","indexOf","blur","selectTimeFromValue","handleKeyDown","root","onKeyDown","rootRef","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","input","onBlur","fieldContext","chevronDefaultId","defaultLabelFromCombobox","labelId","chevronId","id"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TimePicker/useTimePicker.tsx"],"sourcesContent":["'use client';\n\nimport * 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 type { ComboboxProps } from '@fluentui/react-combobox';\nimport { 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 clearIconRef = React.useRef<HTMLSpanElement>(null);\n  const handleOptionSelect: ComboboxProps['onOptionSelect'] = useEventCallback((e, data) => {\n    if (\n      freeform &&\n      data.optionValue === undefined &&\n      !(rest.clearable && e.type === 'click' && e.currentTarget === clearIconRef.current)\n    ) {\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 mergedClearIconRef = useMergedRefs(baseState.clearIcon?.ref, clearIconRef);\n  const state: TimePickerState = {\n    ...baseState,\n    clearIcon: baseState.clearIcon\n      ? {\n          ...baseState.clearIcon,\n          ref: mergedClearIconRef,\n        }\n      : undefined,\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  // eslint-disable-next-line react-hooks/immutability\n  state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  if (state.listbox) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\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  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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","baseState","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","clearIconRef","useRef","handleOptionSelect","optionValue","clearable","type","currentTarget","current","timeSelectionData","optionText","errorType","autoComplete","onOptionSelect","children","value","defaultParseTimeStringToDate","useCallback","mergedClearIconRef","clearIcon","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","callback","getOptionById","activeDescendantController","getActiveOption","activeOptionId","active","useEffect","activeOption","valueMatchesActiveOption","toLowerCase","indexOf","blur","selectTimeFromValue","handleKeyDown","root","onKeyDown","rootRef","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","input","onBlur","fieldContext","chevronDefaultId","defaultLabelFromCombobox","labelId","chevronId","id"],"mappings":"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"}

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

@@ -38,15 +38,20 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
 const useTimePickerStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(timePickerClassNames.root, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(timePickerClassNames.input, state.input.className);
     if (state.expandIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon.className = (0, _react.mergeClasses)(timePickerClassNames.expandIcon, state.expandIcon.className);
     }
     if (state.clearIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.clearIcon.className = (0, _react.mergeClasses)(timePickerClassNames.clearIcon, state.clearIcon.className);
     }
     if (state.listbox) {
+        // eslint-disable-next-line react-hooks/immutability
         state.listbox.className = (0, _react.mergeClasses)(timePickerClassNames.listbox, styles.listbox, state.listbox.className);
     }
     (0, _reactcombobox.useComboboxStyles_unstable)(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    'use no memo';\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"],"names":["__styles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","clearIcon","listbox","useStyles","Bxyxcbc","d","useTimePickerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,oBAAoB;;;gCAcY;eAA5BS;;;uBAhBwB,gBAAgB;+BACd,0BAA0B;AAC9D,6BAA6B;IAChCR,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,uBAAuB;IAC9BC,UAAU,EAAE,4BAA4B;IACxCC,SAAS,EAAE,2BAA2B;IACtCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAQ,OAAA,EAAA;QAAAE,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AAGS,sCAAsCE,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;IAC1BI,KAAK,CAACT,IAAI,CAACW,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACC,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;IACpFF,KAAK,CAACR,KAAK,CAACU,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACE,KAAK,EAAEQ,KAAK,CAACR,KAAK,CAACU,SAAS,CAAC;IACvF,IAAIF,KAAK,CAACP,UAAU,EAAE;QAClBO,KAAK,CAACP,UAAU,CAACS,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACG,UAAU,EAAEO,KAAK,CAACP,UAAU,CAACS,SAAS,CAAC;IAC1G;IACA,IAAIF,KAAK,CAACN,SAAS,EAAE;QACjBM,KAAK,CAACN,SAAS,CAACQ,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACI,SAAS,EAAEM,KAAK,CAACN,SAAS,CAACQ,SAAS,CAAC;IACvG;IACA,IAAIF,KAAK,CAACL,OAAO,EAAE;QACfK,KAAK,CAACL,OAAO,CAACO,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACK,OAAO,EAAEM,MAAM,CAACN,OAAO,EAAEK,KAAK,CAACL,OAAO,CAACO,SAAS,CAAC;IACjH;QACAb,yCAA0B,EAACW,KAAK,CAAC;IACjC,OAAOA,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n    }\n    if (state.clearIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n    }\n    if (state.listbox) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n    }\n    useComboboxStyles_unstable(state);\n    return state;\n};\n"],"names":["__styles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","clearIcon","listbox","useStyles","Bxyxcbc","d","useTimePickerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,oBAAoB;;;IAchBS,4BAA4B;;;;uBAhBJ,gBAAgB;+BACd,0BAA0B;AAC9D,6BAA6B;IAChCR,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,uBAAuB;IAC9BC,UAAU,EAAE,4BAA4B;IACxCC,SAAS,EAAE,2BAA2B;IACtCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAQ,OAAA,EAAA;QAAAE,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AAGS,sCAAsCE,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAI,KAAK,CAACT,IAAI,CAACW,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACC,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;IACpF,oDAAA;IACAF,KAAK,CAACR,KAAK,CAACU,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACE,KAAK,EAAEQ,KAAK,CAACR,KAAK,CAACU,SAAS,CAAC;IACvF,IAAIF,KAAK,CAACP,UAAU,EAAE;QAClB,oDAAA;QACAO,KAAK,CAACP,UAAU,CAACS,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACG,UAAU,EAAEO,KAAK,CAACP,UAAU,CAACS,SAAS,CAAC;IAC1G;IACA,IAAIF,KAAK,CAACN,SAAS,EAAE;QACjB,oDAAA;QACAM,KAAK,CAACN,SAAS,CAACQ,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACI,SAAS,EAAEM,KAAK,CAACN,SAAS,CAACQ,SAAS,CAAC;IACvG;IACA,IAAIF,KAAK,CAACL,OAAO,EAAE;QACf,oDAAA;QACAK,KAAK,CAACL,OAAO,CAACO,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACK,OAAO,EAAEM,MAAM,CAACN,OAAO,EAAEK,KAAK,CAACL,OAAO,CAACO,SAAS,CAAC;IACjH;QACAb,yCAA0B,EAACW,KAAK,CAAC;IACjC,OAAOA,KAAK;AAChB,CAAC"}

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

@@ -34,15 +34,20 @@ const useStyles = (0, _react.makeStyles)({
 const useTimePickerStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(timePickerClassNames.root, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(timePickerClassNames.input, state.input.className);
     if (state.expandIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon.className = (0, _react.mergeClasses)(timePickerClassNames.expandIcon, state.expandIcon.className);
     }
     if (state.clearIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.clearIcon.className = (0, _react.mergeClasses)(timePickerClassNames.clearIcon, state.clearIcon.className);
     }
     if (state.listbox) {
+        // eslint-disable-next-line react-hooks/immutability
         state.listbox.className = (0, _react.mergeClasses)(timePickerClassNames.listbox, styles.listbox, state.listbox.className);
     }
     (0, _reactcombobox.useComboboxStyles_unstable)(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/useTimePickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TimePickerSlots, TimePickerState } from './TimePicker.types';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\n\nexport const timePickerClassNames: SlotClassNames<TimePickerSlots> = {\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};\n\nconst useStyles = makeStyles({\n  listbox: {\n    maxHeight: 'min(80vh, 416px)', // height for 12 items or 80vh, whichever is smaller\n  },\n});\n\n/**\n * Apply styling to the TimePicker slots based on the state\n */\nexport const useTimePickerStyles_unstable = (state: TimePickerState): TimePickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n\n  state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n  }\n\n  if (state.clearIcon) {\n    state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n  }\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n  }\n\n  useComboboxStyles_unstable(state);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","clearIcon","listbox","useStyles","maxHeight","useTimePickerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,oBAAAA;;;gCAiBAQ;eAAAA;;;uBAtB4B,iBAAiB;+BAGf,2BAA2B;AAE/D,6BAA8D;IACnEP,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,WAAW;IACXC,SAAS;AACX,EAAE;AAEF,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BQ,SAAS;QACPE,WAAW;IACb;AACF;AAKO,qCAAqC,CAACE;IAC3C;IAEA,MAAMC,SAASJ;IAEfG,MAAMR,IAAI,CAACU,SAAS,OAAGb,mBAAAA,EAAaE,qBAAqBC,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEnFF,MAAMP,KAAK,CAACS,SAAS,GAAGb,uBAAAA,EAAaE,qBAAqBE,KAAK,EAAEO,MAAMP,KAAK,CAACS,SAAS;IAEtF,IAAIF,MAAMN,UAAU,EAAE;QACpBM,MAAMN,UAAU,CAACQ,SAAS,OAAGb,mBAAAA,EAAaE,qBAAqBG,UAAU,EAAEM,MAAMN,UAAU,CAACQ,SAAS;IACvG;IAEA,IAAIF,MAAML,SAAS,EAAE;QACnBK,MAAML,SAAS,CAACO,SAAS,OAAGb,mBAAAA,EAAaE,qBAAqBI,SAAS,EAAEK,MAAML,SAAS,CAACO,SAAS;IACpG;IAEA,IAAIF,MAAMJ,OAAO,EAAE;QACjBI,MAAMJ,OAAO,CAACM,SAAS,OAAGb,mBAAAA,EAAaE,qBAAqBK,OAAO,EAAEK,OAAOL,OAAO,EAAEI,MAAMJ,OAAO,CAACM,SAAS;IAC9G;QAEAZ,yCAAAA,EAA2BU;IAE3B,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TimePicker/useTimePickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TimePickerSlots, TimePickerState } from './TimePicker.types';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\n\nexport const timePickerClassNames: SlotClassNames<TimePickerSlots> = {\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};\n\nconst useStyles = makeStyles({\n  listbox: {\n    maxHeight: 'min(80vh, 416px)', // height for 12 items or 80vh, whichever is smaller\n  },\n});\n\n/**\n * Apply styling to the TimePicker slots based on the state\n */\nexport const useTimePickerStyles_unstable = (state: TimePickerState): TimePickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n  }\n\n  if (state.clearIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n  }\n\n  if (state.listbox) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n  }\n\n  useComboboxStyles_unstable(state);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","clearIcon","listbox","useStyles","maxHeight","useTimePickerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,oBAAAA;;;gCAiBAQ;eAAAA;;;uBAtB4B,iBAAiB;+BAGf,2BAA2B;AAE/D,6BAA8D;IACnEP,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,WAAW;IACXC,SAAS;AACX,EAAE;AAEF,MAAMC,YAAYT,qBAAAA,EAAW;IAC3BQ,SAAS;QACPE,WAAW;IACb;AACF;AAKO,qCAAqC,CAACE;IAC3C;IAEA,MAAMC,SAASJ;IAEf,oDAAoD;IACpDG,MAAMR,IAAI,CAACU,SAAS,GAAGb,uBAAAA,EAAaE,qBAAqBC,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEnF,oDAAoD;IACpDF,MAAMP,KAAK,CAACS,SAAS,GAAGb,uBAAAA,EAAaE,qBAAqBE,KAAK,EAAEO,MAAMP,KAAK,CAACS,SAAS;IAEtF,IAAIF,MAAMN,UAAU,EAAE;QACpB,oDAAoD;QACpDM,MAAMN,UAAU,CAACQ,SAAS,OAAGb,mBAAAA,EAAaE,qBAAqBG,UAAU,EAAEM,MAAMN,UAAU,CAACQ,SAAS;IACvG;IAEA,IAAIF,MAAML,SAAS,EAAE;QACnB,oDAAoD;QACpDK,MAAML,SAAS,CAACO,SAAS,OAAGb,mBAAAA,EAAaE,qBAAqBI,SAAS,EAAEK,MAAML,SAAS,CAACO,SAAS;IACpG;IAEA,IAAIF,MAAMJ,OAAO,EAAE;QACjB,oDAAoD;QACpDI,MAAMJ,OAAO,CAACM,SAAS,OAAGb,mBAAAA,EAAaE,qBAAqBK,OAAO,EAAEK,OAAOL,OAAO,EAAEI,MAAMJ,OAAO,CAACM,SAAS;IAC9G;QAEAZ,yCAAAA,EAA2BU;IAE3B,OAAOA;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-timepicker-compat",
-  "version": "0.4.33",
+  "version": "0.4.35",
   "description": "Fluent UI TimePicker Compat Component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,12 +19,12 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-combobox": "^9.17.0",
-    "@fluentui/react-field": "^9.5.0",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-combobox": "^9.17.2",
+    "@fluentui/react-field": "^9.5.2",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },