@fluentui/react-timepicker-compat 0.4.37 → 0.4.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/CHANGELOG.md +27 -2
  2. package/dist/index.d.cts +147 -0
  3. package/lib/TimePicker.js +1 -1
  4. package/lib/TimePicker.js.map +1 -1
  5. package/lib/components/TimePicker/TimePicker.js +5 -5
  6. package/lib/components/TimePicker/TimePicker.js.map +1 -1
  7. package/lib/components/TimePicker/index.js +4 -4
  8. package/lib/components/TimePicker/index.js.map +1 -1
  9. package/lib/components/TimePicker/useTimePicker.js +6 -6
  10. package/lib/components/TimePicker/useTimePicker.js.map +1 -1
  11. package/lib/components/TimePicker/useTimePickerStyles.styles.js +2 -2
  12. package/lib/components/TimePicker/useTimePickerStyles.styles.js.map +1 -1
  13. package/lib/components/TimePicker/useTimePickerStyles.styles.raw.js +2 -2
  14. package/lib/index.js +1 -1
  15. package/lib/index.js.map +1 -1
  16. package/lib-commonjs/{TimePicker.js → TimePicker.cjs} +1 -1
  17. package/lib-commonjs/{TimePicker.js.map → TimePicker.cjs.map} +1 -1
  18. package/lib-commonjs/components/TimePicker/{TimePicker.js → TimePicker.cjs} +2 -2
  19. package/lib-commonjs/components/TimePicker/{TimePicker.js.map → TimePicker.cjs.map} +1 -1
  20. package/lib-commonjs/components/TimePicker/{index.js → index.cjs} +4 -4
  21. package/lib-commonjs/components/TimePicker/{index.js.map → index.cjs.map} +1 -1
  22. package/lib-commonjs/components/TimePicker/{useTimePicker.js → useTimePicker.cjs} +1 -1
  23. package/lib-commonjs/components/TimePicker/{useTimePicker.js.map → useTimePicker.cjs.map} +1 -1
  24. package/lib-commonjs/components/TimePicker/useTimePickerStyles.styles.cjs.map +1 -0
  25. package/lib-commonjs/{index.js → index.cjs} +1 -1
  26. package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
  27. package/package.json +24 -18
  28. package/lib-commonjs/components/TimePicker/useTimePickerStyles.styles.js.map +0 -1
  29. /package/lib-commonjs/components/TimePicker/{TimePicker.types.js → TimePicker.types.cjs} +0 -0
  30. /package/lib-commonjs/components/TimePicker/{TimePicker.types.js.map → TimePicker.types.cjs.map} +0 -0
  31. /package/lib-commonjs/components/TimePicker/{timeMath.js → timeMath.cjs} +0 -0
  32. /package/lib-commonjs/components/TimePicker/{timeMath.js.map → timeMath.cjs.map} +0 -0
  33. /package/lib-commonjs/components/TimePicker/{useTimePickerStyles.styles.js → useTimePickerStyles.styles.cjs} +0 -0
  34. /package/lib-commonjs/components/TimePicker/{useTimePickerStyles.styles.raw.js → useTimePickerStyles.styles.raw.cjs} +0 -0
  35. /package/lib-commonjs/components/TimePicker/{useTimePickerStyles.styles.raw.js.map → useTimePickerStyles.styles.raw.cjs.map} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,12 +1,37 @@
1
1
  # Change Log - @fluentui/react-timepicker-compat
2
2
 
3
- This log was last generated on Tue, 04 Aug 2026 10:10:13 GMT and should not be manually modified.
3
+ <!-- This log was last generated on Mon, 24 Aug 2026 08:15:11 GMT and should not be manually modified. -->
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.4.39](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.4.39)
8
+
9
+ Mon, 24 Aug 2026 08:15:11 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.4.38..@fluentui/react-timepicker-compat_v0.4.39)
11
+
12
+ ### Patches
13
+
14
+ - fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor ([PR #36551](https://github.com/microsoft/fluentui/pull/36551) by martinhochel@microsoft.com)
15
+
16
+ ## [0.4.38](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.4.38)
17
+
18
+ Tue, 11 Aug 2026 17:20:14 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.4.37..@fluentui/react-timepicker-compat_v0.4.38)
20
+
21
+ ### Patches
22
+
23
+ - Ship ESM-first (type:module): valid ESM under lib/, CommonJS under lib-commonjs/*.cjs, and drop the `node` export condition - bare-Node `import` resolves ESM, `require` resolves CJS; node-targeted bundlers tree-shake. ([PR #36327](https://github.com/microsoft/fluentui/pull/36327) by martinhochel@microsoft.com)
24
+ - Bump @fluentui/keyboard-keys to v9.0.9 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
25
+ - Bump @fluentui/react-combobox to v9.17.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
26
+ - Bump @fluentui/react-field to v9.5.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
27
+ - Bump @fluentui/react-jsx-runtime to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
28
+ - Bump @fluentui/react-shared-contexts to v9.26.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
29
+ - Bump @fluentui/react-theme to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
30
+ - Bump @fluentui/react-utilities to v9.26.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
31
+
7
32
  ## [0.4.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.4.37)
8
33
 
9
- Tue, 04 Aug 2026 10:10:13 GMT
34
+ Tue, 04 Aug 2026 10:12:26 GMT
10
35
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-timepicker-compat_v0.4.36..@fluentui/react-timepicker-compat_v0.4.37)
11
36
 
12
37
  ### Patches
@@ -0,0 +1,147 @@
1
+ import type { ComboboxProps } from '@fluentui/react-combobox';
2
+ import type { ComboboxSlots } from '@fluentui/react-combobox';
3
+ import type { ComboboxState } from '@fluentui/react-combobox';
4
+ import type { ComponentProps } from '@fluentui/react-utilities';
5
+ import type { ForwardRefComponent } from '@fluentui/react-utilities';
6
+ import * as React_2 from 'react';
7
+ import type { SelectionEvents } from '@fluentui/react-combobox';
8
+ import type { SlotClassNames } from '@fluentui/react-utilities';
9
+
10
+ /**
11
+ * Formats a Date object into a time string based on provided options.
12
+ *
13
+ * @param date - The Date object to be formatted.
14
+ * @param options - Formatting options. It has two properties:
15
+ * 1. hourCycle (default: undefined): Determines if the time format should be 12-hour or 24-hour.
16
+ * 2. showSeconds (default: false): Determines if the seconds should be included in the formatted string.
17
+ * @returns Formatted time string based on the given options.
18
+ *
19
+ * @example
20
+ * const date = new Date(2023, 9, 6, 23, 45, 12);
21
+ * formatDateToTimeString(date); // Returns "23:45" in CET
22
+ * formatDateToTimeString(date, \{ showSeconds: true \}); // Returns "23:45:12" in CET
23
+ * formatDateToTimeString(date, \{ hourCycle: 'h12', showSeconds: true \}); // Returns "11:45:12 PM" in CET
24
+ */
25
+ export declare function formatDateToTimeString(date: Date, { hourCycle, showSeconds }?: TimeFormatOptions): string;
26
+
27
+ 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;
28
+
29
+ declare type TimeFormatOptions = {
30
+ /**
31
+ * A string value indicating whether the 12-hour format ("h11", "h12") or the 24-hour format ("h23", "h24") should be used.
32
+ * - 'h11' and 'h23' start with hour 0 and go up to 11 and 23 respectively.
33
+ * - 'h12' and 'h24' start with hour 1 and go up to 12 and 24 respectively.
34
+ * @default undefined
35
+ */
36
+ hourCycle?: 'h11' | 'h12' | 'h23' | 'h24' | undefined;
37
+ /**
38
+ * If true, show seconds in the dropdown options and consider seconds for default validation purposes.
39
+ */
40
+ showSeconds?: boolean;
41
+ };
42
+
43
+ /**
44
+ * TimePicker Compat component
45
+ */
46
+ export declare const TimePicker: ForwardRefComponent<TimePickerProps>;
47
+
48
+ export declare const timePickerClassNames: SlotClassNames<TimePickerSlots>;
49
+
50
+ /**
51
+ * Error types returned by the `onValidationResult` callback.
52
+ */
53
+ export declare type TimePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input';
54
+
55
+ /**
56
+ * TimePicker Props
57
+ */
58
+ export declare type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & Pick<ComboboxProps, 'appearance' | 'clearable' | 'defaultOpen' | 'defaultValue' | 'inlinePopup' | 'onOpenChange' | 'open' | 'placeholder' | 'positioning' | 'size' | 'value' | 'mountNode' | 'freeform'> & TimeFormatOptions & {
59
+ /**
60
+ * Start hour (inclusive) for the time range, 0-24.
61
+ */
62
+ startHour?: Hour;
63
+ /**
64
+ * End hour (exclusive) for the time range, 0-24.
65
+ */
66
+ endHour?: Hour;
67
+ /**
68
+ * Time increment, in minutes, of the options in the dropdown.
69
+ */
70
+ increment?: number;
71
+ /**
72
+ * The date in which all dropdown options are based off of.
73
+ */
74
+ dateAnchor?: Date;
75
+ /**
76
+ * Currently selected time in the TimePicker.
77
+ */
78
+ selectedTime?: Date | null;
79
+ /**
80
+ * Default selected time in the TimePicker, for uncontrolled scenarios.
81
+ */
82
+ defaultSelectedTime?: Date;
83
+ /**
84
+ * Callback for when a time selection is made.
85
+ */
86
+ onTimeChange?: (event: TimeSelectionEvents, data: TimeSelectionData) => void;
87
+ /**
88
+ * Customizes the formatting of date strings displayed in dropdown options.
89
+ */
90
+ formatDateToTimeString?: (date: Date) => string;
91
+ /**
92
+ * In the freeform TimePicker, customizes the parsing from the input time string into a Date and provides custom validation.
93
+ */
94
+ parseTimeStringToDate?: (time: string | undefined) => TimeStringValidationResult;
95
+ };
96
+
97
+ export declare type TimePickerSlots = ComboboxSlots;
98
+
99
+ /**
100
+ * State used in rendering TimePicker
101
+ */
102
+ export declare type TimePickerState = ComboboxState & Required<Pick<TimePickerProps, 'freeform' | 'parseTimeStringToDate'>> & {
103
+ /**
104
+ * 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.
105
+ */
106
+ submittedText: string | undefined;
107
+ };
108
+
109
+ export declare type TimeSelectionData = {
110
+ /**
111
+ * The Date object associated with the selected option. For freeform TimePicker it can also be the Date object parsed from the user input.
112
+ */
113
+ selectedTime: Date | null;
114
+ /**
115
+ * The display text for the selected option. For freeform TimePicker it can also be the value in user input.
116
+ */
117
+ selectedTimeText: string | undefined;
118
+ /**
119
+ * The error type for the selected option.
120
+ */
121
+ errorType: TimePickerErrorType | undefined;
122
+ };
123
+
124
+ export declare type TimeSelectionEvents = SelectionEvents | React_2.FocusEvent<HTMLElement>;
125
+
126
+ declare type TimeStringValidationResult = {
127
+ date: Date | null;
128
+ errorType?: TimePickerErrorType;
129
+ };
130
+
131
+ /**
132
+ * Create the state required to render TimePicker.
133
+ *
134
+ * The returned state can be modified with hooks such as useTimePickerStyles_unstable,
135
+ * before being passed to renderTimePicker_unstable.
136
+ *
137
+ * @param props - props from this instance of TimePicker
138
+ * @param ref - reference to root HTMLElement of TimePicker
139
+ */
140
+ export declare const useTimePicker_unstable: (props: TimePickerProps, ref: React_2.Ref<HTMLInputElement>) => TimePickerState;
141
+
142
+ /**
143
+ * Apply styling to the TimePicker slots based on the state
144
+ */
145
+ export declare const useTimePickerStyles_unstable: (state: TimePickerState) => TimePickerState;
146
+
147
+ export { }
package/lib/TimePicker.js CHANGED
@@ -1 +1 @@
1
- export { TimePicker, formatDateToTimeString, timePickerClassNames, useTimePickerStyles_unstable, useTimePicker_unstable } from './components/TimePicker/index';
1
+ export { TimePicker, formatDateToTimeString, timePickerClassNames, useTimePickerStyles_unstable, useTimePicker_unstable } from "./components/TimePicker/index.js";
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/TimePicker.ts"],"sourcesContent":["export type {\n Hour,\n TimeFormatOptions,\n TimePickerErrorType,\n TimePickerOption,\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimeStringValidationResult,\n} from './components/TimePicker/index';\nexport {\n TimePicker,\n formatDateToTimeString,\n timePickerClassNames,\n useTimePickerStyles_unstable,\n useTimePicker_unstable,\n} from './components/TimePicker/index';\n"],"names":["TimePicker","formatDateToTimeString","timePickerClassNames","useTimePickerStyles_unstable","useTimePicker_unstable"],"mappings":"AAYA,SACEA,UAAU,EACVC,sBAAsB,EACtBC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
1
+ {"version":3,"sources":["../src/TimePicker.ts"],"sourcesContent":["export type {\n Hour,\n TimeFormatOptions,\n TimePickerErrorType,\n TimePickerOption,\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimeStringValidationResult,\n} from './components/TimePicker/index';\nexport {\n TimePicker,\n formatDateToTimeString,\n timePickerClassNames,\n useTimePickerStyles_unstable,\n useTimePicker_unstable,\n} from './components/TimePicker/index';\n"],"names":["TimePicker","formatDateToTimeString","timePickerClassNames","useTimePickerStyles_unstable","useTimePicker_unstable"],"mappings":"AAYA,SACEA,UAAU,EACVC,sBAAsB,EACtBC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,QACjB,mCAAgC"}
@@ -1,9 +1,9 @@
1
1
  'use client';
2
- import * as React from 'react';
3
- import { useTimePicker_unstable } from './useTimePicker';
4
- import { useTimePickerStyles_unstable } from './useTimePickerStyles.styles';
5
- import { renderCombobox_unstable, useComboboxContextValues } from '@fluentui/react-combobox';
6
- import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
2
+ import * as React from "react";
3
+ import { useTimePicker_unstable } from "./useTimePicker.js";
4
+ import { useTimePickerStyles_unstable } from "./useTimePickerStyles.styles.js";
5
+ import { renderCombobox_unstable, useComboboxContextValues } from "@fluentui/react-combobox";
6
+ import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
7
7
  /**
8
8
  * TimePicker Compat component
9
9
  */ export const TimePicker = /*#__PURE__*/ React.forwardRef((props, ref)=>{
@@ -1 +1 @@
1
- {"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"}
1
+ {"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,qBAAkB;AACzD,SAASC,4BAA4B,QAAQ,kCAA+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"}
@@ -1,4 +1,4 @@
1
- export { TimePicker } from './TimePicker';
2
- export { useTimePicker_unstable } from './useTimePicker';
3
- export { timePickerClassNames, useTimePickerStyles_unstable } from './useTimePickerStyles.styles';
4
- export { formatDateToTimeString } from './timeMath';
1
+ export { TimePicker } from "./TimePicker.js";
2
+ export { useTimePicker_unstable } from "./useTimePicker.js";
3
+ export { timePickerClassNames, useTimePickerStyles_unstable } from "./useTimePickerStyles.styles.js";
4
+ export { formatDateToTimeString } from "./timeMath.js";
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TimePicker/index.ts"],"sourcesContent":["export { TimePicker } from './TimePicker';\nexport type {\n Hour,\n TimeFormatOptions,\n TimePickerErrorType,\n TimePickerOption,\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimeStringValidationResult,\n} from './TimePicker.types';\nexport { useTimePicker_unstable } from './useTimePicker';\nexport { timePickerClassNames, useTimePickerStyles_unstable } from './useTimePickerStyles.styles';\nexport { formatDateToTimeString } from './timeMath';\n"],"names":["TimePicker","useTimePicker_unstable","timePickerClassNames","useTimePickerStyles_unstable","formatDateToTimeString"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAa1C,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B;AAClG,SAASC,sBAAsB,QAAQ,aAAa"}
1
+ {"version":3,"sources":["../src/components/TimePicker/index.ts"],"sourcesContent":["export { TimePicker } from './TimePicker';\nexport type {\n Hour,\n TimeFormatOptions,\n TimePickerErrorType,\n TimePickerOption,\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimeStringValidationResult,\n} from './TimePicker.types';\nexport { useTimePicker_unstable } from './useTimePicker';\nexport { timePickerClassNames, useTimePickerStyles_unstable } from './useTimePickerStyles.styles';\nexport { formatDateToTimeString } from './timeMath';\n"],"names":["TimePicker","useTimePicker_unstable","timePickerClassNames","useTimePickerStyles_unstable","formatDateToTimeString"],"mappings":"AAAA,SAASA,UAAU,QAAQ,kBAAe;AAa1C,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,kCAA+B;AAClG,SAASC,sBAAsB,QAAQ,gBAAa"}
@@ -1,10 +1,10 @@
1
1
  'use client';
2
- import * as React from 'react';
3
- import { elementContains, mergeCallbacks, useControllableState, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
4
- import { Enter } from '@fluentui/keyboard-keys';
5
- import { useCombobox_unstable, Option } from '@fluentui/react-combobox';
6
- import { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';
7
- import { dateToKey, keyToDate, formatDateToTimeString as defaultFormatDateToTimeString, getDateStartAnchor, getDateEndAnchor, getTimesBetween, getDateFromTimeString } from './timeMath';
2
+ import * as React from "react";
3
+ import { elementContains, mergeCallbacks, useControllableState, useEventCallback, useId, useMergedRefs } from "@fluentui/react-utilities";
4
+ import { Enter } from "@fluentui/keyboard-keys";
5
+ import { useCombobox_unstable, Option } from "@fluentui/react-combobox";
6
+ import { useFieldContext_unstable as useFieldContext } from "@fluentui/react-field";
7
+ import { dateToKey, keyToDate, formatDateToTimeString as defaultFormatDateToTimeString, getDateStartAnchor, getDateEndAnchor, getTimesBetween, getDateFromTimeString } from "./timeMath.js";
8
8
  /**
9
9
  * Create the state required to render TimePicker.
10
10
  *
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TimePicker/useTimePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n elementContains,\n mergeCallbacks,\n useControllableState,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport type { Hour, TimePickerOption, TimePickerProps, TimePickerState, TimeSelectionData } from './TimePicker.types';\nimport type { ComboboxProps } from '@fluentui/react-combobox';\nimport { useCombobox_unstable, Option } from '@fluentui/react-combobox';\nimport { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';\nimport {\n dateToKey,\n keyToDate,\n formatDateToTimeString as defaultFormatDateToTimeString,\n getDateStartAnchor,\n getDateEndAnchor,\n getTimesBetween,\n getDateFromTimeString,\n} from './timeMath';\n\n/**\n * Create the state required to render TimePicker.\n *\n * The returned state can be modified with hooks such as useTimePickerStyles_unstable,\n * before being passed to renderTimePicker_unstable.\n *\n * @param props - props from this instance of TimePicker\n * @param ref - reference to root HTMLElement of TimePicker\n */\nexport const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HTMLInputElement>): TimePickerState => {\n const {\n dateAnchor: dateAnchorInProps,\n defaultSelectedTime: defaultSelectedTimeInProps,\n endHour = 24,\n formatDateToTimeString = defaultFormatDateToTimeString,\n hourCycle,\n increment = 30,\n onTimeChange,\n selectedTime: selectedTimeInProps,\n showSeconds = false,\n startHour = 0,\n parseTimeStringToDate: parseTimeStringToDateInProps,\n ...rest\n } = props;\n const { freeform = false } = rest;\n\n const { dateStartAnchor, dateEndAnchor } = useStableDateAnchor(\n dateAnchorInProps ?? selectedTimeInProps ?? defaultSelectedTimeInProps,\n startHour,\n endHour,\n );\n\n const options: TimePickerOption[] = React.useMemo(\n () =>\n getTimesBetween(dateStartAnchor, dateEndAnchor, increment).map(time => ({\n date: time,\n key: dateToKey(time),\n text: formatDateToTimeString(time, { showSeconds, hourCycle }),\n })),\n [dateEndAnchor, dateStartAnchor, formatDateToTimeString, hourCycle, increment, showSeconds],\n );\n\n const [selectedTime, setSelectedTime] = useControllableState<Date | null>({\n state: selectedTimeInProps,\n defaultState: defaultSelectedTimeInProps,\n initialState: null,\n });\n\n const [submittedText, setSubmittedText] = React.useState<string | undefined>(undefined);\n\n const selectTime: TimePickerProps['onTimeChange'] = useEventCallback((e, data) => {\n setSelectedTime(data.selectedTime);\n setSubmittedText(data.selectedTimeText);\n onTimeChange?.(e, data);\n });\n\n const selectedOptions = React.useMemo(() => {\n const selectedTimeKey = dateToKey(selectedTime);\n const selectedOption = options.find(date => date.key === selectedTimeKey);\n return selectedOption ? [selectedOption.key] : [];\n }, [options, selectedTime]);\n\n const clearIconRef = React.useRef<HTMLSpanElement>(null);\n const handleOptionSelect: ComboboxProps['onOptionSelect'] = useEventCallback((e, data) => {\n if (\n freeform &&\n data.optionValue === undefined &&\n !(rest.clearable && e.type === 'click' && e.currentTarget === clearIconRef.current)\n ) {\n // Combobox clears selection when input value not matching any option; but we allow this case in freeform TimePicker.\n return;\n }\n const timeSelectionData: TimeSelectionData = {\n selectedTime: keyToDate(data.optionValue ?? ''),\n selectedTimeText: data.optionText,\n errorType: undefined,\n };\n selectTime(e, timeSelectionData);\n });\n\n const baseState = useCombobox_unstable(\n {\n autoComplete: 'off',\n ...rest,\n selectedOptions,\n onOptionSelect: handleOptionSelect,\n children: options.map(date => (\n <Option key={date.key} value={date.key}>\n {date.text}\n </Option>\n )),\n },\n ref,\n );\n\n const defaultParseTimeStringToDate = React.useCallback(\n (time: string | undefined) =>\n getDateFromTimeString(time, dateStartAnchor, dateEndAnchor, { hourCycle, showSeconds }),\n [dateEndAnchor, dateStartAnchor, hourCycle, showSeconds],\n );\n\n const mergedClearIconRef = useMergedRefs(baseState.clearIcon?.ref, clearIconRef);\n const state: TimePickerState = {\n ...baseState,\n clearIcon: baseState.clearIcon\n ? {\n ...baseState.clearIcon,\n ref: mergedClearIconRef,\n }\n : undefined,\n freeform,\n parseTimeStringToDate: parseTimeStringToDateInProps ?? defaultParseTimeStringToDate,\n submittedText,\n };\n\n useDefaultChevronIconLabel(state);\n useSelectTimeFromValue(state, selectTime);\n\n return state;\n};\n\n/**\n * Provides stable start and end date anchors based on the provided date and time parameters.\n * The hook ensures that the memoization remains consistent even if new Date objects representing the same date are provided.\n */\nconst useStableDateAnchor = (providedDate: Date | undefined, startHour: Hour, endHour: Hour) => {\n const [fallbackDateAnchor] = React.useState(() => new Date());\n\n const providedDateKey = dateToKey(providedDate ?? null);\n\n return React.useMemo(() => {\n const dateAnchor = providedDate ?? fallbackDateAnchor;\n\n const dateStartAnchor = getDateStartAnchor(dateAnchor, startHour);\n const dateEndAnchor = getDateEndAnchor(dateAnchor, startHour, endHour);\n\n return { dateStartAnchor, dateEndAnchor };\n // `providedDate`'s stable key representation is used as dependency instead of the Date object. This ensures that the memoization remains stable when a new Date object representing the same date is passed in.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [endHour, fallbackDateAnchor, providedDateKey, startHour]);\n};\n\n/**\n * Mimics the behavior of the browser's change event for a freeform TimePicker.\n * The provided callback is called when input changed and:\n * - Enter/Tab key is pressed on the input.\n * - TimePicker loses focus, signifying a possible change.\n */\nconst useSelectTimeFromValue = (state: TimePickerState, callback: TimePickerProps['onTimeChange']) => {\n const { getOptionById, freeform, parseTimeStringToDate, submittedText, value, activeDescendantController } = state;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : null;\n }, [activeDescendantController, getOptionById]);\n\n // Base Combobox has activeOption default to first option in dropdown even if it doesn't match input value, and Enter key will select it.\n // This effect ensures that the activeOption is cleared when the input doesn't match any option.\n // This behavior is specific to a freeform TimePicker where the input value is treated as a valid time even if it's not in the dropdown.\n React.useEffect(() => {\n if (freeform && value) {\n const activeOption = getActiveOption();\n if (!activeOption) {\n return;\n }\n\n const valueMatchesActiveOption = activeOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0;\n if (!valueMatchesActiveOption) {\n activeDescendantController.blur();\n }\n }\n }, [freeform, value, activeDescendantController, getActiveOption]);\n\n const selectTimeFromValue = useEventCallback(\n (e: React.KeyboardEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement>) => {\n if (!freeform) {\n return;\n }\n\n const { date: selectedTime, errorType } = parseTimeStringToDate(value);\n\n // Only triggers callback when the text in input has changed.\n if (submittedText !== value) {\n callback?.(e, { selectedTime, selectedTimeText: value, errorType });\n }\n },\n );\n\n const handleKeyDown: ComboboxProps['onKeyDown'] = useEventCallback(e => {\n const activeOption = getActiveOption();\n if (!activeOption && e.key === Enter) {\n selectTimeFromValue(e);\n }\n });\n // eslint-disable-next-line react-hooks/immutability\n state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);\n\n const rootRef = React.useRef<HTMLDivElement>(null);\n // eslint-disable-next-line react-hooks/immutability\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n if (state.listbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n }\n\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n }\n\n const handleInputBlur = useEventCallback((e: React.FocusEvent<HTMLInputElement>) => {\n const isOutside = e.relatedTarget ? !elementContains(rootRef.current, e.relatedTarget) : true;\n if (isOutside) {\n selectTimeFromValue(e);\n }\n });\n // eslint-disable-next-line react-hooks/immutability\n state.input.onBlur = mergeCallbacks(handleInputBlur, state.input.onBlur);\n};\n\n/**\n * Provides a default aria-labelledby for the chevron icon if the TimePicker is wrapped in a Field.\n */\nconst useDefaultChevronIconLabel = (state: TimePickerState) => {\n const fieldContext = useFieldContext();\n const chevronDefaultId = useId('timepicker-chevron-');\n const defaultLabelFromCombobox = 'Open';\n\n if (fieldContext?.labelId && state.expandIcon?.['aria-label'] === defaultLabelFromCombobox) {\n const chevronId = state.expandIcon.id ?? chevronDefaultId;\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;\n }\n};\n"],"names":["React","elementContains","mergeCallbacks","useControllableState","useEventCallback","useId","useMergedRefs","Enter","useCombobox_unstable","Option","useFieldContext_unstable","useFieldContext","dateToKey","keyToDate","formatDateToTimeString","defaultFormatDateToTimeString","getDateStartAnchor","getDateEndAnchor","getTimesBetween","getDateFromTimeString","useTimePicker_unstable","props","ref","baseState","dateAnchor","dateAnchorInProps","defaultSelectedTime","defaultSelectedTimeInProps","endHour","hourCycle","increment","onTimeChange","selectedTime","selectedTimeInProps","showSeconds","startHour","parseTimeStringToDate","parseTimeStringToDateInProps","rest","freeform","dateStartAnchor","dateEndAnchor","useStableDateAnchor","options","useMemo","map","time","date","key","text","setSelectedTime","state","defaultState","initialState","submittedText","setSubmittedText","useState","undefined","selectTime","e","data","selectedTimeText","selectedOptions","selectedTimeKey","selectedOption","find","clearIconRef","useRef","handleOptionSelect","optionValue","clearable","type","currentTarget","current","timeSelectionData","optionText","errorType","autoComplete","onOptionSelect","children","value","defaultParseTimeStringToDate","useCallback","mergedClearIconRef","clearIcon","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","callback","getOptionById","activeDescendantController","getActiveOption","activeOptionId","active","useEffect","activeOption","valueMatchesActiveOption","toLowerCase","indexOf","blur","selectTimeFromValue","handleKeyDown","root","onKeyDown","rootRef","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","input","onBlur","fieldContext","chevronDefaultId","defaultLabelFromCombobox","labelId","chevronId","id"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/TimePicker/useTimePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n elementContains,\n mergeCallbacks,\n useControllableState,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport type { Hour, TimePickerOption, TimePickerProps, TimePickerState, TimeSelectionData } from './TimePicker.types';\nimport type { ComboboxProps } from '@fluentui/react-combobox';\nimport { useCombobox_unstable, Option } from '@fluentui/react-combobox';\nimport { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';\nimport {\n dateToKey,\n keyToDate,\n formatDateToTimeString as defaultFormatDateToTimeString,\n getDateStartAnchor,\n getDateEndAnchor,\n getTimesBetween,\n getDateFromTimeString,\n} from './timeMath';\n\n/**\n * Create the state required to render TimePicker.\n *\n * The returned state can be modified with hooks such as useTimePickerStyles_unstable,\n * before being passed to renderTimePicker_unstable.\n *\n * @param props - props from this instance of TimePicker\n * @param ref - reference to root HTMLElement of TimePicker\n */\nexport const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HTMLInputElement>): TimePickerState => {\n const {\n dateAnchor: dateAnchorInProps,\n defaultSelectedTime: defaultSelectedTimeInProps,\n endHour = 24,\n formatDateToTimeString = defaultFormatDateToTimeString,\n hourCycle,\n increment = 30,\n onTimeChange,\n selectedTime: selectedTimeInProps,\n showSeconds = false,\n startHour = 0,\n parseTimeStringToDate: parseTimeStringToDateInProps,\n ...rest\n } = props;\n const { freeform = false } = rest;\n\n const { dateStartAnchor, dateEndAnchor } = useStableDateAnchor(\n dateAnchorInProps ?? selectedTimeInProps ?? defaultSelectedTimeInProps,\n startHour,\n endHour,\n );\n\n const options: TimePickerOption[] = React.useMemo(\n () =>\n getTimesBetween(dateStartAnchor, dateEndAnchor, increment).map(time => ({\n date: time,\n key: dateToKey(time),\n text: formatDateToTimeString(time, { showSeconds, hourCycle }),\n })),\n [dateEndAnchor, dateStartAnchor, formatDateToTimeString, hourCycle, increment, showSeconds],\n );\n\n const [selectedTime, setSelectedTime] = useControllableState<Date | null>({\n state: selectedTimeInProps,\n defaultState: defaultSelectedTimeInProps,\n initialState: null,\n });\n\n const [submittedText, setSubmittedText] = React.useState<string | undefined>(undefined);\n\n const selectTime: TimePickerProps['onTimeChange'] = useEventCallback((e, data) => {\n setSelectedTime(data.selectedTime);\n setSubmittedText(data.selectedTimeText);\n onTimeChange?.(e, data);\n });\n\n const selectedOptions = React.useMemo(() => {\n const selectedTimeKey = dateToKey(selectedTime);\n const selectedOption = options.find(date => date.key === selectedTimeKey);\n return selectedOption ? [selectedOption.key] : [];\n }, [options, selectedTime]);\n\n const clearIconRef = React.useRef<HTMLSpanElement>(null);\n const handleOptionSelect: ComboboxProps['onOptionSelect'] = useEventCallback((e, data) => {\n if (\n freeform &&\n data.optionValue === undefined &&\n !(rest.clearable && e.type === 'click' && e.currentTarget === clearIconRef.current)\n ) {\n // Combobox clears selection when input value not matching any option; but we allow this case in freeform TimePicker.\n return;\n }\n const timeSelectionData: TimeSelectionData = {\n selectedTime: keyToDate(data.optionValue ?? ''),\n selectedTimeText: data.optionText,\n errorType: undefined,\n };\n selectTime(e, timeSelectionData);\n });\n\n const baseState = useCombobox_unstable(\n {\n autoComplete: 'off',\n ...rest,\n selectedOptions,\n onOptionSelect: handleOptionSelect,\n children: options.map(date => (\n <Option key={date.key} value={date.key}>\n {date.text}\n </Option>\n )),\n },\n ref,\n );\n\n const defaultParseTimeStringToDate = React.useCallback(\n (time: string | undefined) =>\n getDateFromTimeString(time, dateStartAnchor, dateEndAnchor, { hourCycle, showSeconds }),\n [dateEndAnchor, dateStartAnchor, hourCycle, showSeconds],\n );\n\n const mergedClearIconRef = useMergedRefs(baseState.clearIcon?.ref, clearIconRef);\n const state: TimePickerState = {\n ...baseState,\n clearIcon: baseState.clearIcon\n ? {\n ...baseState.clearIcon,\n ref: mergedClearIconRef,\n }\n : undefined,\n freeform,\n parseTimeStringToDate: parseTimeStringToDateInProps ?? defaultParseTimeStringToDate,\n submittedText,\n };\n\n useDefaultChevronIconLabel(state);\n useSelectTimeFromValue(state, selectTime);\n\n return state;\n};\n\n/**\n * Provides stable start and end date anchors based on the provided date and time parameters.\n * The hook ensures that the memoization remains consistent even if new Date objects representing the same date are provided.\n */\nconst useStableDateAnchor = (providedDate: Date | undefined, startHour: Hour, endHour: Hour) => {\n const [fallbackDateAnchor] = React.useState(() => new Date());\n\n const providedDateKey = dateToKey(providedDate ?? null);\n\n return React.useMemo(() => {\n const dateAnchor = providedDate ?? fallbackDateAnchor;\n\n const dateStartAnchor = getDateStartAnchor(dateAnchor, startHour);\n const dateEndAnchor = getDateEndAnchor(dateAnchor, startHour, endHour);\n\n return { dateStartAnchor, dateEndAnchor };\n // `providedDate`'s stable key representation is used as dependency instead of the Date object. This ensures that the memoization remains stable when a new Date object representing the same date is passed in.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [endHour, fallbackDateAnchor, providedDateKey, startHour]);\n};\n\n/**\n * Mimics the behavior of the browser's change event for a freeform TimePicker.\n * The provided callback is called when input changed and:\n * - Enter/Tab key is pressed on the input.\n * - TimePicker loses focus, signifying a possible change.\n */\nconst useSelectTimeFromValue = (state: TimePickerState, callback: TimePickerProps['onTimeChange']) => {\n const { getOptionById, freeform, parseTimeStringToDate, submittedText, value, activeDescendantController } = state;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : null;\n }, [activeDescendantController, getOptionById]);\n\n // Base Combobox has activeOption default to first option in dropdown even if it doesn't match input value, and Enter key will select it.\n // This effect ensures that the activeOption is cleared when the input doesn't match any option.\n // This behavior is specific to a freeform TimePicker where the input value is treated as a valid time even if it's not in the dropdown.\n React.useEffect(() => {\n if (freeform && value) {\n const activeOption = getActiveOption();\n if (!activeOption) {\n return;\n }\n\n const valueMatchesActiveOption = activeOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0;\n if (!valueMatchesActiveOption) {\n activeDescendantController.blur();\n }\n }\n }, [freeform, value, activeDescendantController, getActiveOption]);\n\n const selectTimeFromValue = useEventCallback(\n (e: React.KeyboardEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement>) => {\n if (!freeform) {\n return;\n }\n\n const { date: selectedTime, errorType } = parseTimeStringToDate(value);\n\n // Only triggers callback when the text in input has changed.\n if (submittedText !== value) {\n callback?.(e, { selectedTime, selectedTimeText: value, errorType });\n }\n },\n );\n\n const handleKeyDown: ComboboxProps['onKeyDown'] = useEventCallback(e => {\n const activeOption = getActiveOption();\n if (!activeOption && e.key === Enter) {\n selectTimeFromValue(e);\n }\n });\n // eslint-disable-next-line react-hooks/immutability\n state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);\n\n const rootRef = React.useRef<HTMLDivElement>(null);\n // eslint-disable-next-line react-hooks/immutability\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n if (state.listbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n }\n\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n }\n\n const handleInputBlur = useEventCallback((e: React.FocusEvent<HTMLInputElement>) => {\n const isOutside = e.relatedTarget ? !elementContains(rootRef.current, e.relatedTarget) : true;\n if (isOutside) {\n selectTimeFromValue(e);\n }\n });\n // eslint-disable-next-line react-hooks/immutability\n state.input.onBlur = mergeCallbacks(handleInputBlur, state.input.onBlur);\n};\n\n/**\n * Provides a default aria-labelledby for the chevron icon if the TimePicker is wrapped in a Field.\n */\nconst useDefaultChevronIconLabel = (state: TimePickerState) => {\n const fieldContext = useFieldContext();\n const chevronDefaultId = useId('timepicker-chevron-');\n const defaultLabelFromCombobox = 'Open';\n\n if (fieldContext?.labelId && state.expandIcon?.['aria-label'] === defaultLabelFromCombobox) {\n const chevronId = state.expandIcon.id ?? chevronDefaultId;\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;\n }\n};\n"],"names":["React","elementContains","mergeCallbacks","useControllableState","useEventCallback","useId","useMergedRefs","Enter","useCombobox_unstable","Option","useFieldContext_unstable","useFieldContext","dateToKey","keyToDate","formatDateToTimeString","defaultFormatDateToTimeString","getDateStartAnchor","getDateEndAnchor","getTimesBetween","getDateFromTimeString","useTimePicker_unstable","props","ref","baseState","dateAnchor","dateAnchorInProps","defaultSelectedTime","defaultSelectedTimeInProps","endHour","hourCycle","increment","onTimeChange","selectedTime","selectedTimeInProps","showSeconds","startHour","parseTimeStringToDate","parseTimeStringToDateInProps","rest","freeform","dateStartAnchor","dateEndAnchor","useStableDateAnchor","options","useMemo","map","time","date","key","text","setSelectedTime","state","defaultState","initialState","submittedText","setSubmittedText","useState","undefined","selectTime","e","data","selectedTimeText","selectedOptions","selectedTimeKey","selectedOption","find","clearIconRef","useRef","handleOptionSelect","optionValue","clearable","type","currentTarget","current","timeSelectionData","optionText","errorType","autoComplete","onOptionSelect","children","value","defaultParseTimeStringToDate","useCallback","mergedClearIconRef","clearIcon","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","callback","getOptionById","activeDescendantController","getActiveOption","activeOptionId","active","useEffect","activeOption","valueMatchesActiveOption","toLowerCase","indexOf","blur","selectTimeFromValue","handleKeyDown","root","onKeyDown","rootRef","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","input","onBlur","fieldContext","chevronDefaultId","defaultLabelFromCombobox","labelId","chevronId","id"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
 
3
- import { __styles, mergeClasses } from '@griffel/react';
4
- import { useComboboxStyles_unstable } from '@fluentui/react-combobox';
3
+ import { __styles, mergeClasses } from "@griffel/react";
4
+ import { useComboboxStyles_unstable } from "@fluentui/react-combobox";
5
5
  export const timePickerClassNames = {
6
6
  root: 'fui-TimePicker',
7
7
  input: 'fui-TimePicker__input',
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","clearIcon","listbox","useStyles","Bxyxcbc","d","useTimePickerStyles_unstable","state","styles","className"],"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\nexport const timePickerClassNames = {\n root: 'fui-TimePicker',\n input: 'fui-TimePicker__input',\n expandIcon: 'fui-TimePicker__expandIcon',\n clearIcon: 'fui-TimePicker__clearIcon',\n listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = makeStyles({\n listbox: {\n maxHeight: 'min(80vh, 416px)'\n }\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */ export const useTimePickerStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n }\n if (state.clearIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n }\n if (state.listbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n }\n useComboboxStyles_unstable(state);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE,4BAA4B;EACxCC,SAAS,EAAE,2BAA2B;EACtCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,gBAAGT,QAAA;EAAAQ,OAAA;IAAAE,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1B;EACAI,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EACpF;EACAF,KAAK,CAACR,KAAK,CAACU,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACE,KAAK,EAAEQ,KAAK,CAACR,KAAK,CAACU,SAAS,CAAC;EACvF,IAAIF,KAAK,CAACP,UAAU,EAAE;IAClB;IACAO,KAAK,CAACP,UAAU,CAACS,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACG,UAAU,EAAEO,KAAK,CAACP,UAAU,CAACS,SAAS,CAAC;EAC1G;EACA,IAAIF,KAAK,CAACN,SAAS,EAAE;IACjB;IACAM,KAAK,CAACN,SAAS,CAACQ,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACI,SAAS,EAAEM,KAAK,CAACN,SAAS,CAACQ,SAAS,CAAC;EACvG;EACA,IAAIF,KAAK,CAACL,OAAO,EAAE;IACf;IACAK,KAAK,CAACL,OAAO,CAACO,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACK,OAAO,EAAEM,MAAM,CAACN,OAAO,EAAEK,KAAK,CAACL,OAAO,CAACO,SAAS,CAAC;EACjH;EACAb,0BAA0B,CAACW,KAAK,CAAC;EACjC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","clearIcon","listbox","useStyles","Bxyxcbc","d","useTimePickerStyles_unstable","state","styles","className"],"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { useComboboxStyles_unstable } from \"@fluentui/react-combobox\";\nexport const timePickerClassNames = {\n root: 'fui-TimePicker',\n input: 'fui-TimePicker__input',\n expandIcon: 'fui-TimePicker__expandIcon',\n clearIcon: 'fui-TimePicker__clearIcon',\n listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = makeStyles({\n listbox: {\n maxHeight: 'min(80vh, 416px)'\n }\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */ export const useTimePickerStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n }\n if (state.clearIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n }\n if (state.listbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n }\n useComboboxStyles_unstable(state);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE,4BAA4B;EACxCC,SAAS,EAAE,2BAA2B;EACtCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,gBAAGT,QAAA;EAAAQ,OAAA;IAAAE,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1B;EACAI,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EACpF;EACAF,KAAK,CAACR,KAAK,CAACU,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACE,KAAK,EAAEQ,KAAK,CAACR,KAAK,CAACU,SAAS,CAAC;EACvF,IAAIF,KAAK,CAACP,UAAU,EAAE;IAClB;IACAO,KAAK,CAACP,UAAU,CAACS,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACG,UAAU,EAAEO,KAAK,CAACP,UAAU,CAACS,SAAS,CAAC;EAC1G;EACA,IAAIF,KAAK,CAACN,SAAS,EAAE;IACjB;IACAM,KAAK,CAACN,SAAS,CAACQ,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACI,SAAS,EAAEM,KAAK,CAACN,SAAS,CAACQ,SAAS,CAAC;EACvG;EACA,IAAIF,KAAK,CAACL,OAAO,EAAE;IACf;IACAK,KAAK,CAACL,OAAO,CAACO,SAAS,GAAGd,YAAY,CAACE,oBAAoB,CAACK,OAAO,EAAEM,MAAM,CAACN,OAAO,EAAEK,KAAK,CAACL,OAAO,CAACO,SAAS,CAAC;EACjH;EACAb,0BAA0B,CAACW,KAAK,CAAC;EACjC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -1,6 +1,6 @@
1
1
  'use client';
2
- import { makeStyles, mergeClasses } from '@griffel/react';
3
- import { useComboboxStyles_unstable } from '@fluentui/react-combobox';
2
+ import { makeStyles, mergeClasses } from "@griffel/react";
3
+ import { useComboboxStyles_unstable } from "@fluentui/react-combobox";
4
4
  export const timePickerClassNames = {
5
5
  root: 'fui-TimePicker',
6
6
  input: 'fui-TimePicker__input',
package/lib/index.js CHANGED
@@ -1 +1 @@
1
- export { TimePicker, timePickerClassNames, useTimePickerStyles_unstable, useTimePicker_unstable, formatDateToTimeString } from './TimePicker';
1
+ export { TimePicker, timePickerClassNames, useTimePickerStyles_unstable, useTimePicker_unstable, formatDateToTimeString } from "./TimePicker.js";
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n TimePicker,\n timePickerClassNames,\n useTimePickerStyles_unstable,\n useTimePicker_unstable,\n formatDateToTimeString,\n} from './TimePicker';\nexport type {\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimePickerErrorType,\n} from './TimePicker';\n"],"names":["TimePicker","timePickerClassNames","useTimePickerStyles_unstable","useTimePicker_unstable","formatDateToTimeString"],"mappings":"AAAA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,EACtBC,sBAAsB,QACjB,eAAe"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n TimePicker,\n timePickerClassNames,\n useTimePickerStyles_unstable,\n useTimePicker_unstable,\n formatDateToTimeString,\n} from './TimePicker';\nexport type {\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimePickerErrorType,\n} from './TimePicker';\n"],"names":["TimePicker","timePickerClassNames","useTimePickerStyles_unstable","useTimePicker_unstable","formatDateToTimeString"],"mappings":"AAAA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,EACtBC,sBAAsB,QACjB,kBAAe"}
@@ -25,4 +25,4 @@ _export(exports, {
25
25
  return _index.useTimePicker_unstable;
26
26
  }
27
27
  });
28
- const _index = require("./components/TimePicker/index");
28
+ const _index = require("./components/TimePicker/index.cjs");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/TimePicker.ts"],"sourcesContent":["export type {\n Hour,\n TimeFormatOptions,\n TimePickerErrorType,\n TimePickerOption,\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimeStringValidationResult,\n} from './components/TimePicker/index';\nexport {\n TimePicker,\n formatDateToTimeString,\n timePickerClassNames,\n useTimePickerStyles_unstable,\n useTimePicker_unstable,\n} from './components/TimePicker/index';\n"],"names":["TimePicker","formatDateToTimeString","timePickerClassNames","useTimePickerStyles_unstable","useTimePicker_unstable"],"mappings":";;;;;;;;;;;;eAaEA,iBAAU;;;eACVC,6BAAsB;;;eACtBC,2BAAoB;;;eACpBC,mCAA4B;;;eAC5BC,6BAAsB;;;uBACjB,gCAAgC"}
1
+ {"version":3,"sources":["../src/TimePicker.ts"],"sourcesContent":["export type {\n Hour,\n TimeFormatOptions,\n TimePickerErrorType,\n TimePickerOption,\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimeStringValidationResult,\n} from './components/TimePicker/index';\nexport {\n TimePicker,\n formatDateToTimeString,\n timePickerClassNames,\n useTimePickerStyles_unstable,\n useTimePicker_unstable,\n} from './components/TimePicker/index';\n"],"names":["TimePicker","formatDateToTimeString","timePickerClassNames","useTimePickerStyles_unstable","useTimePicker_unstable"],"mappings":";;;;;;;;;;;;eAaEA,iBAAU;;;eACVC,6BAAsB;;;eACtBC,2BAAoB;;;eACpBC,mCAA4B;;;eAC5BC,6BAAsB;;;uBACjB,mCAAgC"}
@@ -11,8 +11,8 @@ Object.defineProperty(exports, "TimePicker", {
11
11
  });
12
12
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
13
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
- const _useTimePicker = require("./useTimePicker");
15
- const _useTimePickerStylesstyles = require("./useTimePickerStyles.styles");
14
+ const _useTimePicker = require("./useTimePicker.cjs");
15
+ const _useTimePickerStylesstyles = require("./useTimePickerStyles.styles.cjs");
16
16
  const _reactcombobox = require("@fluentui/react-combobox");
17
17
  const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
18
18
  const TimePicker = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
@@ -1 +1 @@
1
- {"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"}
1
+ {"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,qBAAkB;2CACZ,kCAA+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"}
@@ -25,7 +25,7 @@ _export(exports, {
25
25
  return _useTimePicker.useTimePicker_unstable;
26
26
  }
27
27
  });
28
- const _TimePicker = require("./TimePicker");
29
- const _useTimePicker = require("./useTimePicker");
30
- const _useTimePickerStylesstyles = require("./useTimePickerStyles.styles");
31
- const _timeMath = require("./timeMath");
28
+ const _TimePicker = require("./TimePicker.cjs");
29
+ const _useTimePicker = require("./useTimePicker.cjs");
30
+ const _useTimePickerStylesstyles = require("./useTimePickerStyles.styles.cjs");
31
+ const _timeMath = require("./timeMath.cjs");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TimePicker/index.ts"],"sourcesContent":["export { TimePicker } from './TimePicker';\nexport type {\n Hour,\n TimeFormatOptions,\n TimePickerErrorType,\n TimePickerOption,\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimeStringValidationResult,\n} from './TimePicker.types';\nexport { useTimePicker_unstable } from './useTimePicker';\nexport { timePickerClassNames, useTimePickerStyles_unstable } from './useTimePickerStyles.styles';\nexport { formatDateToTimeString } from './timeMath';\n"],"names":["TimePicker","useTimePicker_unstable","timePickerClassNames","useTimePickerStyles_unstable","formatDateToTimeString"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAeVI,gCAAsB;;;eADtBF,+CAAoB;;;eAAEC,uDAA4B;;;eADlDF,qCAAsB;;;4BAbJ,eAAe;+BAaH,kBAAkB;2CACU,+BAA+B;0BAC3D,aAAa"}
1
+ {"version":3,"sources":["../src/components/TimePicker/index.ts"],"sourcesContent":["export { TimePicker } from './TimePicker';\nexport type {\n Hour,\n TimeFormatOptions,\n TimePickerErrorType,\n TimePickerOption,\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimeStringValidationResult,\n} from './TimePicker.types';\nexport { useTimePicker_unstable } from './useTimePicker';\nexport { timePickerClassNames, useTimePickerStyles_unstable } from './useTimePickerStyles.styles';\nexport { formatDateToTimeString } from './timeMath';\n"],"names":["TimePicker","useTimePicker_unstable","timePickerClassNames","useTimePickerStyles_unstable","formatDateToTimeString"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAeVI,gCAAsB;;;eADtBF,+CAAoB;;;eAAEC,uDAA4B;;;eADlDF,qCAAsB;;;4BAbJ,kBAAe;+BAaH,qBAAkB;2CACU,kCAA+B;0BAC3D,gBAAa"}
@@ -15,7 +15,7 @@ const _reactutilities = require("@fluentui/react-utilities");
15
15
  const _keyboardkeys = require("@fluentui/keyboard-keys");
16
16
  const _reactcombobox = require("@fluentui/react-combobox");
17
17
  const _reactfield = require("@fluentui/react-field");
18
- const _timeMath = require("./timeMath");
18
+ const _timeMath = require("./timeMath.cjs");
19
19
  const useTimePicker_unstable = (props, ref)=>{
20
20
  var _baseState_clearIcon;
21
21
  const { dateAnchor: dateAnchorInProps, defaultSelectedTime: defaultSelectedTimeInProps, endHour = 24, formatDateToTimeString = _timeMath.formatDateToTimeString, hourCycle, increment = 30, onTimeChange, selectedTime: selectedTimeInProps, showSeconds = false, startHour = 0, parseTimeStringToDate: parseTimeStringToDateInProps, ...rest } = props;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TimePicker/useTimePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n elementContains,\n mergeCallbacks,\n useControllableState,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport type { Hour, TimePickerOption, TimePickerProps, TimePickerState, TimeSelectionData } from './TimePicker.types';\nimport type { ComboboxProps } from '@fluentui/react-combobox';\nimport { useCombobox_unstable, Option } from '@fluentui/react-combobox';\nimport { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';\nimport {\n dateToKey,\n keyToDate,\n formatDateToTimeString as defaultFormatDateToTimeString,\n getDateStartAnchor,\n getDateEndAnchor,\n getTimesBetween,\n getDateFromTimeString,\n} from './timeMath';\n\n/**\n * Create the state required to render TimePicker.\n *\n * The returned state can be modified with hooks such as useTimePickerStyles_unstable,\n * before being passed to renderTimePicker_unstable.\n *\n * @param props - props from this instance of TimePicker\n * @param ref - reference to root HTMLElement of TimePicker\n */\nexport const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HTMLInputElement>): TimePickerState => {\n const {\n dateAnchor: dateAnchorInProps,\n defaultSelectedTime: defaultSelectedTimeInProps,\n endHour = 24,\n formatDateToTimeString = defaultFormatDateToTimeString,\n hourCycle,\n increment = 30,\n onTimeChange,\n selectedTime: selectedTimeInProps,\n showSeconds = false,\n startHour = 0,\n parseTimeStringToDate: parseTimeStringToDateInProps,\n ...rest\n } = props;\n const { freeform = false } = rest;\n\n const { dateStartAnchor, dateEndAnchor } = useStableDateAnchor(\n dateAnchorInProps ?? selectedTimeInProps ?? defaultSelectedTimeInProps,\n startHour,\n endHour,\n );\n\n const options: TimePickerOption[] = React.useMemo(\n () =>\n getTimesBetween(dateStartAnchor, dateEndAnchor, increment).map(time => ({\n date: time,\n key: dateToKey(time),\n text: formatDateToTimeString(time, { showSeconds, hourCycle }),\n })),\n [dateEndAnchor, dateStartAnchor, formatDateToTimeString, hourCycle, increment, showSeconds],\n );\n\n const [selectedTime, setSelectedTime] = useControllableState<Date | null>({\n state: selectedTimeInProps,\n defaultState: defaultSelectedTimeInProps,\n initialState: null,\n });\n\n const [submittedText, setSubmittedText] = React.useState<string | undefined>(undefined);\n\n const selectTime: TimePickerProps['onTimeChange'] = useEventCallback((e, data) => {\n setSelectedTime(data.selectedTime);\n setSubmittedText(data.selectedTimeText);\n onTimeChange?.(e, data);\n });\n\n const selectedOptions = React.useMemo(() => {\n const selectedTimeKey = dateToKey(selectedTime);\n const selectedOption = options.find(date => date.key === selectedTimeKey);\n return selectedOption ? [selectedOption.key] : [];\n }, [options, selectedTime]);\n\n const clearIconRef = React.useRef<HTMLSpanElement>(null);\n const handleOptionSelect: ComboboxProps['onOptionSelect'] = useEventCallback((e, data) => {\n if (\n freeform &&\n data.optionValue === undefined &&\n !(rest.clearable && e.type === 'click' && e.currentTarget === clearIconRef.current)\n ) {\n // Combobox clears selection when input value not matching any option; but we allow this case in freeform TimePicker.\n return;\n }\n const timeSelectionData: TimeSelectionData = {\n selectedTime: keyToDate(data.optionValue ?? ''),\n selectedTimeText: data.optionText,\n errorType: undefined,\n };\n selectTime(e, timeSelectionData);\n });\n\n const baseState = useCombobox_unstable(\n {\n autoComplete: 'off',\n ...rest,\n selectedOptions,\n onOptionSelect: handleOptionSelect,\n children: options.map(date => (\n <Option key={date.key} value={date.key}>\n {date.text}\n </Option>\n )),\n },\n ref,\n );\n\n const defaultParseTimeStringToDate = React.useCallback(\n (time: string | undefined) =>\n getDateFromTimeString(time, dateStartAnchor, dateEndAnchor, { hourCycle, showSeconds }),\n [dateEndAnchor, dateStartAnchor, hourCycle, showSeconds],\n );\n\n const mergedClearIconRef = useMergedRefs(baseState.clearIcon?.ref, clearIconRef);\n const state: TimePickerState = {\n ...baseState,\n clearIcon: baseState.clearIcon\n ? {\n ...baseState.clearIcon,\n ref: mergedClearIconRef,\n }\n : undefined,\n freeform,\n parseTimeStringToDate: parseTimeStringToDateInProps ?? defaultParseTimeStringToDate,\n submittedText,\n };\n\n useDefaultChevronIconLabel(state);\n useSelectTimeFromValue(state, selectTime);\n\n return state;\n};\n\n/**\n * Provides stable start and end date anchors based on the provided date and time parameters.\n * The hook ensures that the memoization remains consistent even if new Date objects representing the same date are provided.\n */\nconst useStableDateAnchor = (providedDate: Date | undefined, startHour: Hour, endHour: Hour) => {\n const [fallbackDateAnchor] = React.useState(() => new Date());\n\n const providedDateKey = dateToKey(providedDate ?? null);\n\n return React.useMemo(() => {\n const dateAnchor = providedDate ?? fallbackDateAnchor;\n\n const dateStartAnchor = getDateStartAnchor(dateAnchor, startHour);\n const dateEndAnchor = getDateEndAnchor(dateAnchor, startHour, endHour);\n\n return { dateStartAnchor, dateEndAnchor };\n // `providedDate`'s stable key representation is used as dependency instead of the Date object. This ensures that the memoization remains stable when a new Date object representing the same date is passed in.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [endHour, fallbackDateAnchor, providedDateKey, startHour]);\n};\n\n/**\n * Mimics the behavior of the browser's change event for a freeform TimePicker.\n * The provided callback is called when input changed and:\n * - Enter/Tab key is pressed on the input.\n * - TimePicker loses focus, signifying a possible change.\n */\nconst useSelectTimeFromValue = (state: TimePickerState, callback: TimePickerProps['onTimeChange']) => {\n const { getOptionById, freeform, parseTimeStringToDate, submittedText, value, activeDescendantController } = state;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : null;\n }, [activeDescendantController, getOptionById]);\n\n // Base Combobox has activeOption default to first option in dropdown even if it doesn't match input value, and Enter key will select it.\n // This effect ensures that the activeOption is cleared when the input doesn't match any option.\n // This behavior is specific to a freeform TimePicker where the input value is treated as a valid time even if it's not in the dropdown.\n React.useEffect(() => {\n if (freeform && value) {\n const activeOption = getActiveOption();\n if (!activeOption) {\n return;\n }\n\n const valueMatchesActiveOption = activeOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0;\n if (!valueMatchesActiveOption) {\n activeDescendantController.blur();\n }\n }\n }, [freeform, value, activeDescendantController, getActiveOption]);\n\n const selectTimeFromValue = useEventCallback(\n (e: React.KeyboardEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement>) => {\n if (!freeform) {\n return;\n }\n\n const { date: selectedTime, errorType } = parseTimeStringToDate(value);\n\n // Only triggers callback when the text in input has changed.\n if (submittedText !== value) {\n callback?.(e, { selectedTime, selectedTimeText: value, errorType });\n }\n },\n );\n\n const handleKeyDown: ComboboxProps['onKeyDown'] = useEventCallback(e => {\n const activeOption = getActiveOption();\n if (!activeOption && e.key === Enter) {\n selectTimeFromValue(e);\n }\n });\n // eslint-disable-next-line react-hooks/immutability\n state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);\n\n const rootRef = React.useRef<HTMLDivElement>(null);\n // eslint-disable-next-line react-hooks/immutability\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n if (state.listbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n }\n\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n }\n\n const handleInputBlur = useEventCallback((e: React.FocusEvent<HTMLInputElement>) => {\n const isOutside = e.relatedTarget ? !elementContains(rootRef.current, e.relatedTarget) : true;\n if (isOutside) {\n selectTimeFromValue(e);\n }\n });\n // eslint-disable-next-line react-hooks/immutability\n state.input.onBlur = mergeCallbacks(handleInputBlur, state.input.onBlur);\n};\n\n/**\n * Provides a default aria-labelledby for the chevron icon if the TimePicker is wrapped in a Field.\n */\nconst useDefaultChevronIconLabel = (state: TimePickerState) => {\n const fieldContext = useFieldContext();\n const chevronDefaultId = useId('timepicker-chevron-');\n const defaultLabelFromCombobox = 'Open';\n\n if (fieldContext?.labelId && state.expandIcon?.['aria-label'] === defaultLabelFromCombobox) {\n const chevronId = state.expandIcon.id ?? chevronDefaultId;\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;\n }\n};\n"],"names":["React","elementContains","mergeCallbacks","useControllableState","useEventCallback","useId","useMergedRefs","Enter","useCombobox_unstable","Option","useFieldContext_unstable","useFieldContext","dateToKey","keyToDate","formatDateToTimeString","defaultFormatDateToTimeString","getDateStartAnchor","getDateEndAnchor","getTimesBetween","getDateFromTimeString","useTimePicker_unstable","props","ref","baseState","dateAnchor","dateAnchorInProps","defaultSelectedTime","defaultSelectedTimeInProps","endHour","hourCycle","increment","onTimeChange","selectedTime","selectedTimeInProps","showSeconds","startHour","parseTimeStringToDate","parseTimeStringToDateInProps","rest","freeform","dateStartAnchor","dateEndAnchor","useStableDateAnchor","options","useMemo","map","time","date","key","text","setSelectedTime","state","defaultState","initialState","submittedText","setSubmittedText","useState","undefined","selectTime","e","data","selectedTimeText","selectedOptions","selectedTimeKey","selectedOption","find","clearIconRef","useRef","handleOptionSelect","optionValue","clearable","type","currentTarget","current","timeSelectionData","optionText","errorType","autoComplete","onOptionSelect","children","value","defaultParseTimeStringToDate","useCallback","mergedClearIconRef","clearIcon","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","callback","getOptionById","activeDescendantController","getActiveOption","activeOptionId","active","useEffect","activeOption","valueMatchesActiveOption","toLowerCase","indexOf","blur","selectTimeFromValue","handleKeyDown","root","onKeyDown","rootRef","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","input","onBlur","fieldContext","chevronDefaultId","defaultLabelFromCombobox","labelId","chevronId","id"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/TimePicker/useTimePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n elementContains,\n mergeCallbacks,\n useControllableState,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport type { Hour, TimePickerOption, TimePickerProps, TimePickerState, TimeSelectionData } from './TimePicker.types';\nimport type { ComboboxProps } from '@fluentui/react-combobox';\nimport { useCombobox_unstable, Option } from '@fluentui/react-combobox';\nimport { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';\nimport {\n dateToKey,\n keyToDate,\n formatDateToTimeString as defaultFormatDateToTimeString,\n getDateStartAnchor,\n getDateEndAnchor,\n getTimesBetween,\n getDateFromTimeString,\n} from './timeMath';\n\n/**\n * Create the state required to render TimePicker.\n *\n * The returned state can be modified with hooks such as useTimePickerStyles_unstable,\n * before being passed to renderTimePicker_unstable.\n *\n * @param props - props from this instance of TimePicker\n * @param ref - reference to root HTMLElement of TimePicker\n */\nexport const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HTMLInputElement>): TimePickerState => {\n const {\n dateAnchor: dateAnchorInProps,\n defaultSelectedTime: defaultSelectedTimeInProps,\n endHour = 24,\n formatDateToTimeString = defaultFormatDateToTimeString,\n hourCycle,\n increment = 30,\n onTimeChange,\n selectedTime: selectedTimeInProps,\n showSeconds = false,\n startHour = 0,\n parseTimeStringToDate: parseTimeStringToDateInProps,\n ...rest\n } = props;\n const { freeform = false } = rest;\n\n const { dateStartAnchor, dateEndAnchor } = useStableDateAnchor(\n dateAnchorInProps ?? selectedTimeInProps ?? defaultSelectedTimeInProps,\n startHour,\n endHour,\n );\n\n const options: TimePickerOption[] = React.useMemo(\n () =>\n getTimesBetween(dateStartAnchor, dateEndAnchor, increment).map(time => ({\n date: time,\n key: dateToKey(time),\n text: formatDateToTimeString(time, { showSeconds, hourCycle }),\n })),\n [dateEndAnchor, dateStartAnchor, formatDateToTimeString, hourCycle, increment, showSeconds],\n );\n\n const [selectedTime, setSelectedTime] = useControllableState<Date | null>({\n state: selectedTimeInProps,\n defaultState: defaultSelectedTimeInProps,\n initialState: null,\n });\n\n const [submittedText, setSubmittedText] = React.useState<string | undefined>(undefined);\n\n const selectTime: TimePickerProps['onTimeChange'] = useEventCallback((e, data) => {\n setSelectedTime(data.selectedTime);\n setSubmittedText(data.selectedTimeText);\n onTimeChange?.(e, data);\n });\n\n const selectedOptions = React.useMemo(() => {\n const selectedTimeKey = dateToKey(selectedTime);\n const selectedOption = options.find(date => date.key === selectedTimeKey);\n return selectedOption ? [selectedOption.key] : [];\n }, [options, selectedTime]);\n\n const clearIconRef = React.useRef<HTMLSpanElement>(null);\n const handleOptionSelect: ComboboxProps['onOptionSelect'] = useEventCallback((e, data) => {\n if (\n freeform &&\n data.optionValue === undefined &&\n !(rest.clearable && e.type === 'click' && e.currentTarget === clearIconRef.current)\n ) {\n // Combobox clears selection when input value not matching any option; but we allow this case in freeform TimePicker.\n return;\n }\n const timeSelectionData: TimeSelectionData = {\n selectedTime: keyToDate(data.optionValue ?? ''),\n selectedTimeText: data.optionText,\n errorType: undefined,\n };\n selectTime(e, timeSelectionData);\n });\n\n const baseState = useCombobox_unstable(\n {\n autoComplete: 'off',\n ...rest,\n selectedOptions,\n onOptionSelect: handleOptionSelect,\n children: options.map(date => (\n <Option key={date.key} value={date.key}>\n {date.text}\n </Option>\n )),\n },\n ref,\n );\n\n const defaultParseTimeStringToDate = React.useCallback(\n (time: string | undefined) =>\n getDateFromTimeString(time, dateStartAnchor, dateEndAnchor, { hourCycle, showSeconds }),\n [dateEndAnchor, dateStartAnchor, hourCycle, showSeconds],\n );\n\n const mergedClearIconRef = useMergedRefs(baseState.clearIcon?.ref, clearIconRef);\n const state: TimePickerState = {\n ...baseState,\n clearIcon: baseState.clearIcon\n ? {\n ...baseState.clearIcon,\n ref: mergedClearIconRef,\n }\n : undefined,\n freeform,\n parseTimeStringToDate: parseTimeStringToDateInProps ?? defaultParseTimeStringToDate,\n submittedText,\n };\n\n useDefaultChevronIconLabel(state);\n useSelectTimeFromValue(state, selectTime);\n\n return state;\n};\n\n/**\n * Provides stable start and end date anchors based on the provided date and time parameters.\n * The hook ensures that the memoization remains consistent even if new Date objects representing the same date are provided.\n */\nconst useStableDateAnchor = (providedDate: Date | undefined, startHour: Hour, endHour: Hour) => {\n const [fallbackDateAnchor] = React.useState(() => new Date());\n\n const providedDateKey = dateToKey(providedDate ?? null);\n\n return React.useMemo(() => {\n const dateAnchor = providedDate ?? fallbackDateAnchor;\n\n const dateStartAnchor = getDateStartAnchor(dateAnchor, startHour);\n const dateEndAnchor = getDateEndAnchor(dateAnchor, startHour, endHour);\n\n return { dateStartAnchor, dateEndAnchor };\n // `providedDate`'s stable key representation is used as dependency instead of the Date object. This ensures that the memoization remains stable when a new Date object representing the same date is passed in.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [endHour, fallbackDateAnchor, providedDateKey, startHour]);\n};\n\n/**\n * Mimics the behavior of the browser's change event for a freeform TimePicker.\n * The provided callback is called when input changed and:\n * - Enter/Tab key is pressed on the input.\n * - TimePicker loses focus, signifying a possible change.\n */\nconst useSelectTimeFromValue = (state: TimePickerState, callback: TimePickerProps['onTimeChange']) => {\n const { getOptionById, freeform, parseTimeStringToDate, submittedText, value, activeDescendantController } = state;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : null;\n }, [activeDescendantController, getOptionById]);\n\n // Base Combobox has activeOption default to first option in dropdown even if it doesn't match input value, and Enter key will select it.\n // This effect ensures that the activeOption is cleared when the input doesn't match any option.\n // This behavior is specific to a freeform TimePicker where the input value is treated as a valid time even if it's not in the dropdown.\n React.useEffect(() => {\n if (freeform && value) {\n const activeOption = getActiveOption();\n if (!activeOption) {\n return;\n }\n\n const valueMatchesActiveOption = activeOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0;\n if (!valueMatchesActiveOption) {\n activeDescendantController.blur();\n }\n }\n }, [freeform, value, activeDescendantController, getActiveOption]);\n\n const selectTimeFromValue = useEventCallback(\n (e: React.KeyboardEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement>) => {\n if (!freeform) {\n return;\n }\n\n const { date: selectedTime, errorType } = parseTimeStringToDate(value);\n\n // Only triggers callback when the text in input has changed.\n if (submittedText !== value) {\n callback?.(e, { selectedTime, selectedTimeText: value, errorType });\n }\n },\n );\n\n const handleKeyDown: ComboboxProps['onKeyDown'] = useEventCallback(e => {\n const activeOption = getActiveOption();\n if (!activeOption && e.key === Enter) {\n selectTimeFromValue(e);\n }\n });\n // eslint-disable-next-line react-hooks/immutability\n state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);\n\n const rootRef = React.useRef<HTMLDivElement>(null);\n // eslint-disable-next-line react-hooks/immutability\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n if (state.listbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n }\n\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n }\n\n const handleInputBlur = useEventCallback((e: React.FocusEvent<HTMLInputElement>) => {\n const isOutside = e.relatedTarget ? !elementContains(rootRef.current, e.relatedTarget) : true;\n if (isOutside) {\n selectTimeFromValue(e);\n }\n });\n // eslint-disable-next-line react-hooks/immutability\n state.input.onBlur = mergeCallbacks(handleInputBlur, state.input.onBlur);\n};\n\n/**\n * Provides a default aria-labelledby for the chevron icon if the TimePicker is wrapped in a Field.\n */\nconst useDefaultChevronIconLabel = (state: TimePickerState) => {\n const fieldContext = useFieldContext();\n const chevronDefaultId = useId('timepicker-chevron-');\n const defaultLabelFromCombobox = 'Open';\n\n if (fieldContext?.labelId && state.expandIcon?.['aria-label'] === defaultLabelFromCombobox) {\n const chevronId = state.expandIcon.id ?? chevronDefaultId;\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;\n }\n};\n"],"names":["React","elementContains","mergeCallbacks","useControllableState","useEventCallback","useId","useMergedRefs","Enter","useCombobox_unstable","Option","useFieldContext_unstable","useFieldContext","dateToKey","keyToDate","formatDateToTimeString","defaultFormatDateToTimeString","getDateStartAnchor","getDateEndAnchor","getTimesBetween","getDateFromTimeString","useTimePicker_unstable","props","ref","baseState","dateAnchor","dateAnchorInProps","defaultSelectedTime","defaultSelectedTimeInProps","endHour","hourCycle","increment","onTimeChange","selectedTime","selectedTimeInProps","showSeconds","startHour","parseTimeStringToDate","parseTimeStringToDateInProps","rest","freeform","dateStartAnchor","dateEndAnchor","useStableDateAnchor","options","useMemo","map","time","date","key","text","setSelectedTime","state","defaultState","initialState","submittedText","setSubmittedText","useState","undefined","selectTime","e","data","selectedTimeText","selectedOptions","selectedTimeKey","selectedOption","find","clearIconRef","useRef","handleOptionSelect","optionValue","clearable","type","currentTarget","current","timeSelectionData","optionText","errorType","autoComplete","onOptionSelect","children","value","defaultParseTimeStringToDate","useCallback","mergedClearIconRef","clearIcon","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","callback","getOptionById","activeDescendantController","getActiveOption","activeOptionId","active","useEffect","activeOption","valueMatchesActiveOption","toLowerCase","indexOf","blur","selectTimeFromValue","handleKeyDown","root","onKeyDown","rootRef","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","input","onBlur","fieldContext","chevronDefaultId","defaultLabelFromCombobox","labelId","chevronId","id"],"mappings":"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"}
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { useComboboxStyles_unstable } from \"@fluentui/react-combobox\";\nexport const timePickerClassNames = {\n root: 'fui-TimePicker',\n input: 'fui-TimePicker__input',\n expandIcon: 'fui-TimePicker__expandIcon',\n clearIcon: 'fui-TimePicker__clearIcon',\n listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = makeStyles({\n listbox: {\n maxHeight: 'min(80vh, 416px)'\n }\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */ export const useTimePickerStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n }\n if (state.clearIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n }\n if (state.listbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n }\n useComboboxStyles_unstable(state);\n return state;\n};\n"],"names":["__styles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","clearIcon","listbox","useStyles","Bxyxcbc","d","useTimePickerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,oBAAoB;;;IAchBS,4BAA4B;;;;uBAhBJ,gBAAgB;+BACd,0BAA0B;AAC9D,6BAA6B;IAChCR,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,uBAAuB;IAC9BC,UAAU,EAAE,4BAA4B;IACxCC,SAAS,EAAE,2BAA2B;IACtCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAQ,OAAA,EAAA;QAAAE,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AAGS,sCAAsCE,KAAK,IAAG;IACrD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAI,KAAK,CAACT,IAAI,CAACW,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACC,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;IACpF,oDAAA;IACAF,KAAK,CAACR,KAAK,CAACU,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACE,KAAK,EAAEQ,KAAK,CAACR,KAAK,CAACU,SAAS,CAAC;IACvF,IAAIF,KAAK,CAACP,UAAU,EAAE;QAClB,oDAAA;QACAO,KAAK,CAACP,UAAU,CAACS,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACG,UAAU,EAAEO,KAAK,CAACP,UAAU,CAACS,SAAS,CAAC;IAC1G;IACA,IAAIF,KAAK,CAACN,SAAS,EAAE;QACjB,oDAAA;QACAM,KAAK,CAACN,SAAS,CAACQ,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACI,SAAS,EAAEM,KAAK,CAACN,SAAS,CAACQ,SAAS,CAAC;IACvG;IACA,IAAIF,KAAK,CAACL,OAAO,EAAE;QACf,oDAAA;QACAK,KAAK,CAACL,OAAO,CAACO,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACK,OAAO,EAAEM,MAAM,CAACN,OAAO,EAAEK,KAAK,CAACL,OAAO,CAACO,SAAS,CAAC;IACjH;QACAb,yCAA0B,EAACW,KAAK,CAAC;IACjC,OAAOA,KAAK;AAChB,CAAC"}
@@ -25,4 +25,4 @@ _export(exports, {
25
25
  return _TimePicker.useTimePicker_unstable;
26
26
  }
27
27
  });
28
- const _TimePicker = require("./TimePicker");
28
+ const _TimePicker = require("./TimePicker.cjs");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n TimePicker,\n timePickerClassNames,\n useTimePickerStyles_unstable,\n useTimePicker_unstable,\n formatDateToTimeString,\n} from './TimePicker';\nexport type {\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimePickerErrorType,\n} from './TimePicker';\n"],"names":["TimePicker","timePickerClassNames","useTimePickerStyles_unstable","useTimePicker_unstable","formatDateToTimeString"],"mappings":";;;;;;;;;;;;eACEA,sBAAU;;;eAIVI,kCAAsB;;;eAHtBH,gCAAoB;;;eACpBC,wCAA4B;;;eAC5BC,kCAAsB;;;4BAEjB,eAAe"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n TimePicker,\n timePickerClassNames,\n useTimePickerStyles_unstable,\n useTimePicker_unstable,\n formatDateToTimeString,\n} from './TimePicker';\nexport type {\n TimePickerProps,\n TimePickerSlots,\n TimePickerState,\n TimeSelectionData,\n TimeSelectionEvents,\n TimePickerErrorType,\n} from './TimePicker';\n"],"names":["TimePicker","timePickerClassNames","useTimePickerStyles_unstable","useTimePicker_unstable","formatDateToTimeString"],"mappings":";;;;;;;;;;;;eACEA,sBAAU;;;eAIVI,kCAAsB;;;eAHtBH,gCAAoB;;;eACpBC,wCAA4B;;;eAC5BC,kCAAsB;;;4BAEjB,kBAAe"}
package/package.json CHANGED
@@ -1,14 +1,15 @@
1
1
  {
2
2
  "name": "@fluentui/react-timepicker-compat",
3
- "version": "0.4.37",
3
+ "version": "0.4.39",
4
4
  "description": "Fluent UI TimePicker Compat Component",
5
- "main": "lib-commonjs/index.js",
5
+ "main": "lib-commonjs/index.cjs",
6
6
  "module": "lib/index.js",
7
7
  "typings": "./dist/index.d.ts",
8
8
  "sideEffects": false,
9
9
  "files": [
10
10
  "*.md",
11
11
  "dist/*.d.ts",
12
+ "dist/*.d.cts",
12
13
  "lib",
13
14
  "lib-commonjs"
14
15
  ],
@@ -18,28 +19,32 @@
18
19
  },
19
20
  "license": "MIT",
20
21
  "dependencies": {
21
- "@fluentui/keyboard-keys": "^9.0.8",
22
- "@fluentui/react-combobox": "^9.17.4",
23
- "@fluentui/react-field": "^9.5.3",
24
- "@fluentui/react-jsx-runtime": "^9.4.4",
25
- "@fluentui/react-shared-contexts": "^9.26.2",
26
- "@fluentui/react-theme": "^9.2.1",
27
- "@fluentui/react-utilities": "^9.26.5",
22
+ "@fluentui/keyboard-keys": "^9.0.9",
23
+ "@fluentui/react-combobox": "^9.17.5",
24
+ "@fluentui/react-field": "^9.5.4",
25
+ "@fluentui/react-jsx-runtime": "^9.4.5",
26
+ "@fluentui/react-shared-contexts": "^9.26.3",
27
+ "@fluentui/react-theme": "^9.2.2",
28
+ "@fluentui/react-utilities": "^9.26.6",
28
29
  "@griffel/react": "^1.5.32",
29
30
  "@swc/helpers": "^0.5.1"
30
31
  },
31
32
  "peerDependencies": {
32
- "@types/react": ">=16.8.0 <20.0.0",
33
- "@types/react-dom": ">=16.8.0 <20.0.0",
34
- "react": ">=16.8.0 <20.0.0",
35
- "react-dom": ">=16.8.0 <20.0.0"
33
+ "@types/react": ">=16.14.0 <20.0.0",
34
+ "@types/react-dom": ">=16.9.0 <20.0.0",
35
+ "react": ">=16.14.0 <20.0.0",
36
+ "react-dom": ">=16.14.0 <20.0.0"
36
37
  },
37
38
  "exports": {
38
39
  ".": {
39
- "types": "./dist/index.d.ts",
40
- "node": "./lib-commonjs/index.js",
41
- "import": "./lib/index.js",
42
- "require": "./lib-commonjs/index.js"
40
+ "import": {
41
+ "types": "./dist/index.d.ts",
42
+ "default": "./lib/index.js"
43
+ },
44
+ "require": {
45
+ "types": "./dist/index.d.cts",
46
+ "default": "./lib-commonjs/index.cjs"
47
+ }
43
48
  },
44
49
  "./package.json": "./package.json"
45
50
  },
@@ -48,5 +53,6 @@
48
53
  "major",
49
54
  "prerelease"
50
55
  ]
51
- }
56
+ },
57
+ "type": "module"
52
58
  }
@@ -1 +0,0 @@
1
- {"version":3,"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\nexport const timePickerClassNames = {\n root: 'fui-TimePicker',\n input: 'fui-TimePicker__input',\n expandIcon: 'fui-TimePicker__expandIcon',\n clearIcon: 'fui-TimePicker__clearIcon',\n listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = makeStyles({\n listbox: {\n maxHeight: 'min(80vh, 416px)'\n }\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */ export const useTimePickerStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n }\n if (state.clearIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n }\n if (state.listbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n }\n useComboboxStyles_unstable(state);\n return state;\n};\n"],"names":["__styles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","clearIcon","listbox","useStyles","Bxyxcbc","d","useTimePickerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,oBAAoB;;;IAchBS,4BAA4B;;;;uBAhBJ,gBAAgB;+BACd,0BAA0B;AAC9D,6BAA6B;IAChCR,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,uBAAuB;IAC9BC,UAAU,EAAE,4BAA4B;IACxCC,SAAS,EAAE,2BAA2B;IACtCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAQ,OAAA,EAAA;QAAAE,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AAGS,sCAAsCE,KAAK,IAAG;IACrD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAI,KAAK,CAACT,IAAI,CAACW,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACC,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;IACpF,oDAAA;IACAF,KAAK,CAACR,KAAK,CAACU,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACE,KAAK,EAAEQ,KAAK,CAACR,KAAK,CAACU,SAAS,CAAC;IACvF,IAAIF,KAAK,CAACP,UAAU,EAAE;QAClB,oDAAA;QACAO,KAAK,CAACP,UAAU,CAACS,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACG,UAAU,EAAEO,KAAK,CAACP,UAAU,CAACS,SAAS,CAAC;IAC1G;IACA,IAAIF,KAAK,CAACN,SAAS,EAAE;QACjB,oDAAA;QACAM,KAAK,CAACN,SAAS,CAACQ,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACI,SAAS,EAAEM,KAAK,CAACN,SAAS,CAACQ,SAAS,CAAC;IACvG;IACA,IAAIF,KAAK,CAACL,OAAO,EAAE;QACf,oDAAA;QACAK,KAAK,CAACL,OAAO,CAACO,SAAS,OAAGd,mBAAY,EAACE,oBAAoB,CAACK,OAAO,EAAEM,MAAM,CAACN,OAAO,EAAEK,KAAK,CAACL,OAAO,CAACO,SAAS,CAAC;IACjH;QACAb,yCAA0B,EAACW,KAAK,CAAC;IACjC,OAAOA,KAAK;AAChB,CAAC"}