@fluentui/react-timepicker-compat 0.0.1

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

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

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

@@ -0,0 +1,48 @@
+"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',
+    listbox: 'fui-TimePicker__listbox'
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    listbox: {
+        Bxyxcbc: "f1vfnyiv"
+    }
+}, {
+    d: [
+        ".f1vfnyiv{max-height:min(80vh, 416px);}"
+    ]
+});
+const useTimePickerStyles_unstable = (state)=>{
+    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.listbox) {
+        state.listbox.className = (0, _react.mergeClasses)(timePickerClassNames.listbox, styles.listbox, state.listbox.className);
+    }
+    (0, _reactcombobox.useComboboxStyles_unstable)(state);
+    return state;
+}; //# sourceMappingURL=useTimePickerStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["import { __styles, 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  listbox: 'fui-TimePicker__listbox'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  listbox: {\n    Bxyxcbc: \"f1vfnyiv\"\n  }\n}, {\n  d: [\".f1vfnyiv{max-height:min(80vh, 416px);}\"]\n});\n/**\n * Apply styling to the TimePicker slots based on the state\n */\nexport const useTimePickerStyles_unstable = state => {\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.listbox) {\n    state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);\n  }\n  useComboboxStyles_unstable(state);\n  return state;\n};\n//# sourceMappingURL=useTimePickerStyles.styles.js.map"],"names":["timePickerClassNames","useTimePickerStyles_unstable","root","input","expandIcon","listbox","useStyles","__styles","Bxyxcbc","d","state","styles","className","mergeClasses","useComboboxStyles_unstable"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAgBAC,4BAA4B;eAA5BA;;;uBAlB0B;+BACI;AACpC,MAAMD,uBAAuB;IAClCE,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,SAAS;AACX;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,SAAS;QACPG,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;KAA0C;AAChD;AAIO,MAAMR,+BAA+BS,CAAAA;IAC1C,MAAMC,SAASL;IACfI,MAAMR,IAAI,CAACU,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBE,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IACnFF,MAAMP,KAAK,CAACS,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBG,KAAK,EAAEO,MAAMP,KAAK,CAACS,SAAS;IACtF,IAAIF,MAAMN,UAAU,EAAE;QACpBM,MAAMN,UAAU,CAACQ,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBI,UAAU,EAAEM,MAAMN,UAAU,CAACQ,SAAS;IACvG;IACA,IAAIF,MAAML,OAAO,EAAE;QACjBK,MAAML,OAAO,CAACO,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBK,OAAO,EAAEM,OAAON,OAAO,EAAEK,MAAML,OAAO,CAACO,SAAS;IAC9G;IACAE,IAAAA,yCAA0B,EAACJ;IAC3B,OAAOA;AACT,GACA,sDAAsD"}

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;
+    },
+    timePickerClassNames: function() {
+        return _TimePicker.timePickerClassNames;
+    },
+    useTimePickerStyles_unstable: function() {
+        return _TimePicker.useTimePickerStyles_unstable;
+    },
+    useTimePicker_unstable: function() {
+        return _TimePicker.useTimePicker_unstable;
+    },
+    formatDateToTimeString: function() {
+        return _TimePicker.formatDateToTimeString;
+    }
+});
+const _TimePicker = require("./TimePicker");

package/lib-commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export { TimePicker, timePickerClassNames, useTimePickerStyles_unstable, useTimePicker_unstable, formatDateToTimeString } from './TimePicker';\n"],"names":["TimePicker","timePickerClassNames","useTimePickerStyles_unstable","useTimePicker_unstable","formatDateToTimeString"],"mappings":";;;;;;;;;;;IAASA,UAAU;eAAVA,sBAAU;;IAAEC,oBAAoB;eAApBA,gCAAoB;;IAAEC,4BAA4B;eAA5BA,wCAA4B;;IAAEC,sBAAsB;eAAtBA,kCAAsB;;IAAEC,sBAAsB;eAAtBA,kCAAsB;;;4BAAQ"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@fluentui/react-timepicker-compat",
+  "version": "0.0.1",
+  "description": "Fluent UI TimePicker Compat Component",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "*.md",
+    "dist/*.d.ts",
+    "lib",
+    "lib-commonjs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "just-scripts build",
+    "bundle-size": "monosize measure",
+    "clean": "just-scripts clean",
+    "e2e": "cypress run --component",
+    "e2e:local": "cypress open --component",
+    "generate-api": "just-scripts generate-api",
+    "lint": "just-scripts lint",
+    "start": "yarn storybook",
+    "storybook": "start-storybook",
+    "test": "jest --passWithNoTests",
+    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\"",
+    "type-check": "tsc -b tsconfig.json"
+  },
+  "devDependencies": {
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-griffel": "*",
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-tasks": "*"
+  },
+  "dependencies": {
+    "@fluentui/keyboard-keys": "^9.0.7",
+    "@fluentui/react-combobox": "^9.5.37",
+    "@fluentui/react-field": "^9.1.46",
+    "@fluentui/react-jsx-runtime": "^9.0.23",
+    "@fluentui/react-shared-contexts": "^9.13.2",
+    "@fluentui/react-theme": "^9.1.16",
+    "@fluentui/react-utilities": "^9.15.5",
+    "@griffel/react": "^1.5.14",
+    "@swc/helpers": "^0.5.1"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  }
+}