@fluentui/react-timepicker-compat 0.4.16 → 0.4.17

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-timepicker-compat
 
-This log was last generated on Mon, 08 Sep 2025 12:41:28 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:06:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.4.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.4.17)
+
+Thu, 02 Oct 2025 15:06:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.4.16..@fluentui/react-timepicker-compat_v0.4.17)
+
+### Patches
+
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-combobox to v9.16.7 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-field to v9.4.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
 ## [0.4.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.4.16)
 
-Mon, 08 Sep 2025 12:41:28 GMT 
+Mon, 08 Sep 2025 12:50:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.4.14..@fluentui/react-timepicker-compat_v0.4.16)
 
 ### Patches

package/lib/components/TimePicker/TimePicker.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTimePicker_unstable } from './useTimePicker';
 import { useTimePickerStyles_unstable } from './useTimePickerStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTimePicker_unstable } from './useTimePicker';\nimport { useTimePickerStyles_unstable } from './useTimePickerStyles.styles';\nimport type { TimePickerProps } from './TimePicker.types';\nimport { renderCombobox_unstable, useComboboxContextValues } from '@fluentui/react-combobox';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TimePicker Compat component\n */\nexport const TimePicker: ForwardRefComponent<TimePickerProps> = React.forwardRef((props, ref) => {\n  const state = useTimePicker_unstable(props, ref);\n\n  const contextValues = useComboboxContextValues(state);\n\n  useTimePickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useTimePickerCompatStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nTimePicker.displayName = 'TimePicker';\n"],"names":["React","useTimePicker_unstable","useTimePickerStyles_unstable","renderCombobox_unstable","useComboboxContextValues","useCustomStyleHook_unstable","TimePicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAE5E,SAASC,uBAAuB,EAAEC,wBAAwB,QAAQ,2BAA2B;AAC7F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQT,uBAAuBO,OAAOC;IAE5C,MAAME,gBAAgBP,yBAAyBM;IAE/CR,6BAA6BQ;IAC7BL,4BAA4B,sCAAsCK;IAElE,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,WAAWM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTimePicker_unstable } from './useTimePicker';\nimport { useTimePickerStyles_unstable } from './useTimePickerStyles.styles';\nimport type { TimePickerProps } from './TimePicker.types';\nimport { renderCombobox_unstable, useComboboxContextValues } from '@fluentui/react-combobox';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TimePicker Compat component\n */\nexport const TimePicker: ForwardRefComponent<TimePickerProps> = React.forwardRef((props, ref) => {\n  const state = useTimePicker_unstable(props, ref);\n\n  const contextValues = useComboboxContextValues(state);\n\n  useTimePickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useTimePickerCompatStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nTimePicker.displayName = 'TimePicker';\n"],"names":["React","useTimePicker_unstable","useTimePickerStyles_unstable","renderCombobox_unstable","useComboboxContextValues","useCustomStyleHook_unstable","TimePicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAE5E,SAASC,uBAAuB,EAAEC,wBAAwB,QAAQ,2BAA2B;AAC7F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQT,uBAAuBO,OAAOC;IAE5C,MAAME,gBAAgBP,yBAAyBM;IAE/CR,6BAA6BQ;IAC7BL,4BAA4B,sCAAsCK;IAElE,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,WAAWM,WAAW,GAAG"}

package/lib/components/TimePicker/useTimePicker.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { elementContains, mergeCallbacks, useControllableState, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { Enter } from '@fluentui/keyboard-keys';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/useTimePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  elementContains,\n  mergeCallbacks,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport type { Hour, TimePickerOption, TimePickerProps, TimePickerState, TimeSelectionData } from './TimePicker.types';\nimport { ComboboxProps, useCombobox_unstable, Option } from '@fluentui/react-combobox';\nimport { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';\nimport {\n  dateToKey,\n  keyToDate,\n  formatDateToTimeString as defaultFormatDateToTimeString,\n  getDateStartAnchor,\n  getDateEndAnchor,\n  getTimesBetween,\n  getDateFromTimeString,\n} from './timeMath';\n\n/**\n * Create the state required to render TimePicker.\n *\n * The returned state can be modified with hooks such as useTimePickerStyles_unstable,\n * before being passed to renderTimePicker_unstable.\n *\n * @param props - props from this instance of TimePicker\n * @param ref - reference to root HTMLElement of TimePicker\n */\nexport const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HTMLInputElement>): TimePickerState => {\n  const {\n    dateAnchor: dateAnchorInProps,\n    defaultSelectedTime: defaultSelectedTimeInProps,\n    endHour = 24,\n    formatDateToTimeString = defaultFormatDateToTimeString,\n    hourCycle,\n    increment = 30,\n    onTimeChange,\n    selectedTime: selectedTimeInProps,\n    showSeconds = false,\n    startHour = 0,\n    parseTimeStringToDate: parseTimeStringToDateInProps,\n    ...rest\n  } = props;\n  const { freeform = false } = rest;\n\n  const { dateStartAnchor, dateEndAnchor } = useStableDateAnchor(\n    dateAnchorInProps ?? selectedTimeInProps ?? defaultSelectedTimeInProps,\n    startHour,\n    endHour,\n  );\n\n  const options: TimePickerOption[] = React.useMemo(\n    () =>\n      getTimesBetween(dateStartAnchor, dateEndAnchor, increment).map(time => ({\n        date: time,\n        key: dateToKey(time),\n        text: formatDateToTimeString(time, { showSeconds, hourCycle }),\n      })),\n    [dateEndAnchor, dateStartAnchor, formatDateToTimeString, hourCycle, increment, showSeconds],\n  );\n\n  const [selectedTime, setSelectedTime] = useControllableState<Date | null>({\n    state: selectedTimeInProps,\n    defaultState: defaultSelectedTimeInProps,\n    initialState: null,\n  });\n\n  const [submittedText, setSubmittedText] = React.useState<string | undefined>(undefined);\n\n  const selectTime: TimePickerProps['onTimeChange'] = useEventCallback((e, data) => {\n    setSelectedTime(data.selectedTime);\n    setSubmittedText(data.selectedTimeText);\n    onTimeChange?.(e, data);\n  });\n\n  const selectedOptions = React.useMemo(() => {\n    const selectedTimeKey = dateToKey(selectedTime);\n    const selectedOption = options.find(date => date.key === selectedTimeKey);\n    return selectedOption ? [selectedOption.key] : [];\n  }, [options, selectedTime]);\n\n  const 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 { 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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"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { useComboboxStyles_unstable } from '@fluentui/react-combobox';
 export const timePickerClassNames = {

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":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\nexport const timePickerClassNames = {\n    root: 'fui-TimePicker',\n    input: 'fui-TimePicker__input',\n    expandIcon: 'fui-TimePicker__expandIcon',\n    clearIcon: 'fui-TimePicker__clearIcon',\n    listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = makeStyles({\n    listbox: {\n        maxHeight: 'min(80vh, 416px)'\n    }\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */ export const useTimePickerStyles_unstable = (state)=>{\n    '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,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    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":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { useComboboxStyles_unstable } from '@fluentui/react-combobox';
 export const timePickerClassNames = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/useTimePickerStyles.styles.ts"],"sourcesContent":["import { 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,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  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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTimePicker_unstable } from './useTimePicker';\nimport { useTimePickerStyles_unstable } from './useTimePickerStyles.styles';\nimport type { TimePickerProps } from './TimePicker.types';\nimport { renderCombobox_unstable, useComboboxContextValues } from '@fluentui/react-combobox';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TimePicker Compat component\n */\nexport const TimePicker: ForwardRefComponent<TimePickerProps> = React.forwardRef((props, ref) => {\n  const state = useTimePicker_unstable(props, ref);\n\n  const contextValues = useComboboxContextValues(state);\n\n  useTimePickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useTimePickerCompatStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nTimePicker.displayName = 'TimePicker';\n"],"names":["React","useTimePicker_unstable","useTimePickerStyles_unstable","renderCombobox_unstable","useComboboxContextValues","useCustomStyleHook_unstable","TimePicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":";;;;+BAWaM;;;;;;;iEAXU,QAAQ;+BAEQ,kBAAkB;2CACZ,+BAA+B;+BAEV,2BAA2B;qCACjD,kCAAkC;AAKvE,mBAAMA,WAAAA,GAAmDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQT,qCAAAA,EAAuBO,OAAOC;IAE5C,MAAME,oBAAgBP,uCAAAA,EAAyBM;QAE/CR,uDAAAA,EAA6BQ;QAC7BL,gDAAAA,EAA4B,sCAAsCK;IAElE,WAAOP,sCAAAA,EAAwBO,OAAOC;AACxC,GAAG;AAEHL,WAAWM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTimePicker_unstable } from './useTimePicker';\nimport { useTimePickerStyles_unstable } from './useTimePickerStyles.styles';\nimport type { TimePickerProps } from './TimePicker.types';\nimport { renderCombobox_unstable, useComboboxContextValues } from '@fluentui/react-combobox';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TimePicker Compat component\n */\nexport const TimePicker: ForwardRefComponent<TimePickerProps> = React.forwardRef((props, ref) => {\n  const state = useTimePicker_unstable(props, ref);\n\n  const contextValues = useComboboxContextValues(state);\n\n  useTimePickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useTimePickerCompatStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nTimePicker.displayName = 'TimePicker';\n"],"names":["React","useTimePicker_unstable","useTimePickerStyles_unstable","renderCombobox_unstable","useComboboxContextValues","useCustomStyleHook_unstable","TimePicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BAEQ,kBAAkB;2CACZ,+BAA+B;+BAEV,2BAA2B;qCACjD,kCAAkC;AAKvE,MAAMM,aAAAA,WAAAA,GAAmDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQT,qCAAAA,EAAuBO,OAAOC;IAE5C,MAAME,oBAAgBP,uCAAAA,EAAyBM;QAE/CR,uDAAAA,EAA6BQ;QAC7BL,gDAAAA,EAA4B,sCAAsCK;IAElE,WAAOP,sCAAAA,EAAwBO,OAAOC;AACxC,GAAG;AAEHL,WAAWM,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/useTimePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  elementContains,\n  mergeCallbacks,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport type { Hour, TimePickerOption, TimePickerProps, TimePickerState, TimeSelectionData } from './TimePicker.types';\nimport { ComboboxProps, useCombobox_unstable, Option } from '@fluentui/react-combobox';\nimport { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';\nimport {\n  dateToKey,\n  keyToDate,\n  formatDateToTimeString as defaultFormatDateToTimeString,\n  getDateStartAnchor,\n  getDateEndAnchor,\n  getTimesBetween,\n  getDateFromTimeString,\n} from './timeMath';\n\n/**\n * Create the state required to render TimePicker.\n *\n * The returned state can be modified with hooks such as useTimePickerStyles_unstable,\n * before being passed to renderTimePicker_unstable.\n *\n * @param props - props from this instance of TimePicker\n * @param ref - reference to root HTMLElement of TimePicker\n */\nexport const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HTMLInputElement>): TimePickerState => {\n  const {\n    dateAnchor: dateAnchorInProps,\n    defaultSelectedTime: defaultSelectedTimeInProps,\n    endHour = 24,\n    formatDateToTimeString = defaultFormatDateToTimeString,\n    hourCycle,\n    increment = 30,\n    onTimeChange,\n    selectedTime: selectedTimeInProps,\n    showSeconds = false,\n    startHour = 0,\n    parseTimeStringToDate: parseTimeStringToDateInProps,\n    ...rest\n  } = props;\n  const { freeform = false } = rest;\n\n  const { dateStartAnchor, dateEndAnchor } = useStableDateAnchor(\n    dateAnchorInProps ?? selectedTimeInProps ?? defaultSelectedTimeInProps,\n    startHour,\n    endHour,\n  );\n\n  const options: TimePickerOption[] = React.useMemo(\n    () =>\n      getTimesBetween(dateStartAnchor, dateEndAnchor, increment).map(time => ({\n        date: time,\n        key: dateToKey(time),\n        text: formatDateToTimeString(time, { showSeconds, hourCycle }),\n      })),\n    [dateEndAnchor, dateStartAnchor, formatDateToTimeString, hourCycle, increment, showSeconds],\n  );\n\n  const [selectedTime, setSelectedTime] = useControllableState<Date | null>({\n    state: selectedTimeInProps,\n    defaultState: defaultSelectedTimeInProps,\n    initialState: null,\n  });\n\n  const [submittedText, setSubmittedText] = React.useState<string | undefined>(undefined);\n\n  const selectTime: TimePickerProps['onTimeChange'] = useEventCallback((e, data) => {\n    setSelectedTime(data.selectedTime);\n    setSubmittedText(data.selectedTimeText);\n    onTimeChange?.(e, data);\n  });\n\n  const selectedOptions = React.useMemo(() => {\n    const selectedTimeKey = dateToKey(selectedTime);\n    const selectedOption = options.find(date => date.key === selectedTimeKey);\n    return selectedOption ? [selectedOption.key] : [];\n  }, [options, selectedTime]);\n\n  const 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 { 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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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\nexport const timePickerClassNames = {\n    root: 'fui-TimePicker',\n    input: 'fui-TimePicker__input',\n    expandIcon: 'fui-TimePicker__expandIcon',\n    clearIcon: 'fui-TimePicker__clearIcon',\n    listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = makeStyles({\n    listbox: {\n        maxHeight: 'min(80vh, 416px)'\n    }\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */ export const useTimePickerStyles_unstable = (state)=>{\n    '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":";;;;;;;;;;;wBAEiC;eAApBG;;gCAcgC;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,qCAAsCE,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    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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/useTimePickerStyles.styles.ts"],"sourcesContent":["import { 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":";;;;;;;;;;;wBAKaG;eAAAA;;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,GAAGb,uBAAAA,EAAaE,qBAAqBC,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEnFF,MAAMP,KAAK,CAACS,SAAS,OAAGb,mBAAAA,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  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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-timepicker-compat",
-  "version": "0.4.16",
+  "version": "0.4.17",
   "description": "Fluent UI TimePicker Compat Component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,12 +28,12 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-combobox": "^9.16.6",
-    "@fluentui/react-field": "^9.4.5",
-    "@fluentui/react-jsx-runtime": "^9.2.0",
-    "@fluentui/react-shared-contexts": "^9.25.1",
+    "@fluentui/react-combobox": "^9.16.7",
+    "@fluentui/react-field": "^9.4.6",
+    "@fluentui/react-jsx-runtime": "^9.2.1",
+    "@fluentui/react-shared-contexts": "^9.25.2",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.1",
+    "@fluentui/react-utilities": "^9.25.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },