@fluentui/react-timepicker-compat 0.4.15 → 0.4.17

package/CHANGELOG.md

@@ -1,9 +1,38 @@
 # Change Log - @fluentui/react-timepicker-compat
 
-This log was last generated on Thu, 21 Aug 2025 12:25:39 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: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
+
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-combobox to v9.16.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-field to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+
 ## [0.4.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.4.14)
 
 Thu, 21 Aug 2025 12:25:39 GMT 

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/timeMath.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/timeMath.ts"],"sourcesContent":["import type { TimeFormatOptions, TimeStringValidationResult } from './TimePicker.types';\n\nfunction isValidDate(date: Date): boolean {\n  return !isNaN(date.getTime());\n}\n\n/**\n * Converts a Date object to a string key.\n */\nexport function dateToKey(date: Date | null): string {\n  if (!date) {\n    return '';\n  }\n  if (!isValidDate(date)) {\n    return 'invalid';\n  }\n  return date.toISOString();\n}\n\n/**\n * Converts a string key back to a Date object.\n * Returns undefined for keys that don't represent valid dates.\n */\nexport function keyToDate(key: string): Date | null {\n  if (key === '' || key === 'invalid') {\n    return null;\n  }\n  const date = new Date(key);\n  return isValidDate(date) ? date : null;\n}\n\n/**\n * Formats a Date object into a time string based on provided options.\n *\n * @param date - The Date object to be formatted.\n * @param options - Formatting options. It has two properties:\n *      1. hourCycle (default: undefined): Determines if the time format should be 12-hour or 24-hour.\n *      2. showSeconds (default: false): Determines if the seconds should be included in the formatted string.\n * @returns Formatted time string based on the given options.\n *\n * @example\n * const date = new Date(2023, 9, 6, 23, 45, 12);\n * formatDateToTimeString(date);                         // Returns \"23:45\" in CET\n * formatDateToTimeString(date, \\{ showSeconds: true \\});  // Returns \"23:45:12\" in CET\n * formatDateToTimeString(date, \\{ hourCycle: 'h12', showSeconds: true \\}); // Returns \"11:45:12 PM\" in CET\n */\nexport function formatDateToTimeString(date: Date, { hourCycle, showSeconds }: TimeFormatOptions = {}): string {\n  return date.toLocaleTimeString(undefined, {\n    hour: 'numeric',\n    hourCycle,\n    minute: '2-digit',\n    second: showSeconds ? '2-digit' : undefined,\n  });\n}\n\n/**\n * Get the start date anchor based on the provided parameters.\n * @example\n * const date = new Date(2023, 9, 6); // October 6, 2023\n * getStartAnchorDate(date, 5);       // Returns a date for October 6, 2023, 05:00:00\n */\nexport function getDateStartAnchor(dateAnchor: Date, startHour: number): Date {\n  const startDate = new Date(dateAnchor);\n  startDate.setHours(startHour, 0, 0, 0);\n  return startDate;\n}\n\n/**\n * Get the end date anchor based on the provided parameters.\n * @example\n * const date = new Date(2023, 9, 6); // October 6, 2023\n * getEndAnchorDate(date, 5, 10);     // Returns a date for October 6, 2023, 10:00:00\n * getEndAnchorDate(date, 10, 5);     // Returns a date for October 7, 2023, 05:00:00 (next day due to hour conditions)\n */\nexport function getDateEndAnchor(dateAnchor: Date, startHour: number, endHour: number): Date {\n  const endDate = new Date(dateAnchor);\n  if (startHour > endHour || endHour === 24) {\n    endDate.setDate(endDate.getDate() + 1);\n  }\n  endDate.setHours(endHour === 24 ? 0 : endHour, 0, 0, 0);\n  return endDate;\n}\n\n/**\n * Generates an array of Date objects between two given Date anchors.\n *\n * @param dateStartAnchor - The starting Date anchor.\n * @param dateEndAnchor - The ending Date anchor.\n * @param increment - The minute increment between each Date in the resulting array.\n * @returns - An array of Date objects.\n *\n * @example\n * const start = new Date(2023, 0, 1, 10, 0); // Jan 1, 2023 10:00:00 AM\n * const end = new Date(2023, 0, 1, 11, 0);   // Jan 1, 2023 11:00:00 AM\n * getTimesBetween(start, end, 15);      // Returns array with Dates [10:00, 10:15, 10:30, 10:45]\n */\nexport function getTimesBetween(dateStartAnchor: Date, dateEndAnchor: Date, increment: number) {\n  if (increment <= 0) {\n    // eslint-disable-next-line no-console\n    console.error('Increment value should be a positive number.');\n    return [];\n  }\n\n  const result: Date[] = [];\n\n  const startDate = new Date(dateStartAnchor);\n  while (startDate < dateEndAnchor) {\n    result.push(new Date(startDate));\n    startDate.setMinutes(startDate.getMinutes() + increment);\n  }\n\n  return result;\n}\n\nconst REGEX_SHOW_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9])\\s([AaPp][Mm]))$/;\nconst REGEX_HIDE_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):[0-5][0-9]\\s([AaPp][Mm]))$/;\nconst REGEX_SHOW_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]:[0-5][0-9]$/;\nconst REGEX_HIDE_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]$/;\n\n/**\n * Calculates a new date from the user-selected time string based on anchor dates.\n * Returns an object containing a date if the provided time string is valid, and an optional string indicating the type of error.\n *\n * @param time - The time string to be parsed (e.g., \"2:30 PM\", \"15:45:20\").\n * @param dateStartAnchor - The start anchor date.\n * @param dateEndAnchor - The end anchor date.\n * @param timeFormatOptions - format options for the provided time string.\n * @returns An object with either a 'date' or an 'errorType'.\n *\n * @example\n * Input: time=\"2:30 PM\", dateStartAnchor=2023-10-06T12:00:00Z, dateEndAnchor=2023-10-07T12:00:00Z, options={hourCycle: 'h12', showSeconds: false}\n * Output: { date: 2023-10-06T14:30:00Z }\n *\n * Input: time=\"25:30\"\n * Output: { errorType: 'invalid-input' }\n *\n * Input: time=\"1:30 AM\", dateStartAnchor=2023-10-06T03:00:00Z, dateEndAnchor=2023-10-07T03:00:00Z, options={hourCycle: 'h12', showSeconds: false}\n * Output: { date: 2023-10-07T01:30:00Z, errorType: 'out-of-bounds' }\n */\nexport function getDateFromTimeString(\n  time: string | undefined,\n  dateStartAnchor: Date,\n  dateEndAnchor: Date,\n  timeFormatOptions: TimeFormatOptions,\n): TimeStringValidationResult {\n  if (!time) {\n    return { date: null, errorType: 'required-input' };\n  }\n\n  const { hourCycle, showSeconds } = timeFormatOptions;\n  const hour12 = hourCycle === 'h11' || hourCycle === 'h12';\n\n  // Determine the regex based on format\n  const regex = hour12\n    ? showSeconds\n      ? REGEX_SHOW_SECONDS_HOUR_12\n      : REGEX_HIDE_SECONDS_HOUR_12\n    : showSeconds\n    ? REGEX_SHOW_SECONDS_HOUR_24\n    : REGEX_HIDE_SECONDS_HOUR_24;\n\n  if (!regex.test(time)) {\n    return { date: null, errorType: 'invalid-input' };\n  }\n\n  const timeParts = /^(\\d\\d?):(\\d\\d):?(\\d\\d)? ?([ap]m)?/i.exec(time);\n  if (!timeParts) {\n    return { date: null, errorType: 'invalid-input' };\n  }\n\n  const [, selectedHours, minutes, seconds, amPm] = timeParts;\n  let hours = selectedHours;\n\n  // Adjust for 12-hour time format if needed\n  if (hour12 && amPm) {\n    if (amPm.toLowerCase() === 'pm' && +hours !== 12) {\n      hours = (+hours + 12).toString();\n    } else if (amPm.toLowerCase() === 'am' && +hours === 12) {\n      hours = '0';\n    }\n  }\n\n  const adjustedDate = new Date(dateStartAnchor);\n  adjustedDate.setHours(+hours, +minutes, seconds ? +seconds : 0);\n\n  // Adjust to the next day if the selected time is before the anchor time\n  if (adjustedDate < dateStartAnchor) {\n    adjustedDate.setDate(adjustedDate.getDate() + 1);\n  }\n\n  if (adjustedDate >= dateEndAnchor) {\n    return { date: adjustedDate, errorType: 'out-of-bounds' };\n  }\n\n  return { date: adjustedDate };\n}\n"],"names":["isValidDate","date","isNaN","getTime","dateToKey","toISOString","keyToDate","key","Date","formatDateToTimeString","hourCycle","showSeconds","toLocaleTimeString","undefined","hour","minute","second","getDateStartAnchor","dateAnchor","startHour","startDate","setHours","getDateEndAnchor","endHour","endDate","setDate","getDate","getTimesBetween","dateStartAnchor","dateEndAnchor","increment","console","error","result","push","setMinutes","getMinutes","REGEX_SHOW_SECONDS_HOUR_12","REGEX_HIDE_SECONDS_HOUR_12","REGEX_SHOW_SECONDS_HOUR_24","REGEX_HIDE_SECONDS_HOUR_24","getDateFromTimeString","time","timeFormatOptions","errorType","hour12","regex","test","timeParts","exec","selectedHours","minutes","seconds","amPm","hours","toLowerCase","toString","adjustedDate"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TimePicker/timeMath.ts"],"sourcesContent":["import type { TimeFormatOptions, TimeStringValidationResult } from './TimePicker.types';\n\nfunction isValidDate(date: Date): boolean {\n  return !isNaN(date.getTime());\n}\n\n/**\n * Converts a Date object to a string key.\n */\nexport function dateToKey(date: Date | null): string {\n  if (!date) {\n    return '';\n  }\n  if (!isValidDate(date)) {\n    return 'invalid';\n  }\n  return date.toISOString();\n}\n\n/**\n * Converts a string key back to a Date object.\n * Returns undefined for keys that don't represent valid dates.\n */\nexport function keyToDate(key: string): Date | null {\n  if (key === '' || key === 'invalid') {\n    return null;\n  }\n  const date = new Date(key);\n  return isValidDate(date) ? date : null;\n}\n\n/**\n * Formats a Date object into a time string based on provided options.\n *\n * @param date - The Date object to be formatted.\n * @param options - Formatting options. It has two properties:\n *      1. hourCycle (default: undefined): Determines if the time format should be 12-hour or 24-hour.\n *      2. showSeconds (default: false): Determines if the seconds should be included in the formatted string.\n * @returns Formatted time string based on the given options.\n *\n * @example\n * const date = new Date(2023, 9, 6, 23, 45, 12);\n * formatDateToTimeString(date);                         // Returns \"23:45\" in CET\n * formatDateToTimeString(date, \\{ showSeconds: true \\});  // Returns \"23:45:12\" in CET\n * formatDateToTimeString(date, \\{ hourCycle: 'h12', showSeconds: true \\}); // Returns \"11:45:12 PM\" in CET\n */\nexport function formatDateToTimeString(date: Date, { hourCycle, showSeconds }: TimeFormatOptions = {}): string {\n  return date.toLocaleTimeString(undefined, {\n    hour: 'numeric',\n    hourCycle,\n    minute: '2-digit',\n    second: showSeconds ? '2-digit' : undefined,\n  });\n}\n\n/**\n * Get the start date anchor based on the provided parameters.\n * @example\n * const date = new Date(2023, 9, 6); // October 6, 2023\n * getStartAnchorDate(date, 5);       // Returns a date for October 6, 2023, 05:00:00\n */\nexport function getDateStartAnchor(dateAnchor: Date, startHour: number): Date {\n  const startDate = new Date(dateAnchor);\n  startDate.setHours(startHour, 0, 0, 0);\n  return startDate;\n}\n\n/**\n * Get the end date anchor based on the provided parameters.\n * @example\n * const date = new Date(2023, 9, 6); // October 6, 2023\n * getEndAnchorDate(date, 5, 10);     // Returns a date for October 6, 2023, 10:00:00\n * getEndAnchorDate(date, 10, 5);     // Returns a date for October 7, 2023, 05:00:00 (next day due to hour conditions)\n */\nexport function getDateEndAnchor(dateAnchor: Date, startHour: number, endHour: number): Date {\n  const endDate = new Date(dateAnchor);\n  if (startHour > endHour || endHour === 24) {\n    endDate.setDate(endDate.getDate() + 1);\n  }\n  endDate.setHours(endHour === 24 ? 0 : endHour, 0, 0, 0);\n  return endDate;\n}\n\n/**\n * Generates an array of Date objects between two given Date anchors.\n *\n * @param dateStartAnchor - The starting Date anchor.\n * @param dateEndAnchor - The ending Date anchor.\n * @param increment - The minute increment between each Date in the resulting array.\n * @returns - An array of Date objects.\n *\n * @example\n * const start = new Date(2023, 0, 1, 10, 0); // Jan 1, 2023 10:00:00 AM\n * const end = new Date(2023, 0, 1, 11, 0);   // Jan 1, 2023 11:00:00 AM\n * getTimesBetween(start, end, 15);      // Returns array with Dates [10:00, 10:15, 10:30, 10:45]\n */\nexport function getTimesBetween(dateStartAnchor: Date, dateEndAnchor: Date, increment: number): Date[] {\n  if (increment <= 0) {\n    // eslint-disable-next-line no-console\n    console.error('Increment value should be a positive number.');\n    return [];\n  }\n\n  const result: Date[] = [];\n\n  const startDate = new Date(dateStartAnchor);\n  while (startDate < dateEndAnchor) {\n    result.push(new Date(startDate));\n    startDate.setMinutes(startDate.getMinutes() + increment);\n  }\n\n  return result;\n}\n\nconst REGEX_SHOW_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9])\\s([AaPp][Mm]))$/;\nconst REGEX_HIDE_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):[0-5][0-9]\\s([AaPp][Mm]))$/;\nconst REGEX_SHOW_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]:[0-5][0-9]$/;\nconst REGEX_HIDE_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]$/;\n\n/**\n * Calculates a new date from the user-selected time string based on anchor dates.\n * Returns an object containing a date if the provided time string is valid, and an optional string indicating the type of error.\n *\n * @param time - The time string to be parsed (e.g., \"2:30 PM\", \"15:45:20\").\n * @param dateStartAnchor - The start anchor date.\n * @param dateEndAnchor - The end anchor date.\n * @param timeFormatOptions - format options for the provided time string.\n * @returns An object with either a 'date' or an 'errorType'.\n *\n * @example\n * Input: time=\"2:30 PM\", dateStartAnchor=2023-10-06T12:00:00Z, dateEndAnchor=2023-10-07T12:00:00Z, options={hourCycle: 'h12', showSeconds: false}\n * Output: { date: 2023-10-06T14:30:00Z }\n *\n * Input: time=\"25:30\"\n * Output: { errorType: 'invalid-input' }\n *\n * Input: time=\"1:30 AM\", dateStartAnchor=2023-10-06T03:00:00Z, dateEndAnchor=2023-10-07T03:00:00Z, options={hourCycle: 'h12', showSeconds: false}\n * Output: { date: 2023-10-07T01:30:00Z, errorType: 'out-of-bounds' }\n */\nexport function getDateFromTimeString(\n  time: string | undefined,\n  dateStartAnchor: Date,\n  dateEndAnchor: Date,\n  timeFormatOptions: TimeFormatOptions,\n): TimeStringValidationResult {\n  if (!time) {\n    return { date: null, errorType: 'required-input' };\n  }\n\n  const { hourCycle, showSeconds } = timeFormatOptions;\n  const hour12 = hourCycle === 'h11' || hourCycle === 'h12';\n\n  // Determine the regex based on format\n  const regex = hour12\n    ? showSeconds\n      ? REGEX_SHOW_SECONDS_HOUR_12\n      : REGEX_HIDE_SECONDS_HOUR_12\n    : showSeconds\n    ? REGEX_SHOW_SECONDS_HOUR_24\n    : REGEX_HIDE_SECONDS_HOUR_24;\n\n  if (!regex.test(time)) {\n    return { date: null, errorType: 'invalid-input' };\n  }\n\n  const timeParts = /^(\\d\\d?):(\\d\\d):?(\\d\\d)? ?([ap]m)?/i.exec(time);\n  if (!timeParts) {\n    return { date: null, errorType: 'invalid-input' };\n  }\n\n  const [, selectedHours, minutes, seconds, amPm] = timeParts;\n  let hours = selectedHours;\n\n  // Adjust for 12-hour time format if needed\n  if (hour12 && amPm) {\n    if (amPm.toLowerCase() === 'pm' && +hours !== 12) {\n      hours = (+hours + 12).toString();\n    } else if (amPm.toLowerCase() === 'am' && +hours === 12) {\n      hours = '0';\n    }\n  }\n\n  const adjustedDate = new Date(dateStartAnchor);\n  adjustedDate.setHours(+hours, +minutes, seconds ? +seconds : 0);\n\n  // Adjust to the next day if the selected time is before the anchor time\n  if (adjustedDate < dateStartAnchor) {\n    adjustedDate.setDate(adjustedDate.getDate() + 1);\n  }\n\n  if (adjustedDate >= dateEndAnchor) {\n    return { date: adjustedDate, errorType: 'out-of-bounds' };\n  }\n\n  return { date: adjustedDate };\n}\n"],"names":["isValidDate","date","isNaN","getTime","dateToKey","toISOString","keyToDate","key","Date","formatDateToTimeString","hourCycle","showSeconds","toLocaleTimeString","undefined","hour","minute","second","getDateStartAnchor","dateAnchor","startHour","startDate","setHours","getDateEndAnchor","endHour","endDate","setDate","getDate","getTimesBetween","dateStartAnchor","dateEndAnchor","increment","console","error","result","push","setMinutes","getMinutes","REGEX_SHOW_SECONDS_HOUR_12","REGEX_HIDE_SECONDS_HOUR_12","REGEX_SHOW_SECONDS_HOUR_24","REGEX_HIDE_SECONDS_HOUR_24","getDateFromTimeString","time","timeFormatOptions","errorType","hour12","regex","test","timeParts","exec","selectedHours","minutes","seconds","amPm","hours","toLowerCase","toString","adjustedDate"],"mappings":"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"}

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":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,eAAe,EACfC,cAAc,EACdC,oBAAoB,EACpBC,gBAAgB,EAChBC,KAAK,EACLC,aAAa,QACR,4BAA4B;AACnC,SAASC,KAAK,QAAQ,0BAA0B;AAEhD,SAAwBC,oBAAoB,EAAEC,MAAM,QAAQ,2BAA2B;AACvF,SAASC,4BAA4BC,eAAe,QAAQ,wBAAwB;AACpF,SACEC,SAAS,EACTC,SAAS,EACTC,0BAA0BC,6BAA6B,EACvDC,kBAAkB,EAClBC,gBAAgB,EAChBC,eAAe,EACfC,qBAAqB,QAChB,aAAa;AAEpB;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;QA4FpBC;IA3FzC,MAAM,EACJC,YAAYC,iBAAiB,EAC7BC,qBAAqBC,0BAA0B,EAC/CC,UAAU,EAAE,EACZd,yBAAyBC,6BAA6B,EACtDc,SAAS,EACTC,YAAY,EAAE,EACdC,YAAY,EACZC,cAAcC,mBAAmB,EACjCC,cAAc,KAAK,EACnBC,YAAY,CAAC,EACbC,uBAAuBC,4BAA4B,EACnD,GAAGC,MACJ,GAAGjB;IACJ,MAAM,EAAEkB,WAAW,KAAK,EAAE,GAAGD;QAG3Bb;IADF,MAAM,EAAEe,eAAe,EAAEC,aAAa,EAAE,GAAGC,oBACzCjB,CAAAA,OAAAA,8BAAAA,+BAAAA,oBAAqBQ,iCAArBR,kBAAAA,OAA4CE,4BAC5CQ,WACAP;IAGF,MAAMe,UAA8B3C,MAAM4C,OAAO,CAC/C,IACE1B,gBAAgBsB,iBAAiBC,eAAeX,WAAWe,GAAG,CAACC,CAAAA,OAAS,CAAA;gBACtEC,MAAMD;gBACNE,KAAKpC,UAAUkC;gBACfG,MAAMnC,uBAAuBgC,MAAM;oBAAEZ;oBAAaL;gBAAU;YAC9D,CAAA,IACF;QAACY;QAAeD;QAAiB1B;QAAwBe;QAAWC;QAAWI;KAAY;IAG7F,MAAM,CAACF,cAAckB,gBAAgB,GAAG/C,qBAAkC;QACxEgD,OAAOlB;QACPmB,cAAczB;QACd0B,cAAc;IAChB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGvD,MAAMwD,QAAQ,CAAqBC;IAE7E,MAAMC,aAA8CtD,iBAAiB,CAACuD,GAAGC;QACvEV,gBAAgBU,KAAK5B,YAAY;QACjCuB,iBAAiBK,KAAKC,gBAAgB;QACtC9B,yBAAAA,mCAAAA,aAAe4B,GAAGC;IACpB;IAEA,MAAME,kBAAkB9D,MAAM4C,OAAO,CAAC;QACpC,MAAMmB,kBAAkBnD,UAAUoB;QAClC,MAAMgC,iBAAiBrB,QAAQsB,IAAI,CAAClB,CAAAA,OAAQA,KAAKC,GAAG,KAAKe;QACzD,OAAOC,iBAAiB;YAACA,eAAehB,GAAG;SAAC,GAAG,EAAE;IACnD,GAAG;QAACL;QAASX;KAAa;IAE1B,MAAMkC,eAAelE,MAAMmE,MAAM,CAAkB;IACnD,MAAMC,qBAAsDhE,iBAAiB,CAACuD,GAAGC;QAC/E,IACErB,YACAqB,KAAKS,WAAW,KAAKZ,aACrB,CAAEnB,CAAAA,KAAKgC,SAAS,IAAIX,EAAEY,IAAI,KAAK,WAAWZ,EAAEa,aAAa,KAAKN,aAAaO,OAAO,AAAD,GACjF;YACA,qHAAqH;YACrH;QACF;YAE0Bb;QAD1B,MAAMc,oBAAuC;YAC3C1C,cAAcnB,UAAU+C,CAAAA,oBAAAA,KAAKS,WAAW,cAAhBT,+BAAAA,oBAAoB;YAC5CC,kBAAkBD,KAAKe,UAAU;YACjCC,WAAWnB;QACb;QACAC,WAAWC,GAAGe;IAChB;IAEA,MAAMnD,YAAYf,qBAChB;QACEqE,cAAc;QACd,GAAGvC,IAAI;QACPwB;QACAgB,gBAAgBV;QAChBW,UAAUpC,QAAQE,GAAG,CAACE,CAAAA,qBACpB,oBAACtC;gBAAOuC,KAAKD,KAAKC,GAAG;gBAAEgC,OAAOjC,KAAKC,GAAG;eACnCD,KAAKE,IAAI;IAGhB,GACA3B;IAGF,MAAM2D,+BAA+BjF,MAAMkF,WAAW,CACpD,CAACpC,OACC3B,sBAAsB2B,MAAMN,iBAAiBC,eAAe;YAAEZ;YAAWK;QAAY,IACvF;QAACO;QAAeD;QAAiBX;QAAWK;KAAY;IAG1D,MAAMiD,qBAAqB7E,eAAciB,uBAAAA,UAAU6D,SAAS,cAAnB7D,2CAAAA,qBAAqBD,GAAG,EAAE4C;IACnE,MAAMf,QAAyB;QAC7B,GAAG5B,SAAS;QACZ6D,WAAW7D,UAAU6D,SAAS,GAC1B;YACE,GAAG7D,UAAU6D,SAAS;YACtB9D,KAAK6D;QACP,IACA1B;QACJlB;QACAH,uBAAuBC,yCAAAA,0CAAAA,+BAAgC4C;QACvD3B;IACF;IAEA+B,2BAA2BlC;IAC3BmC,uBAAuBnC,OAAOO;IAE9B,OAAOP;AACT,EAAE;AAEF;;;CAGC,GACD,MAAMT,sBAAsB,CAAC6C,cAAgCpD,WAAiBP;IAC5E,MAAM,CAAC4D,mBAAmB,GAAGxF,MAAMwD,QAAQ,CAAC,IAAM,IAAIiC;IAEtD,MAAMC,kBAAkB9E,UAAU2E,yBAAAA,0BAAAA,eAAgB;IAElD,OAAOvF,MAAM4C,OAAO,CAAC;QACnB,MAAMpB,aAAa+D,yBAAAA,0BAAAA,eAAgBC;QAEnC,MAAMhD,kBAAkBxB,mBAAmBQ,YAAYW;QACvD,MAAMM,gBAAgBxB,iBAAiBO,YAAYW,WAAWP;QAE9D,OAAO;YAAEY;YAAiBC;QAAc;IACxC,gNAAgN;IAChN,uDAAuD;IACzD,GAAG;QAACb;QAAS4D;QAAoBE;QAAiBvD;KAAU;AAC9D;AAEA;;;;;CAKC,GACD,MAAMmD,yBAAyB,CAACnC,OAAwBwC;IACtD,MAAM,EAAEC,aAAa,EAAErD,QAAQ,EAAEH,qBAAqB,EAAEkB,aAAa,EAAE0B,KAAK,EAAEa,0BAA0B,EAAE,GAAG1C;IAC7G,MAAM2C,kBAAkB9F,MAAMkF,WAAW,CAAC;QACxC,MAAMa,iBAAiBF,2BAA2BG,MAAM;QACxD,OAAOD,iBAAiBH,cAAcG,kBAAkB;IAC1D,GAAG;QAACF;QAA4BD;KAAc;IAE9C,yIAAyI;IACzI,gGAAgG;IAChG,wIAAwI;IACxI5F,MAAMiG,SAAS,CAAC;QACd,IAAI1D,YAAYyC,OAAO;YACrB,MAAMkB,eAAeJ;YACrB,IAAI,CAACI,cAAc;gBACjB;YACF;YAEA,MAAMC,2BAA2BD,aAAajD,IAAI,CAACmD,WAAW,GAAGC,OAAO,CAACrB,MAAMoB,WAAW,QAAQ;YAClG,IAAI,CAACD,0BAA0B;gBAC7BN,2BAA2BS,IAAI;YACjC;QACF;IACF,GAAG;QAAC/D;QAAUyC;QAAOa;QAA4BC;KAAgB;IAEjE,MAAMS,sBAAsBnG,iBAC1B,CAACuD;QACC,IAAI,CAACpB,UAAU;YACb;QACF;QAEA,MAAM,EAAEQ,MAAMf,YAAY,EAAE4C,SAAS,EAAE,GAAGxC,sBAAsB4C;QAEhE,6DAA6D;QAC7D,IAAI1B,kBAAkB0B,OAAO;YAC3BW,qBAAAA,+BAAAA,SAAWhC,GAAG;gBAAE3B;gBAAc6B,kBAAkBmB;gBAAOJ;YAAU;QACnE;IACF;IAGF,MAAM4B,gBAA4CpG,iBAAiBuD,CAAAA;QACjE,MAAMuC,eAAeJ;QACrB,IAAI,CAACI,gBAAgBvC,EAAEX,GAAG,KAAKzC,OAAO;YACpCgG,oBAAoB5C;QACtB;IACF;IACAR,MAAMsD,IAAI,CAACC,SAAS,GAAGxG,eAAesG,eAAerD,MAAMsD,IAAI,CAACC,SAAS;IAEzE,MAAMC,UAAU3G,MAAMmE,MAAM,CAAiB;IAC7ChB,MAAMsD,IAAI,CAACnF,GAAG,GAAGhB,cAAc6C,MAAMsD,IAAI,CAACnF,GAAG,EAAEqF;IAE/C,IAAIxD,MAAMyD,OAAO,EAAE;QACjBzD,MAAMyD,OAAO,CAACC,QAAQ,GAAG,CAAC,GAAG,qDAAqD;IACpF;IAEA,IAAI1D,MAAM2D,UAAU,EAAE;QACpB3D,MAAM2D,UAAU,CAACD,QAAQ,GAAG,CAAC,GAAG,qDAAqD;IACvF;IAEA,MAAME,kBAAkB3G,iBAAiB,CAACuD;QACxC,MAAMqD,YAAYrD,EAAEsD,aAAa,GAAG,CAAChH,gBAAgB0G,QAAQlC,OAAO,EAAEd,EAAEsD,aAAa,IAAI;QACzF,IAAID,WAAW;YACbT,oBAAoB5C;QACtB;IACF;IACAR,MAAM+D,KAAK,CAACC,MAAM,GAAGjH,eAAe6G,iBAAiB5D,MAAM+D,KAAK,CAACC,MAAM;AACzE;AAEA;;CAEC,GACD,MAAM9B,6BAA6B,CAAClC;QAKLA;IAJ7B,MAAMiE,eAAezG;IACrB,MAAM0G,mBAAmBhH,MAAM;IAC/B,MAAMiH,2BAA2B;IAEjC,IAAIF,CAAAA,yBAAAA,mCAAAA,aAAcG,OAAO,KAAIpE,EAAAA,oBAAAA,MAAM2D,UAAU,cAAhB3D,wCAAAA,iBAAkB,CAAC,aAAa,MAAKmE,0BAA0B;YACxEnE;QAAlB,MAAMqE,YAAYrE,CAAAA,uBAAAA,MAAM2D,UAAU,CAACW,EAAE,cAAnBtE,kCAAAA,uBAAuBkE;QACzClE,MAAM2D,UAAU,CAAC,kBAAkB,GAAG,GAAGU,UAAU,CAAC,EAAEJ,aAAaG,OAAO,EAAE;IAC9E;AACF"}

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/timeMath.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TimePicker/timeMath.ts"],"sourcesContent":["import type { TimeFormatOptions, TimeStringValidationResult } from './TimePicker.types';\n\nfunction isValidDate(date: Date): boolean {\n  return !isNaN(date.getTime());\n}\n\n/**\n * Converts a Date object to a string key.\n */\nexport function dateToKey(date: Date | null): string {\n  if (!date) {\n    return '';\n  }\n  if (!isValidDate(date)) {\n    return 'invalid';\n  }\n  return date.toISOString();\n}\n\n/**\n * Converts a string key back to a Date object.\n * Returns undefined for keys that don't represent valid dates.\n */\nexport function keyToDate(key: string): Date | null {\n  if (key === '' || key === 'invalid') {\n    return null;\n  }\n  const date = new Date(key);\n  return isValidDate(date) ? date : null;\n}\n\n/**\n * Formats a Date object into a time string based on provided options.\n *\n * @param date - The Date object to be formatted.\n * @param options - Formatting options. It has two properties:\n *      1. hourCycle (default: undefined): Determines if the time format should be 12-hour or 24-hour.\n *      2. showSeconds (default: false): Determines if the seconds should be included in the formatted string.\n * @returns Formatted time string based on the given options.\n *\n * @example\n * const date = new Date(2023, 9, 6, 23, 45, 12);\n * formatDateToTimeString(date);                         // Returns \"23:45\" in CET\n * formatDateToTimeString(date, \\{ showSeconds: true \\});  // Returns \"23:45:12\" in CET\n * formatDateToTimeString(date, \\{ hourCycle: 'h12', showSeconds: true \\}); // Returns \"11:45:12 PM\" in CET\n */\nexport function formatDateToTimeString(date: Date, { hourCycle, showSeconds }: TimeFormatOptions = {}): string {\n  return date.toLocaleTimeString(undefined, {\n    hour: 'numeric',\n    hourCycle,\n    minute: '2-digit',\n    second: showSeconds ? '2-digit' : undefined,\n  });\n}\n\n/**\n * Get the start date anchor based on the provided parameters.\n * @example\n * const date = new Date(2023, 9, 6); // October 6, 2023\n * getStartAnchorDate(date, 5);       // Returns a date for October 6, 2023, 05:00:00\n */\nexport function getDateStartAnchor(dateAnchor: Date, startHour: number): Date {\n  const startDate = new Date(dateAnchor);\n  startDate.setHours(startHour, 0, 0, 0);\n  return startDate;\n}\n\n/**\n * Get the end date anchor based on the provided parameters.\n * @example\n * const date = new Date(2023, 9, 6); // October 6, 2023\n * getEndAnchorDate(date, 5, 10);     // Returns a date for October 6, 2023, 10:00:00\n * getEndAnchorDate(date, 10, 5);     // Returns a date for October 7, 2023, 05:00:00 (next day due to hour conditions)\n */\nexport function getDateEndAnchor(dateAnchor: Date, startHour: number, endHour: number): Date {\n  const endDate = new Date(dateAnchor);\n  if (startHour > endHour || endHour === 24) {\n    endDate.setDate(endDate.getDate() + 1);\n  }\n  endDate.setHours(endHour === 24 ? 0 : endHour, 0, 0, 0);\n  return endDate;\n}\n\n/**\n * Generates an array of Date objects between two given Date anchors.\n *\n * @param dateStartAnchor - The starting Date anchor.\n * @param dateEndAnchor - The ending Date anchor.\n * @param increment - The minute increment between each Date in the resulting array.\n * @returns - An array of Date objects.\n *\n * @example\n * const start = new Date(2023, 0, 1, 10, 0); // Jan 1, 2023 10:00:00 AM\n * const end = new Date(2023, 0, 1, 11, 0);   // Jan 1, 2023 11:00:00 AM\n * getTimesBetween(start, end, 15);      // Returns array with Dates [10:00, 10:15, 10:30, 10:45]\n */\nexport function getTimesBetween(dateStartAnchor: Date, dateEndAnchor: Date, increment: number) {\n  if (increment <= 0) {\n    // eslint-disable-next-line no-console\n    console.error('Increment value should be a positive number.');\n    return [];\n  }\n\n  const result: Date[] = [];\n\n  const startDate = new Date(dateStartAnchor);\n  while (startDate < dateEndAnchor) {\n    result.push(new Date(startDate));\n    startDate.setMinutes(startDate.getMinutes() + increment);\n  }\n\n  return result;\n}\n\nconst REGEX_SHOW_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9])\\s([AaPp][Mm]))$/;\nconst REGEX_HIDE_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):[0-5][0-9]\\s([AaPp][Mm]))$/;\nconst REGEX_SHOW_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]:[0-5][0-9]$/;\nconst REGEX_HIDE_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]$/;\n\n/**\n * Calculates a new date from the user-selected time string based on anchor dates.\n * Returns an object containing a date if the provided time string is valid, and an optional string indicating the type of error.\n *\n * @param time - The time string to be parsed (e.g., \"2:30 PM\", \"15:45:20\").\n * @param dateStartAnchor - The start anchor date.\n * @param dateEndAnchor - The end anchor date.\n * @param timeFormatOptions - format options for the provided time string.\n * @returns An object with either a 'date' or an 'errorType'.\n *\n * @example\n * Input: time=\"2:30 PM\", dateStartAnchor=2023-10-06T12:00:00Z, dateEndAnchor=2023-10-07T12:00:00Z, options={hourCycle: 'h12', showSeconds: false}\n * Output: { date: 2023-10-06T14:30:00Z }\n *\n * Input: time=\"25:30\"\n * Output: { errorType: 'invalid-input' }\n *\n * Input: time=\"1:30 AM\", dateStartAnchor=2023-10-06T03:00:00Z, dateEndAnchor=2023-10-07T03:00:00Z, options={hourCycle: 'h12', showSeconds: false}\n * Output: { date: 2023-10-07T01:30:00Z, errorType: 'out-of-bounds' }\n */\nexport function getDateFromTimeString(\n  time: string | undefined,\n  dateStartAnchor: Date,\n  dateEndAnchor: Date,\n  timeFormatOptions: TimeFormatOptions,\n): TimeStringValidationResult {\n  if (!time) {\n    return { date: null, errorType: 'required-input' };\n  }\n\n  const { hourCycle, showSeconds } = timeFormatOptions;\n  const hour12 = hourCycle === 'h11' || hourCycle === 'h12';\n\n  // Determine the regex based on format\n  const regex = hour12\n    ? showSeconds\n      ? REGEX_SHOW_SECONDS_HOUR_12\n      : REGEX_HIDE_SECONDS_HOUR_12\n    : showSeconds\n    ? REGEX_SHOW_SECONDS_HOUR_24\n    : REGEX_HIDE_SECONDS_HOUR_24;\n\n  if (!regex.test(time)) {\n    return { date: null, errorType: 'invalid-input' };\n  }\n\n  const timeParts = /^(\\d\\d?):(\\d\\d):?(\\d\\d)? ?([ap]m)?/i.exec(time);\n  if (!timeParts) {\n    return { date: null, errorType: 'invalid-input' };\n  }\n\n  const [, selectedHours, minutes, seconds, amPm] = timeParts;\n  let hours = selectedHours;\n\n  // Adjust for 12-hour time format if needed\n  if (hour12 && amPm) {\n    if (amPm.toLowerCase() === 'pm' && +hours !== 12) {\n      hours = (+hours + 12).toString();\n    } else if (amPm.toLowerCase() === 'am' && +hours === 12) {\n      hours = '0';\n    }\n  }\n\n  const adjustedDate = new Date(dateStartAnchor);\n  adjustedDate.setHours(+hours, +minutes, seconds ? +seconds : 0);\n\n  // Adjust to the next day if the selected time is before the anchor time\n  if (adjustedDate < dateStartAnchor) {\n    adjustedDate.setDate(adjustedDate.getDate() + 1);\n  }\n\n  if (adjustedDate >= dateEndAnchor) {\n    return { date: adjustedDate, errorType: 'out-of-bounds' };\n  }\n\n  return { date: adjustedDate };\n}\n"],"names":["isValidDate","date","isNaN","getTime","dateToKey","toISOString","keyToDate","key","Date","formatDateToTimeString","hourCycle","showSeconds","toLocaleTimeString","undefined","hour","minute","second","getDateStartAnchor","dateAnchor","startHour","startDate","setHours","getDateEndAnchor","endHour","endDate","setDate","getDate","getTimesBetween","dateStartAnchor","dateEndAnchor","increment","console","error","result","push","setMinutes","getMinutes","REGEX_SHOW_SECONDS_HOUR_12","REGEX_HIDE_SECONDS_HOUR_12","REGEX_SHOW_SECONDS_HOUR_24","REGEX_HIDE_SECONDS_HOUR_24","getDateFromTimeString","time","timeFormatOptions","errorType","hour12","regex","test","timeParts","exec","selectedHours","minutes","seconds","amPm","hours","toLowerCase","toString","adjustedDate"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TimePicker/timeMath.ts"],"sourcesContent":["import type { TimeFormatOptions, TimeStringValidationResult } from './TimePicker.types';\n\nfunction isValidDate(date: Date): boolean {\n  return !isNaN(date.getTime());\n}\n\n/**\n * Converts a Date object to a string key.\n */\nexport function dateToKey(date: Date | null): string {\n  if (!date) {\n    return '';\n  }\n  if (!isValidDate(date)) {\n    return 'invalid';\n  }\n  return date.toISOString();\n}\n\n/**\n * Converts a string key back to a Date object.\n * Returns undefined for keys that don't represent valid dates.\n */\nexport function keyToDate(key: string): Date | null {\n  if (key === '' || key === 'invalid') {\n    return null;\n  }\n  const date = new Date(key);\n  return isValidDate(date) ? date : null;\n}\n\n/**\n * Formats a Date object into a time string based on provided options.\n *\n * @param date - The Date object to be formatted.\n * @param options - Formatting options. It has two properties:\n *      1. hourCycle (default: undefined): Determines if the time format should be 12-hour or 24-hour.\n *      2. showSeconds (default: false): Determines if the seconds should be included in the formatted string.\n * @returns Formatted time string based on the given options.\n *\n * @example\n * const date = new Date(2023, 9, 6, 23, 45, 12);\n * formatDateToTimeString(date);                         // Returns \"23:45\" in CET\n * formatDateToTimeString(date, \\{ showSeconds: true \\});  // Returns \"23:45:12\" in CET\n * formatDateToTimeString(date, \\{ hourCycle: 'h12', showSeconds: true \\}); // Returns \"11:45:12 PM\" in CET\n */\nexport function formatDateToTimeString(date: Date, { hourCycle, showSeconds }: TimeFormatOptions = {}): string {\n  return date.toLocaleTimeString(undefined, {\n    hour: 'numeric',\n    hourCycle,\n    minute: '2-digit',\n    second: showSeconds ? '2-digit' : undefined,\n  });\n}\n\n/**\n * Get the start date anchor based on the provided parameters.\n * @example\n * const date = new Date(2023, 9, 6); // October 6, 2023\n * getStartAnchorDate(date, 5);       // Returns a date for October 6, 2023, 05:00:00\n */\nexport function getDateStartAnchor(dateAnchor: Date, startHour: number): Date {\n  const startDate = new Date(dateAnchor);\n  startDate.setHours(startHour, 0, 0, 0);\n  return startDate;\n}\n\n/**\n * Get the end date anchor based on the provided parameters.\n * @example\n * const date = new Date(2023, 9, 6); // October 6, 2023\n * getEndAnchorDate(date, 5, 10);     // Returns a date for October 6, 2023, 10:00:00\n * getEndAnchorDate(date, 10, 5);     // Returns a date for October 7, 2023, 05:00:00 (next day due to hour conditions)\n */\nexport function getDateEndAnchor(dateAnchor: Date, startHour: number, endHour: number): Date {\n  const endDate = new Date(dateAnchor);\n  if (startHour > endHour || endHour === 24) {\n    endDate.setDate(endDate.getDate() + 1);\n  }\n  endDate.setHours(endHour === 24 ? 0 : endHour, 0, 0, 0);\n  return endDate;\n}\n\n/**\n * Generates an array of Date objects between two given Date anchors.\n *\n * @param dateStartAnchor - The starting Date anchor.\n * @param dateEndAnchor - The ending Date anchor.\n * @param increment - The minute increment between each Date in the resulting array.\n * @returns - An array of Date objects.\n *\n * @example\n * const start = new Date(2023, 0, 1, 10, 0); // Jan 1, 2023 10:00:00 AM\n * const end = new Date(2023, 0, 1, 11, 0);   // Jan 1, 2023 11:00:00 AM\n * getTimesBetween(start, end, 15);      // Returns array with Dates [10:00, 10:15, 10:30, 10:45]\n */\nexport function getTimesBetween(dateStartAnchor: Date, dateEndAnchor: Date, increment: number): Date[] {\n  if (increment <= 0) {\n    // eslint-disable-next-line no-console\n    console.error('Increment value should be a positive number.');\n    return [];\n  }\n\n  const result: Date[] = [];\n\n  const startDate = new Date(dateStartAnchor);\n  while (startDate < dateEndAnchor) {\n    result.push(new Date(startDate));\n    startDate.setMinutes(startDate.getMinutes() + increment);\n  }\n\n  return result;\n}\n\nconst REGEX_SHOW_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9])\\s([AaPp][Mm]))$/;\nconst REGEX_HIDE_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):[0-5][0-9]\\s([AaPp][Mm]))$/;\nconst REGEX_SHOW_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]:[0-5][0-9]$/;\nconst REGEX_HIDE_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]$/;\n\n/**\n * Calculates a new date from the user-selected time string based on anchor dates.\n * Returns an object containing a date if the provided time string is valid, and an optional string indicating the type of error.\n *\n * @param time - The time string to be parsed (e.g., \"2:30 PM\", \"15:45:20\").\n * @param dateStartAnchor - The start anchor date.\n * @param dateEndAnchor - The end anchor date.\n * @param timeFormatOptions - format options for the provided time string.\n * @returns An object with either a 'date' or an 'errorType'.\n *\n * @example\n * Input: time=\"2:30 PM\", dateStartAnchor=2023-10-06T12:00:00Z, dateEndAnchor=2023-10-07T12:00:00Z, options={hourCycle: 'h12', showSeconds: false}\n * Output: { date: 2023-10-06T14:30:00Z }\n *\n * Input: time=\"25:30\"\n * Output: { errorType: 'invalid-input' }\n *\n * Input: time=\"1:30 AM\", dateStartAnchor=2023-10-06T03:00:00Z, dateEndAnchor=2023-10-07T03:00:00Z, options={hourCycle: 'h12', showSeconds: false}\n * Output: { date: 2023-10-07T01:30:00Z, errorType: 'out-of-bounds' }\n */\nexport function getDateFromTimeString(\n  time: string | undefined,\n  dateStartAnchor: Date,\n  dateEndAnchor: Date,\n  timeFormatOptions: TimeFormatOptions,\n): TimeStringValidationResult {\n  if (!time) {\n    return { date: null, errorType: 'required-input' };\n  }\n\n  const { hourCycle, showSeconds } = timeFormatOptions;\n  const hour12 = hourCycle === 'h11' || hourCycle === 'h12';\n\n  // Determine the regex based on format\n  const regex = hour12\n    ? showSeconds\n      ? REGEX_SHOW_SECONDS_HOUR_12\n      : REGEX_HIDE_SECONDS_HOUR_12\n    : showSeconds\n    ? REGEX_SHOW_SECONDS_HOUR_24\n    : REGEX_HIDE_SECONDS_HOUR_24;\n\n  if (!regex.test(time)) {\n    return { date: null, errorType: 'invalid-input' };\n  }\n\n  const timeParts = /^(\\d\\d?):(\\d\\d):?(\\d\\d)? ?([ap]m)?/i.exec(time);\n  if (!timeParts) {\n    return { date: null, errorType: 'invalid-input' };\n  }\n\n  const [, selectedHours, minutes, seconds, amPm] = timeParts;\n  let hours = selectedHours;\n\n  // Adjust for 12-hour time format if needed\n  if (hour12 && amPm) {\n    if (amPm.toLowerCase() === 'pm' && +hours !== 12) {\n      hours = (+hours + 12).toString();\n    } else if (amPm.toLowerCase() === 'am' && +hours === 12) {\n      hours = '0';\n    }\n  }\n\n  const adjustedDate = new Date(dateStartAnchor);\n  adjustedDate.setHours(+hours, +minutes, seconds ? +seconds : 0);\n\n  // Adjust to the next day if the selected time is before the anchor time\n  if (adjustedDate < dateStartAnchor) {\n    adjustedDate.setDate(adjustedDate.getDate() + 1);\n  }\n\n  if (adjustedDate >= dateEndAnchor) {\n    return { date: adjustedDate, errorType: 'out-of-bounds' };\n  }\n\n  return { date: adjustedDate };\n}\n"],"names":["isValidDate","date","isNaN","getTime","dateToKey","toISOString","keyToDate","key","Date","formatDateToTimeString","hourCycle","showSeconds","toLocaleTimeString","undefined","hour","minute","second","getDateStartAnchor","dateAnchor","startHour","startDate","setHours","getDateEndAnchor","endHour","endDate","setDate","getDate","getTimesBetween","dateStartAnchor","dateEndAnchor","increment","console","error","result","push","setMinutes","getMinutes","REGEX_SHOW_SECONDS_HOUR_12","REGEX_HIDE_SECONDS_HOUR_12","REGEX_SHOW_SECONDS_HOUR_24","REGEX_HIDE_SECONDS_HOUR_24","getDateFromTimeString","time","timeFormatOptions","errorType","hour12","regex","test","timeParts","exec","selectedHours","minutes","seconds","amPm","hours","toLowerCase","toString","adjustedDate"],"mappings":";;;;;;;;;;;aASgBI;eAAAA;;IAqCAK,sBAAAA;;;IA4BAa,gBAAAA;;;yBAiEAmB;eAAAA;;sBA9EAxB;eAAAA;;IAmCAU,eAAAA;;;aAzEArB;eAAAA;;;AArBhB,SAASN,YAAYC,IAAU;IAC7B,OAAO,CAACC,MAAMD,KAAKE,OAAO;AAC5B;AAKO,mBAAmBF,IAAiB;IACzC,IAAI,CAACA,MAAM;QACT,OAAO;IACT;IACA,IAAI,CAACD,YAAYC,OAAO;QACtB,OAAO;IACT;IACA,OAAOA,KAAKI,WAAW;AACzB;AAMO,mBAAmBE,GAAW;IACnC,IAAIA,QAAQ,MAAMA,QAAQ,WAAW;QACnC,OAAO;IACT;IACA,MAAMN,OAAO,IAAIO,KAAKD;IACtB,OAAOP,YAAYC,QAAQA,OAAO;AACpC;AAiBO,gCAAgCA,IAAU,EAAE,EAAES,SAAS,EAAEC,WAAW,EAAqB,GAAG,CAAC,CAAC;IACnG,OAAOV,KAAKW,kBAAkB,CAACC,WAAW;QACxCC,MAAM;QACNJ;QACAK,QAAQ;QACRC,QAAQL,cAAc,YAAYE;IACpC;AACF;AAQO,4BAA4BK,UAAgB,EAAEC,SAAiB;IACpE,MAAMC,YAAY,IAAIZ,KAAKU;IAC3BE,UAAUC,QAAQ,CAACF,WAAW,GAAG,GAAG;IACpC,OAAOC;AACT;AASO,0BAA0BF,UAAgB,EAAEC,SAAiB,EAAEI,OAAe;IACnF,MAAMC,UAAU,IAAIhB,KAAKU;IACzB,IAAIC,YAAYI,WAAWA,YAAY,IAAI;QACzCC,QAAQC,OAAO,CAACD,QAAQE,OAAO,KAAK;IACtC;IACAF,QAAQH,QAAQ,CAACE,YAAY,KAAK,IAAIA,SAAS,GAAG,GAAG;IACrD,OAAOC;AACT;AAeO,yBAAyBI,eAAqB,EAAEC,aAAmB,EAAEC,SAAiB;IAC3F,IAAIA,aAAa,GAAG;QAClB,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;QACd,OAAO,EAAE;IACX;IAEA,MAAMC,SAAiB,EAAE;IAEzB,MAAMb,YAAY,IAAIZ,KAAKoB;IAC3B,MAAOR,YAAYS,cAAe;QAChCI,OAAOC,IAAI,CAAC,IAAI1B,KAAKY;QACrBA,UAAUe,UAAU,CAACf,UAAUgB,UAAU,KAAKN;IAChD;IAEA,OAAOG;AACT;AAEA,MAAMI,6BAA6B;AACnC,MAAMC,6BAA6B;AACnC,MAAMC,6BAA6B;AACnC,MAAMC,6BAA6B;AAsB5B,+BACLE,IAAwB,EACxBd,eAAqB,EACrBC,aAAmB,EACnBc,iBAAoC;IAEpC,IAAI,CAACD,MAAM;QACT,OAAO;YAAEzC,MAAM;YAAM2C,WAAW;QAAiB;IACnD;IAEA,MAAM,EAAElC,SAAS,EAAEC,WAAW,EAAE,GAAGgC;IACnC,MAAME,SAASnC,cAAc,SAASA,cAAc;IAEpD,sCAAsC;IACtC,MAAMoC,QAAQD,SACVlC,cACE0B,6BACAC,6BACF3B,cACA4B,6BACAC;IAEJ,IAAI,CAACM,MAAMC,IAAI,CAACL,OAAO;QACrB,OAAO;YAAEzC,MAAM;YAAM2C,WAAW;QAAgB;IAClD;IAEA,MAAMI,YAAY,sCAAsCC,IAAI,CAACP;IAC7D,IAAI,CAACM,WAAW;QACd,OAAO;YAAE/C,MAAM;YAAM2C,WAAW;QAAgB;IAClD;IAEA,MAAM,GAAGM,eAAeC,SAASC,SAASC,KAAK,GAAGL;IAClD,IAAIM,QAAQJ;IAEZ,2CAA2C;IAC3C,IAAIL,UAAUQ,MAAM;QAClB,IAAIA,KAAKE,WAAW,OAAO,QAAQ,CAACD,UAAU,IAAI;YAChDA,QAAS,CAAA,CAACA,QAAQ,EAAA,CAAC,CAAGE,QAAQ;QAChC,OAAO,IAAIH,KAAKE,WAAW,OAAO,QAAQ,CAACD,UAAU,IAAI;YACvDA,QAAQ;QACV;IACF;IAEA,MAAMG,eAAe,IAAIjD,KAAKoB;IAC9B6B,aAAapC,QAAQ,CAAC,CAACiC,OAAO,CAACH,SAASC,UAAU,CAACA,UAAU;IAE7D,wEAAwE;IACxE,IAAIK,eAAe7B,iBAAiB;QAClC6B,aAAahC,OAAO,CAACgC,aAAa/B,OAAO,KAAK;IAChD;IAEA,IAAI+B,gBAAgB5B,eAAe;QACjC,OAAO;YAAE5B,MAAMwD;YAAcb,WAAW;QAAgB;IAC1D;IAEA,OAAO;QAAE3C,MAAMwD;IAAa;AAC9B"}

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.15",
+  "version": "0.4.17",
   "description": "Fluent UI TimePicker Compat Component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,20 +28,20 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-combobox": "^9.16.5",
-    "@fluentui/react-field": "^9.4.4",
-    "@fluentui/react-jsx-runtime": "^9.1.6",
-    "@fluentui/react-shared-contexts": "^9.25.0",
+    "@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.0",
+    "@fluentui/react-utilities": "^9.25.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "@types/react": ">=16.8.0 <20.0.0",
+    "@types/react-dom": ">=16.8.0 <20.0.0",
+    "react": ">=16.8.0 <20.0.0",
+    "react-dom": ">=16.8.0 <20.0.0"
   },
   "exports": {
     ".": {