@fluentui/react-timepicker-compat 0.0.0-nightly-20240108-0406.1 → 0.0.2

package/CHANGELOG.md

@@ -1,26 +1,20 @@
 # Change Log - @fluentui/react-timepicker-compat
 
-This log was last generated on Mon, 08 Jan 2024 04:22:03 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Jan 2024 16:20:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20240108-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.0.0-nightly-20240108-0406.1)
+## [0.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.0.2)
 
-Mon, 08 Jan 2024 04:22:03 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.0.1..@fluentui/react-timepicker-compat_v0.0.0-nightly-20240108-0406.1)
+Mon, 08 Jan 2024 16:20:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.0.1..@fluentui/react-timepicker-compat_v0.0.2)
 
-### Changes
+### Patches
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240108-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb0da6edf85eee07efe99c23810996d16a81378) by beachball)
-- Bump @fluentui/react-combobox to v0.0.0-nightly-20240108-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb0da6edf85eee07efe99c23810996d16a81378) by beachball)
-- Bump @fluentui/react-field to v0.0.0-nightly-20240108-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb0da6edf85eee07efe99c23810996d16a81378) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240108-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb0da6edf85eee07efe99c23810996d16a81378) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240108-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb0da6edf85eee07efe99c23810996d16a81378) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20240108-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb0da6edf85eee07efe99c23810996d16a81378) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20240108-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb0da6edf85eee07efe99c23810996d16a81378) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20240108-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb0da6edf85eee07efe99c23810996d16a81378) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240108-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb0da6edf85eee07efe99c23810996d16a81378) by beachball)
+- Bump @fluentui/react-combobox to v9.5.38 ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by beachball)
+- Bump @fluentui/react-field to v9.1.47 ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.24 ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by beachball)
+- Bump @fluentui/react-utilities to v9.15.6 ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by beachball)
 
 ## [0.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.0.1)
 

package/dist/index.d.ts

@@ -0,0 +1,147 @@
+import type { ComboboxProps } from '@fluentui/react-combobox';
+import type { ComboboxSlots } from '@fluentui/react-combobox';
+import type { ComboboxState } from '@fluentui/react-combobox';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { SelectionEvents } from '@fluentui/react-combobox';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Formats a Date object into a time string based on provided options.
+ *
+ * @param date - The Date object to be formatted.
+ * @param options - Formatting options. It has two properties:
+ *      1. hourCycle (default: undefined): Determines if the time format should be 12-hour or 24-hour.
+ *      2. showSeconds (default: false): Determines if the seconds should be included in the formatted string.
+ * @returns Formatted time string based on the given options.
+ *
+ * @example
+ * const date = new Date(2023, 9, 6, 23, 45, 12);
+ * formatDateToTimeString(date);                         // Returns "23:45" in CET
+ * formatDateToTimeString(date, \{ showSeconds: true \});  // Returns "23:45:12" in CET
+ * formatDateToTimeString(date, \{ hourCycle: 'h12', showSeconds: true \}); // Returns "11:45:12 PM" in CET
+ */
+export declare function formatDateToTimeString(date: Date, { hourCycle, showSeconds }?: TimeFormatOptions): string;
+
+declare type Hour = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
+
+declare type TimeFormatOptions = {
+    /**
+     * A string value indicating whether the 12-hour format ("h11", "h12") or the 24-hour format ("h23", "h24") should be used.
+     * - 'h11' and 'h23' start with hour 0 and go up to 11 and 23 respectively.
+     * - 'h12' and 'h24' start with hour 1 and go up to 12 and 24 respectively.
+     * @default undefined
+     */
+    hourCycle?: 'h11' | 'h12' | 'h23' | 'h24' | undefined;
+    /**
+     * If true, show seconds in the dropdown options and consider seconds for default validation purposes.
+     */
+    showSeconds?: boolean;
+};
+
+/**
+ * TimePicker Compat component
+ */
+export declare const TimePicker: ForwardRefComponent<TimePickerProps>;
+
+export declare const timePickerClassNames: SlotClassNames<TimePickerSlots>;
+
+/**
+ * Error types returned by the `onValidationResult` callback.
+ */
+export declare type TimePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input';
+
+/**
+ * TimePicker Props
+ */
+export declare type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & Pick<ComboboxProps, 'appearance' | 'defaultOpen' | 'defaultValue' | 'inlinePopup' | 'onOpenChange' | 'open' | 'placeholder' | 'positioning' | 'size' | 'value' | 'mountNode' | 'freeform'> & TimeFormatOptions & {
+    /**
+     * Start hour (inclusive) for the time range, 0-24.
+     */
+    startHour?: Hour;
+    /**
+     * End hour (exclusive) for the time range, 0-24.
+     */
+    endHour?: Hour;
+    /**
+     * Time increment, in minutes, of the options in the dropdown.
+     */
+    increment?: number;
+    /**
+     * The date in which all dropdown options are based off of.
+     */
+    dateAnchor?: Date;
+    /**
+     * Currently selected time in the TimePicker.
+     */
+    selectedTime?: Date | null;
+    /**
+     * Default selected time in the TimePicker, for uncontrolled scenarios.
+     */
+    defaultSelectedTime?: Date;
+    /**
+     * Callback for when a time selection is made.
+     */
+    onTimeChange?: (event: TimeSelectionEvents, data: TimeSelectionData) => void;
+    /**
+     * Customizes the formatting of date strings displayed in dropdown options.
+     */
+    formatDateToTimeString?: (date: Date) => string;
+    /**
+     * In the freeform TimePicker, customizes the parsing from the input time string into a Date and provides custom validation.
+     */
+    parseTimeStringToDate?: (time: string | undefined) => TimeStringValidationResult;
+};
+
+export declare type TimePickerSlots = ComboboxSlots;
+
+/**
+ * State used in rendering TimePicker
+ */
+export declare type TimePickerState = ComboboxState & Required<Pick<TimePickerProps, 'freeform' | 'parseTimeStringToDate'>> & {
+    /**
+     * Submitted text from the input field. It is used to determine if the input value has changed when user submit a new value on Enter or blur from input.
+     */
+    submittedText: string | undefined;
+};
+
+export declare type TimeSelectionData = {
+    /**
+     * The Date object associated with the selected option. For freeform TimePicker it can also be the Date object parsed from the user input.
+     */
+    selectedTime: Date | null;
+    /**
+     * The display text for the selected option. For freeform TimePicker it can also be the value in user input.
+     */
+    selectedTimeText: string | undefined;
+    /**
+     * The error type for the selected option.
+     */
+    errorType: TimePickerErrorType | undefined;
+};
+
+export declare type TimeSelectionEvents = SelectionEvents | React_2.FocusEvent<HTMLElement>;
+
+declare type TimeStringValidationResult = {
+    date: Date | null;
+    errorType?: TimePickerErrorType;
+};
+
+/**
+ * Create the state required to render TimePicker.
+ *
+ * The returned state can be modified with hooks such as useTimePickerStyles_unstable,
+ * before being passed to renderTimePicker_unstable.
+ *
+ * @param props - props from this instance of TimePicker
+ * @param ref - reference to root HTMLElement of TimePicker
+ */
+export declare const useTimePicker_unstable: (props: TimePickerProps, ref: React_2.Ref<HTMLInputElement>) => TimePickerState;
+
+/**
+ * Apply styling to the TimePicker slots based on the state
+ */
+export declare const useTimePickerStyles_unstable: (state: TimePickerState) => TimePickerState;
+
+export { }

package/lib/TimePicker.js

@@ -0,0 +1 @@
+export * from './components/TimePicker/index';

package/lib/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TimePicker.ts"],"sourcesContent":["export * from './components/TimePicker/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}

package/lib/components/TimePicker/TimePicker.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useTimePicker_unstable } from './useTimePicker';
+import { useTimePickerStyles_unstable } from './useTimePickerStyles.styles';
+import { renderCombobox_unstable, useComboboxContextValues } from '@fluentui/react-combobox';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * TimePicker Compat component
+ */ export const TimePicker = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTimePicker_unstable(props, ref);
+    const contextValues = useComboboxContextValues(state);
+    useTimePickerStyles_unstable(state);
+    useCustomStyleHook_unstable('useTimePickerCompatStyles_unstable')(state);
+    return renderCombobox_unstable(state, contextValues);
+});
+TimePicker.displayName = 'TimePicker';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

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

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

package/lib/components/TimePicker/index.js

@@ -0,0 +1,5 @@
+export * from './TimePicker';
+export * from './TimePicker.types';
+export * from './useTimePicker';
+export * from './useTimePickerStyles.styles';
+export { formatDateToTimeString } from './timeMath';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TimePicker';\nexport * from './TimePicker.types';\nexport * from './useTimePicker';\nexport * from './useTimePickerStyles.styles';\nexport { formatDateToTimeString } from './timeMath';\n"],"names":["formatDateToTimeString"],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,+BAA+B;AAC7C,SAASA,sBAAsB,QAAQ,aAAa"}

package/lib/components/TimePicker/timeMath.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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":"AAEA,SAASA,YAAYC,IAAU;IAC7B,OAAO,CAACC,MAAMD,KAAKE,OAAO;AAC5B;AAEA;;CAEC,GACD,OAAO,SAASC,UAAUH,IAAiB;IACzC,IAAI,CAACA,MAAM;QACT,OAAO;IACT;IACA,IAAI,CAACD,YAAYC,OAAO;QACtB,OAAO;IACT;IACA,OAAOA,KAAKI,WAAW;AACzB;AAEA;;;CAGC,GACD,OAAO,SAASC,UAAUC,GAAW;IACnC,IAAIA,QAAQ,MAAMA,QAAQ,WAAW;QACnC,OAAO;IACT;IACA,MAAMN,OAAO,IAAIO,KAAKD;IACtB,OAAOP,YAAYC,QAAQA,OAAO;AACpC;AAEA;;;;;;;;;;;;;;CAcC,GACD,OAAO,SAASQ,uBAAuBR,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;AAEA;;;;;CAKC,GACD,OAAO,SAASI,mBAAmBC,UAAgB,EAAEC,SAAiB;IACpE,MAAMC,YAAY,IAAIZ,KAAKU;IAC3BE,UAAUC,QAAQ,CAACF,WAAW,GAAG,GAAG;IACpC,OAAOC;AACT;AAEA;;;;;;CAMC,GACD,OAAO,SAASE,iBAAiBJ,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;AAEA;;;;;;;;;;;;CAYC,GACD,OAAO,SAASG,gBAAgBC,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;AAEnC;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,sBACdC,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,QAAQ,AAAC,CAAA,CAACA,QAAQ,EAAC,EAAGE,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/components/TimePicker/useTimePicker.js

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