@fluentui/react-timepicker-compat 0.0.0-nightly-20250423-0405.1 → 0.0.0-nightly-20250423-1415.1

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

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTimePicker_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTimePicker_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _keyboardkeys = require("@fluentui/keyboard-keys");
+const _reactcombobox = require("@fluentui/react-combobox");
+const _reactfield = require("@fluentui/react-field");
+const _timeMath = require("./timeMath");
+const useTimePicker_unstable = (props, ref)=>{
+    var _baseState_clearIcon;
+    const { dateAnchor: dateAnchorInProps, defaultSelectedTime: defaultSelectedTimeInProps, endHour = 24, formatDateToTimeString = _timeMath.formatDateToTimeString, hourCycle, increment = 30, onTimeChange, selectedTime: selectedTimeInProps, showSeconds = false, startHour = 0, parseTimeStringToDate: parseTimeStringToDateInProps, ...rest } = props;
+    const { freeform = false } = rest;
+    var _ref;
+    const { dateStartAnchor, dateEndAnchor } = useStableDateAnchor((_ref = dateAnchorInProps !== null && dateAnchorInProps !== void 0 ? dateAnchorInProps : selectedTimeInProps) !== null && _ref !== void 0 ? _ref : defaultSelectedTimeInProps, startHour, endHour);
+    const options = _react.useMemo(()=>(0, _timeMath.getTimesBetween)(dateStartAnchor, dateEndAnchor, increment).map((time)=>({
+                date: time,
+                key: (0, _timeMath.dateToKey)(time),
+                text: formatDateToTimeString(time, {
+                    showSeconds,
+                    hourCycle
+                })
+            })), [
+        dateEndAnchor,
+        dateStartAnchor,
+        formatDateToTimeString,
+        hourCycle,
+        increment,
+        showSeconds
+    ]);
+    const [selectedTime, setSelectedTime] = (0, _reactutilities.useControllableState)({
+        state: selectedTimeInProps,
+        defaultState: defaultSelectedTimeInProps,
+        initialState: null
+    });
+    const [submittedText, setSubmittedText] = _react.useState(undefined);
+    const selectTime = (0, _reactutilities.useEventCallback)((e, data)=>{
+        setSelectedTime(data.selectedTime);
+        setSubmittedText(data.selectedTimeText);
+        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(e, data);
+    });
+    const selectedOptions = _react.useMemo(()=>{
+        const selectedTimeKey = (0, _timeMath.dateToKey)(selectedTime);
+        const selectedOption = options.find((date)=>date.key === selectedTimeKey);
+        return selectedOption ? [
+            selectedOption.key
+        ] : [];
+    }, [
+        options,
+        selectedTime
+    ]);
+    const clearIconRef = _react.useRef(null);
+    const handleOptionSelect = (0, _reactutilities.useEventCallback)((e, data)=>{
+        if (freeform && data.optionValue === undefined && !(rest.clearable && e.type === 'click' && e.currentTarget === clearIconRef.current)) {
+            // Combobox clears selection when input value not matching any option; but we allow this case in freeform TimePicker.
+            return;
+        }
+        var _data_optionValue;
+        const timeSelectionData = {
+            selectedTime: (0, _timeMath.keyToDate)((_data_optionValue = data.optionValue) !== null && _data_optionValue !== void 0 ? _data_optionValue : ''),
+            selectedTimeText: data.optionText,
+            errorType: undefined
+        };
+        selectTime(e, timeSelectionData);
+    });
+    const baseState = (0, _reactcombobox.useCombobox_unstable)({
+        autoComplete: 'off',
+        ...rest,
+        selectedOptions,
+        onOptionSelect: handleOptionSelect,
+        children: options.map((date)=>/*#__PURE__*/ _react.createElement(_reactcombobox.Option, {
+                key: date.key,
+                value: date.key
+            }, date.text))
+    }, ref);
+    const defaultParseTimeStringToDate = _react.useCallback((time)=>(0, _timeMath.getDateFromTimeString)(time, dateStartAnchor, dateEndAnchor, {
+            hourCycle,
+            showSeconds
+        }), [
+        dateEndAnchor,
+        dateStartAnchor,
+        hourCycle,
+        showSeconds
+    ]);
+    const mergedClearIconRef = (0, _reactutilities.useMergedRefs)((_baseState_clearIcon = baseState.clearIcon) === null || _baseState_clearIcon === void 0 ? void 0 : _baseState_clearIcon.ref, clearIconRef);
+    const state = {
+        ...baseState,
+        clearIcon: baseState.clearIcon ? {
+            ...baseState.clearIcon,
+            ref: mergedClearIconRef
+        } : undefined,
+        freeform,
+        parseTimeStringToDate: parseTimeStringToDateInProps !== null && parseTimeStringToDateInProps !== void 0 ? parseTimeStringToDateInProps : defaultParseTimeStringToDate,
+        submittedText
+    };
+    useDefaultChevronIconLabel(state);
+    useSelectTimeFromValue(state, selectTime);
+    return state;
+};
+/**
+ * Provides stable start and end date anchors based on the provided date and time parameters.
+ * The hook ensures that the memoization remains consistent even if new Date objects representing the same date are provided.
+ */ const useStableDateAnchor = (providedDate, startHour, endHour)=>{
+    const [fallbackDateAnchor] = _react.useState(()=>new Date());
+    const providedDateKey = (0, _timeMath.dateToKey)(providedDate !== null && providedDate !== void 0 ? providedDate : null);
+    return _react.useMemo(()=>{
+        const dateAnchor = providedDate !== null && providedDate !== void 0 ? providedDate : fallbackDateAnchor;
+        const dateStartAnchor = (0, _timeMath.getDateStartAnchor)(dateAnchor, startHour);
+        const dateEndAnchor = (0, _timeMath.getDateEndAnchor)(dateAnchor, startHour, endHour);
+        return {
+            dateStartAnchor,
+            dateEndAnchor
+        };
+    // `providedDate`'s stable key representation is used as dependency instead of the Date object. This ensures that the memoization remains stable when a new Date object representing the same date is passed in.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        endHour,
+        fallbackDateAnchor,
+        providedDateKey,
+        startHour
+    ]);
+};
+/**
+ * Mimics the behavior of the browser's change event for a freeform TimePicker.
+ * The provided callback is called when input changed and:
+ * - Enter/Tab key is pressed on the input.
+ * - TimePicker loses focus, signifying a possible change.
+ */ const useSelectTimeFromValue = (state, callback)=>{
+    const { getOptionById, freeform, parseTimeStringToDate, submittedText, value, activeDescendantController } = state;
+    const getActiveOption = _react.useCallback(()=>{
+        const activeOptionId = activeDescendantController.active();
+        return activeOptionId ? getOptionById(activeOptionId) : null;
+    }, [
+        activeDescendantController,
+        getOptionById
+    ]);
+    // Base Combobox has activeOption default to first option in dropdown even if it doesn't match input value, and Enter key will select it.
+    // This effect ensures that the activeOption is cleared when the input doesn't match any option.
+    // This behavior is specific to a freeform TimePicker where the input value is treated as a valid time even if it's not in the dropdown.
+    _react.useEffect(()=>{
+        if (freeform && value) {
+            const activeOption = getActiveOption();
+            if (!activeOption) {
+                return;
+            }
+            const valueMatchesActiveOption = activeOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0;
+            if (!valueMatchesActiveOption) {
+                activeDescendantController.blur();
+            }
+        }
+    }, [
+        freeform,
+        value,
+        activeDescendantController,
+        getActiveOption
+    ]);
+    const selectTimeFromValue = (0, _reactutilities.useEventCallback)((e)=>{
+        if (!freeform) {
+            return;
+        }
+        const { date: selectedTime, errorType } = parseTimeStringToDate(value);
+        // Only triggers callback when the text in input has changed.
+        if (submittedText !== value) {
+            callback === null || callback === void 0 ? void 0 : callback(e, {
+                selectedTime,
+                selectedTimeText: value,
+                errorType
+            });
+        }
+    });
+    const handleKeyDown = (0, _reactutilities.useEventCallback)((e)=>{
+        const activeOption = getActiveOption();
+        if (!activeOption && e.key === _keyboardkeys.Enter) {
+            selectTimeFromValue(e);
+        }
+    });
+    state.root.onKeyDown = (0, _reactutilities.mergeCallbacks)(handleKeyDown, state.root.onKeyDown);
+    const rootRef = _react.useRef(null);
+    state.root.ref = (0, _reactutilities.useMergedRefs)(state.root.ref, rootRef);
+    if (state.listbox) {
+        state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.
+    }
+    if (state.expandIcon) {
+        state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.
+    }
+    const handleInputBlur = (0, _reactutilities.useEventCallback)((e)=>{
+        const isOutside = e.relatedTarget ? !(0, _reactutilities.elementContains)(rootRef.current, e.relatedTarget) : true;
+        if (isOutside) {
+            selectTimeFromValue(e);
+        }
+    });
+    state.input.onBlur = (0, _reactutilities.mergeCallbacks)(handleInputBlur, state.input.onBlur);
+};
+/**
+ * Provides a default aria-labelledby for the chevron icon if the TimePicker is wrapped in a Field.
+ */ const useDefaultChevronIconLabel = (state)=>{
+    var _state_expandIcon;
+    const fieldContext = (0, _reactfield.useFieldContext_unstable)();
+    const chevronDefaultId = (0, _reactutilities.useId)('timepicker-chevron-');
+    const defaultLabelFromCombobox = 'Open';
+    if ((fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.labelId) && ((_state_expandIcon = state.expandIcon) === null || _state_expandIcon === void 0 ? void 0 : _state_expandIcon['aria-label']) === defaultLabelFromCombobox) {
+        var _state_expandIcon_id;
+        const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : chevronDefaultId;
+        state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;
+    }
+};

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

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

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    timePickerClassNames: function() {
+        return timePickerClassNames;
+    },
+    useTimePickerStyles_unstable: function() {
+        return useTimePickerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactcombobox = require("@fluentui/react-combobox");
+const timePickerClassNames = {
+    root: 'fui-TimePicker',
+    input: 'fui-TimePicker__input',
+    expandIcon: 'fui-TimePicker__expandIcon',
+    clearIcon: 'fui-TimePicker__clearIcon',
+    listbox: 'fui-TimePicker__listbox'
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    listbox: {
+        Bxyxcbc: "f1vfnyiv"
+    }
+}, {
+    d: [
+        ".f1vfnyiv{max-height:min(80vh, 416px);}"
+    ]
+});
+const useTimePickerStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(timePickerClassNames.root, state.root.className);
+    state.input.className = (0, _react.mergeClasses)(timePickerClassNames.input, state.input.className);
+    if (state.expandIcon) {
+        state.expandIcon.className = (0, _react.mergeClasses)(timePickerClassNames.expandIcon, state.expandIcon.className);
+    }
+    if (state.clearIcon) {
+        state.clearIcon.className = (0, _react.mergeClasses)(timePickerClassNames.clearIcon, state.clearIcon.className);
+    }
+    if (state.listbox) {
+        state.listbox.className = (0, _react.mergeClasses)(timePickerClassNames.listbox, styles.listbox, state.listbox.className);
+    }
+    (0, _reactcombobox.useComboboxStyles_unstable)(state);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\nexport const timePickerClassNames = {\n    root: 'fui-TimePicker',\n    input: 'fui-TimePicker__input',\n    expandIcon: 'fui-TimePicker__expandIcon',\n    clearIcon: 'fui-TimePicker__clearIcon',\n    listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = makeStyles({\n    listbox: {\n        maxHeight: 'min(80vh, 416px)'\n    }\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */ export const useTimePickerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);\n    state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);\n    }\n    if (state.clearIcon) {\n        state.clearIcon.className = mergeClasses(timePickerClassNames.clearIcon, state.clearIcon.className);\n    }\n    if (state.listbox) {\n        state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n    }\n    useComboboxStyles_unstable(state);\n    return state;\n};\n"],"names":["timePickerClassNames","useTimePickerStyles_unstable","root","input","expandIcon","clearIcon","listbox","useStyles","__styles","Bxyxcbc","d","state","styles","className","mergeClasses","useComboboxStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAcIC,4BAA4B;eAA5BA;;;uBAhBwB;+BACE;AACpC,MAAMD,uBAAuB;IAChCE,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,WAAW;IACXC,SAAS;AACb;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,SAAA;QAAAG,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;KAAA;AAAA;AAOP,MAAMT,+BAAgCU,CAAAA;IAC7C;IACA,MAAMC,SAASL;IACfI,MAAMT,IAAI,CAACW,SAAS,GAAGC,IAAAA,mBAAY,EAACd,qBAAqBE,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IACnFF,MAAMR,KAAK,CAACU,SAAS,GAAGC,IAAAA,mBAAY,EAACd,qBAAqBG,KAAK,EAAEQ,MAAMR,KAAK,CAACU,SAAS;IACtF,IAAIF,MAAMP,UAAU,EAAE;QAClBO,MAAMP,UAAU,CAACS,SAAS,GAAGC,IAAAA,mBAAY,EAACd,qBAAqBI,UAAU,EAAEO,MAAMP,UAAU,CAACS,SAAS;IACzG;IACA,IAAIF,MAAMN,SAAS,EAAE;QACjBM,MAAMN,SAAS,CAACQ,SAAS,GAAGC,IAAAA,mBAAY,EAACd,qBAAqBK,SAAS,EAAEM,MAAMN,SAAS,CAACQ,SAAS;IACtG;IACA,IAAIF,MAAML,OAAO,EAAE;QACfK,MAAML,OAAO,CAACO,SAAS,GAAGC,IAAAA,mBAAY,EAACd,qBAAqBM,OAAO,EAAEM,OAAON,OAAO,EAAEK,MAAML,OAAO,CAACO,SAAS;IAChH;IACAE,IAAAA,yCAA0B,EAACJ;IAC3B,OAAOA;AACX"}

package/lib-commonjs/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TimePicker: function() {
+        return _TimePicker.TimePicker;
+    },
+    formatDateToTimeString: function() {
+        return _TimePicker.formatDateToTimeString;
+    },
+    timePickerClassNames: function() {
+        return _TimePicker.timePickerClassNames;
+    },
+    useTimePickerStyles_unstable: function() {
+        return _TimePicker.useTimePickerStyles_unstable;
+    },
+    useTimePicker_unstable: function() {
+        return _TimePicker.useTimePicker_unstable;
+    }
+});
+const _TimePicker = require("./TimePicker");

package/lib-commonjs/index.js.map

@@ -0,0 +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","formatDateToTimeString","timePickerClassNames","useTimePickerStyles_unstable","useTimePicker_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,UAAU;eAAVA,sBAAU;;IAIVC,sBAAsB;eAAtBA,kCAAsB;;IAHtBC,oBAAoB;eAApBA,gCAAoB;;IACpBC,4BAA4B;eAA5BA,wCAA4B;;IAC5BC,sBAAsB;eAAtBA,kCAAsB;;;4BAEjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-timepicker-compat",
-  "version": "0.0.0-nightly-20250423-0405.1",
+  "version": "0.0.0-nightly-20250423-1415.1",
   "description": "Fluent UI TimePicker Compat Component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,22 +18,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react-provider": "0.0.0-nightly-20250423-0405.1",
-    "@fluentui/react-components": "0.0.0-nightly-20250423-0405.1",
+    "@fluentui/react-provider": "0.0.0-nightly-20250423-1415.1",
+    "@fluentui/react-components": "0.0.0-nightly-20250423-1415.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20250423-0405.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250423-0405.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20250423-1415.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250423-1415.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20250423-0405.1",
-    "@fluentui/react-combobox": "0.0.0-nightly-20250423-0405.1",
-    "@fluentui/react-field": "0.0.0-nightly-20250423-0405.1",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250423-0405.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20250423-0405.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20250423-0405.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20250423-0405.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20250423-1415.1",
+    "@fluentui/react-combobox": "0.0.0-nightly-20250423-1415.1",
+    "@fluentui/react-field": "0.0.0-nightly-20250423-1415.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250423-1415.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20250423-1415.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20250423-1415.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20250423-1415.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },