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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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 handleOptionSelect: ComboboxProps['onOptionSelect'] = 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    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 state: TimePickerState = {\n    ...baseState,\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 { activeOption, freeform, parseTimeStringToDate, submittedText, setActiveOption, value } = state;\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      setActiveOption(prevActiveOption => {\n        if (prevActiveOption?.text && prevActiveOption.text.toLowerCase().indexOf(value.toLowerCase()) === 0) {\n          return prevActiveOption;\n        }\n        return undefined;\n      });\n    }\n  }, [freeform, setActiveOption, value]);\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    if (!activeOption && e.key === Enter) {\n      selectTimeFromValue(e);\n    }\n  });\n  state.root.onKeyDown = mergeCallbacks(handleKeyDown, state.root.onKeyDown);\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  if (state.listbox) {\n    state.listbox.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.tabIndex = -1; // allows it to be the relatedTarget of a blur event.\n  }\n\n  const handleInputBlur = useEventCallback((e: React.FocusEvent<HTMLInputElement>) => {\n    const isOutside = e.relatedTarget ? !elementContains(rootRef.current, e.relatedTarget) : true;\n    if (isOutside) {\n      selectTimeFromValue(e);\n    }\n  });\n  state.input.onBlur = mergeCallbacks(handleInputBlur, state.input.onBlur);\n};\n\n/**\n * Provides a default aria-labelledby for the chevron icon if the TimePicker is wrapped in a Field.\n */\nconst useDefaultChevronIconLabel = (state: TimePickerState) => {\n  const fieldContext = useFieldContext();\n  const chevronDefaultId = useId('timepicker-chevron-');\n  const defaultLabelFromCombobox = 'Open';\n\n  if (fieldContext?.labelId && state.expandIcon?.['aria-label'] === defaultLabelFromCombobox) {\n    const chevronId = state.expandIcon.id ?? chevronDefaultId;\n    state.expandIcon['aria-labelledby'] = `${chevronId} ${fieldContext.labelId}`;\n  }\n};\n"],"names":["React","elementContains","mergeCallbacks","useControllableState","useEventCallback","useId","useMergedRefs","Enter","useCombobox_unstable","Option","useFieldContext_unstable","useFieldContext","dateToKey","keyToDate","formatDateToTimeString","defaultFormatDateToTimeString","getDateStartAnchor","getDateEndAnchor","getTimesBetween","getDateFromTimeString","useTimePicker_unstable","props","ref","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","handleOptionSelect","optionValue","timeSelectionData","optionText","errorType","baseState","autoComplete","onOptionSelect","children","value","defaultParseTimeStringToDate","useCallback","useDefaultChevronIconLabel","useSelectTimeFromValue","providedDate","fallbackDateAnchor","Date","providedDateKey","callback","activeOption","setActiveOption","useEffect","prevActiveOption","toLowerCase","indexOf","selectTimeFromValue","handleKeyDown","root","onKeyDown","rootRef","useRef","listbox","tabIndex","expandIcon","handleInputBlur","isOutside","relatedTarget","current","input","onBlur","fieldContext","chevronDefaultId","defaultLabelFromCombobox","labelId","chevronId","id"],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { useComboboxStyles_unstable } from '@fluentui/react-combobox';
+export const timePickerClassNames = {
+  root: 'fui-TimePicker',
+  input: 'fui-TimePicker__input',
+  expandIcon: 'fui-TimePicker__expandIcon',
+  listbox: 'fui-TimePicker__listbox'
+};
+const useStyles = /*#__PURE__*/__styles({
+  listbox: {
+    Bxyxcbc: "f1vfnyiv"
+  }
+}, {
+  d: [".f1vfnyiv{max-height:min(80vh, 416px);}"]
+});
+/**
+ * Apply styling to the TimePicker slots based on the state
+ */
+export const useTimePickerStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(timePickerClassNames.root, state.root.className);
+  state.input.className = mergeClasses(timePickerClassNames.input, state.input.className);
+  if (state.expandIcon) {
+    state.expandIcon.className = mergeClasses(timePickerClassNames.expandIcon, state.expandIcon.className);
+  }
+  if (state.listbox) {
+    state.listbox.className = mergeClasses(timePickerClassNames.listbox, styles.listbox, state.listbox.className);
+  }
+  useComboboxStyles_unstable(state);
+  return state;
+};
+//# sourceMappingURL=useTimePickerStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","useComboboxStyles_unstable","timePickerClassNames","root","input","expandIcon","listbox","useStyles","Bxyxcbc","d","useTimePickerStyles_unstable","state","styles","className"],"sources":["useTimePickerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useComboboxStyles_unstable } from '@fluentui/react-combobox';\nexport const timePickerClassNames = {\n    root: 'fui-TimePicker',\n    input: 'fui-TimePicker__input',\n    expandIcon: 'fui-TimePicker__expandIcon',\n    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    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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE,4BAA4B;EACxCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,gBAAGR,QAAA;EAAAO,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;EAC1BI,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EACpFF,KAAK,CAACP,KAAK,CAACS,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACE,KAAK,EAAEO,KAAK,CAACP,KAAK,CAACS,SAAS,CAAC;EACvF,IAAIF,KAAK,CAACN,UAAU,EAAE;IAClBM,KAAK,CAACN,UAAU,CAACQ,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACG,UAAU,EAAEM,KAAK,CAACN,UAAU,CAACQ,SAAS,CAAC;EAC1G;EACA,IAAIF,KAAK,CAACL,OAAO,EAAE;IACfK,KAAK,CAACL,OAAO,CAACO,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACI,OAAO,EAAEM,MAAM,CAACN,OAAO,EAAEK,KAAK,CAACL,OAAO,CAACO,SAAS,CAAC;EACjH;EACAZ,0BAA0B,CAACU,KAAK,CAAC;EACjC,OAAOA,KAAK;AAChB,CAAC"}

package/lib/index.js

@@ -0,0 +1 @@
+export { TimePicker, timePickerClassNames, useTimePickerStyles_unstable, useTimePicker_unstable, formatDateToTimeString } from './TimePicker';

package/lib/index.js.map

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

package/lib-commonjs/TimePicker.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/TimePicker/index"), exports);

package/lib-commonjs/TimePicker.js.map

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

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TimePicker", {
+    enumerable: true,
+    get: function() {
+        return TimePicker;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useTimePicker = require("./useTimePicker");
+const _useTimePickerStylesstyles = require("./useTimePickerStyles.styles");
+const _reactcombobox = require("@fluentui/react-combobox");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const TimePicker = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTimePicker.useTimePicker_unstable)(props, ref);
+    const contextValues = (0, _reactcombobox.useComboboxContextValues)(state);
+    (0, _useTimePickerStylesstyles.useTimePickerStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTimePickerCompatStyles_unstable')(state);
+    return (0, _reactcombobox.renderCombobox_unstable)(state, contextValues);
+});
+TimePicker.displayName = 'TimePicker';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TimePicker.js"],"sourcesContent":["import * as React from 'react';\nimport { useTimePicker_unstable } from './useTimePicker';\nimport { useTimePickerStyles_unstable } from './useTimePickerStyles.styles';\nimport { renderCombobox_unstable, useComboboxContextValues } from '@fluentui/react-combobox';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * TimePicker Compat component\n */ export const TimePicker = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useTimePicker_unstable(props, ref);\n    const contextValues = useComboboxContextValues(state);\n    useTimePickerStyles_unstable(state);\n    useCustomStyleHook_unstable('useTimePickerCompatStyles_unstable')(state);\n    return renderCombobox_unstable(state, contextValues);\n});\nTimePicker.displayName = 'TimePicker';\n"],"names":["TimePicker","React","forwardRef","props","ref","state","useTimePicker_unstable","contextValues","useComboboxContextValues","useTimePickerStyles_unstable","useCustomStyleHook_unstable","renderCombobox_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;+BACgB;2CACM;+BACqB;qCACtB;AAGjC,MAAMA,aAAa,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5C,MAAMG,gBAAgBC,IAAAA,uCAAwB,EAACH;IAC/CI,IAAAA,uDAA4B,EAACJ;IAC7BK,IAAAA,gDAA2B,EAAC,sCAAsCL;IAClE,OAAOM,IAAAA,sCAAuB,EAACN,OAAOE;AAC1C;AACAP,WAAWY,WAAW,GAAG"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TimePicker.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "formatDateToTimeString", {
+    enumerable: true,
+    get: function() {
+        return _timeMath.formatDateToTimeString;
+    }
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./TimePicker"), exports);
+_export_star._(require("./TimePicker.types"), exports);
+_export_star._(require("./useTimePicker"), exports);
+_export_star._(require("./useTimePickerStyles.styles"), exports);
+const _timeMath = require("./timeMath");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './TimePicker';\nexport * from './TimePicker.types';\nexport * from './useTimePicker';\nexport * from './useTimePickerStyles.styles';\nexport { formatDateToTimeString } from './timeMath';\n"],"names":["formatDateToTimeString"],"mappings":";;;;+BAISA;;;eAAAA,gCAAsB;;;;uBAJjB;uBACA;uBACA;uBACA;0BACyB"}

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

@@ -0,0 +1,141 @@
+"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, {
+    dateToKey: function() {
+        return dateToKey;
+    },
+    keyToDate: function() {
+        return keyToDate;
+    },
+    formatDateToTimeString: function() {
+        return formatDateToTimeString;
+    },
+    getDateStartAnchor: function() {
+        return getDateStartAnchor;
+    },
+    getDateEndAnchor: function() {
+        return getDateEndAnchor;
+    },
+    getTimesBetween: function() {
+        return getTimesBetween;
+    },
+    getDateFromTimeString: function() {
+        return getDateFromTimeString;
+    }
+});
+function isValidDate(date) {
+    return !isNaN(date.getTime());
+}
+function dateToKey(date) {
+    if (!date) {
+        return '';
+    }
+    if (!isValidDate(date)) {
+        return 'invalid';
+    }
+    return date.toISOString();
+}
+function keyToDate(key) {
+    if (key === '' || key === 'invalid') {
+        return null;
+    }
+    const date = new Date(key);
+    return isValidDate(date) ? date : null;
+}
+function formatDateToTimeString(date, { hourCycle, showSeconds } = {}) {
+    return date.toLocaleTimeString(undefined, {
+        hour: 'numeric',
+        hourCycle,
+        minute: '2-digit',
+        second: showSeconds ? '2-digit' : undefined
+    });
+}
+function getDateStartAnchor(dateAnchor, startHour) {
+    const startDate = new Date(dateAnchor);
+    startDate.setHours(startHour, 0, 0, 0);
+    return startDate;
+}
+function getDateEndAnchor(dateAnchor, startHour, endHour) {
+    const endDate = new Date(dateAnchor);
+    if (startHour > endHour || endHour === 24) {
+        endDate.setDate(endDate.getDate() + 1);
+    }
+    endDate.setHours(endHour === 24 ? 0 : endHour, 0, 0, 0);
+    return endDate;
+}
+function getTimesBetween(dateStartAnchor, dateEndAnchor, increment) {
+    if (increment <= 0) {
+        // eslint-disable-next-line no-console
+        console.error('Increment value should be a positive number.');
+        return [];
+    }
+    const result = [];
+    const startDate = new Date(dateStartAnchor);
+    while(startDate < dateEndAnchor){
+        result.push(new Date(startDate));
+        startDate.setMinutes(startDate.getMinutes() + increment);
+    }
+    return result;
+}
+const REGEX_SHOW_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9])\s([AaPp][Mm]))$/;
+const REGEX_HIDE_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):[0-5][0-9]\s([AaPp][Mm]))$/;
+const REGEX_SHOW_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]:[0-5][0-9]$/;
+const REGEX_HIDE_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]$/;
+function getDateFromTimeString(time, dateStartAnchor, dateEndAnchor, timeFormatOptions) {
+    if (!time) {
+        return {
+            date: null,
+            errorType: 'required-input'
+        };
+    }
+    const { hourCycle, showSeconds } = timeFormatOptions;
+    const hour12 = hourCycle === 'h11' || hourCycle === 'h12';
+    // Determine the regex based on format
+    const regex = hour12 ? showSeconds ? REGEX_SHOW_SECONDS_HOUR_12 : REGEX_HIDE_SECONDS_HOUR_12 : showSeconds ? REGEX_SHOW_SECONDS_HOUR_24 : REGEX_HIDE_SECONDS_HOUR_24;
+    if (!regex.test(time)) {
+        return {
+            date: null,
+            errorType: 'invalid-input'
+        };
+    }
+    const timeParts = /^(\d\d?):(\d\d):?(\d\d)? ?([ap]m)?/i.exec(time);
+    if (!timeParts) {
+        return {
+            date: null,
+            errorType: 'invalid-input'
+        };
+    }
+    const [, selectedHours, minutes, seconds, amPm] = timeParts;
+    let hours = selectedHours;
+    // Adjust for 12-hour time format if needed
+    if (hour12 && amPm) {
+        if (amPm.toLowerCase() === 'pm' && +hours !== 12) {
+            hours = (+hours + 12).toString();
+        } else if (amPm.toLowerCase() === 'am' && +hours === 12) {
+            hours = '0';
+        }
+    }
+    const adjustedDate = new Date(dateStartAnchor);
+    adjustedDate.setHours(+hours, +minutes, seconds ? +seconds : 0);
+    // Adjust to the next day if the selected time is before the anchor time
+    if (adjustedDate < dateStartAnchor) {
+        adjustedDate.setDate(adjustedDate.getDate() + 1);
+    }
+    if (adjustedDate >= dateEndAnchor) {
+        return {
+            date: adjustedDate,
+            errorType: 'out-of-bounds'
+        };
+    }
+    return {
+        date: adjustedDate
+    };
+}

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

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

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":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACuF;8BACxF;+BACuB;4BACe;0BACgH;AASjK,MAAMA,yBAAyB,CAACC,OAAOC;IAC9C,MAAM,EAAEC,YAAYC,iBAAiB,EAAEC,qBAAqBC,0BAA0B,EAAEC,UAAU,EAAE,EAAEC,yBAAyBC,gCAA6B,EAAEC,SAAS,EAAEC,YAAY,EAAE,EAAEC,YAAY,EAAEC,cAAcC,mBAAmB,EAAEC,cAAc,KAAK,EAAEC,YAAY,CAAC,EAAEC,uBAAuBC,4BAA4B,EAAE,GAAGC,MAAM,GAAGlB;IAC/U,MAAM,EAAEmB,WAAW,KAAK,EAAE,GAAGD;IAC7B,IAAIE;IACJ,MAAM,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGC,oBAAoB,AAACH,CAAAA,OAAOjB,sBAAsB,QAAQA,sBAAsB,KAAK,IAAIA,oBAAoBU,mBAAkB,MAAO,QAAQO,SAAS,KAAK,IAAIA,OAAOf,4BAA4BU,WAAWT;IACzP,MAAMkB,UAAUC,OAAMC,OAAO,CAAC,IAAIC,IAAAA,yBAAe,EAACN,iBAAiBC,eAAeZ,WAAWkB,GAAG,CAAC,CAACC,OAAQ,CAAA;gBAC9FC,MAAMD;gBACNE,KAAKC,IAAAA,mBAAS,EAACH;gBACfI,MAAM1B,uBAAuBsB,MAAM;oBAC/Bf;oBACAL;gBACJ;YACJ,CAAA,IAAK;QACTa;QACAD;QACAd;QACAE;QACAC;QACAI;KACH;IACD,MAAM,CAACF,cAAcsB,gBAAgB,GAAGC,IAAAA,oCAAoB,EAAC;QACzDC,OAAOvB;QACPwB,cAAchC;QACdiC,cAAc;IAClB;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGf,OAAMgB,QAAQ,CAACC;IACzD,MAAMC,aAAaC,IAAAA,gCAAgB,EAAC,CAACC,GAAGC;QACpCZ,gBAAgBY,KAAKlC,YAAY;QACjC4B,iBAAiBM,KAAKC,gBAAgB;QACtCpC,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAakC,GAAGC;IAChF;IACA,MAAME,kBAAkBvB,OAAMC,OAAO,CAAC;QAClC,MAAMuB,kBAAkBjB,IAAAA,mBAAS,EAACpB;QAClC,MAAMsC,iBAAiB1B,QAAQ2B,IAAI,CAAC,CAACrB,OAAOA,KAAKC,GAAG,KAAKkB;QACzD,OAAOC,iBAAiB;YACpBA,eAAenB,GAAG;SACrB,GAAG,EAAE;IACV,GAAG;QACCP;QACAZ;KACH;IACD,MAAMwC,qBAAqBR,IAAAA,gCAAgB,EAAC,CAACC,GAAGC;QAC5C,IAAI3B,YAAY2B,KAAKO,WAAW,KAAKX,WAAW;YAC5C,qHAAqH;YACrH;QACJ;QACA,IAAIY;QACJ,MAAMC,oBAAoB;YACtB3C,cAAc4C,IAAAA,mBAAS,EAAC,AAACF,CAAAA,oBAAoBR,KAAKO,WAAW,AAAD,MAAO,QAAQC,sBAAsB,KAAK,IAAIA,oBAAoB;YAC9HP,kBAAkBD,KAAKW,UAAU;YACjCC,WAAWhB;QACf;QACAC,WAAWE,GAAGU;IAClB;IACA,MAAMI,YAAYC,IAAAA,mCAAoB,EAAC;QACnCC,cAAc;QACd,GAAG3C,IAAI;QACP8B;QACAc,gBAAgBV;QAChBW,UAAUvC,QAAQI,GAAG,CAAC,CAACE,OAAO,WAAW,GAAGL,OAAMuC,aAAa,CAACC,qBAAM,EAAE;gBAChElC,KAAKD,KAAKC,GAAG;gBACbmC,OAAOpC,KAAKC,GAAG;YACnB,GAAGD,KAAKG,IAAI;IACpB,GAAGhC;IACH,MAAMkE,+BAA+B1C,OAAM2C,WAAW,CAAC,CAACvC,OAAOwC,IAAAA,+BAAqB,EAACxC,MAAMR,iBAAiBC,eAAe;YACnHb;YACAK;QACJ,IAAI;QACJQ;QACAD;QACAZ;QACAK;KACH;IACD,MAAMsB,QAAQ;QACV,GAAGuB,SAAS;QACZxC;QACAH,uBAAuBC,iCAAiC,QAAQA,iCAAiC,KAAK,IAAIA,+BAA+BkD;QACzI5B;IACJ;IACA+B,2BAA2BlC;IAC3BmC,uBAAuBnC,OAAOO;IAC9B,OAAOP;AACX;AACA;;;CAGC,GAAG,MAAMb,sBAAsB,CAACiD,cAAczD,WAAWT;IACtD,MAAM,CAACmE,mBAAmB,GAAGhD,OAAMgB,QAAQ,CAAC,IAAI,IAAIiC;IACpD,MAAMC,kBAAkB3C,IAAAA,mBAAS,EAACwC,iBAAiB,QAAQA,iBAAiB,KAAK,IAAIA,eAAe;IACpG,OAAO/C,OAAMC,OAAO,CAAC;QACjB,MAAMxB,aAAasE,iBAAiB,QAAQA,iBAAiB,KAAK,IAAIA,eAAeC;QACrF,MAAMpD,kBAAkBuD,IAAAA,4BAAkB,EAAC1E,YAAYa;QACvD,MAAMO,gBAAgBuD,IAAAA,0BAAgB,EAAC3E,YAAYa,WAAWT;QAC9D,OAAO;YACHe;YACAC;QACJ;IACJ,gNAAgN;IAChN,uDAAuD;IACvD,GAAG;QACChB;QACAmE;QACAE;QACA5D;KACH;AACL;AACA;;;;;CAKC,GAAG,MAAMwD,yBAAyB,CAACnC,OAAO0C;IACvC,MAAM,EAAEC,YAAY,EAAE5D,QAAQ,EAAEH,qBAAqB,EAAEuB,aAAa,EAAEyC,eAAe,EAAEd,KAAK,EAAE,GAAG9B;IACjG,yIAAyI;IACzI,gGAAgG;IAChG,wIAAwI;IACxIX,OAAMwD,SAAS,CAAC;QACZ,IAAI9D,YAAY+C,OAAO;YACnBc,gBAAgB,CAACE;gBACb,IAAI,AAACA,CAAAA,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBjD,IAAI,AAAD,KAAMiD,iBAAiBjD,IAAI,CAACkD,WAAW,GAAGC,OAAO,CAAClB,MAAMiB,WAAW,QAAQ,GAAG;oBACvK,OAAOD;gBACX;gBACA,OAAOxC;YACX;QACJ;IACJ,GAAG;QACCvB;QACA6D;QACAd;KACH;IACD,MAAMmB,sBAAsBzC,IAAAA,gCAAgB,EAAC,CAACC;QAC1C,IAAI,CAAC1B,UAAU;YACX;QACJ;QACA,MAAM,EAAEW,MAAMlB,YAAY,EAAE8C,SAAS,EAAE,GAAG1C,sBAAsBkD;QAChE,6DAA6D;QAC7D,IAAI3B,kBAAkB2B,OAAO;YACzBY,aAAa,QAAQA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASjC,GAAG;gBAC5DjC;gBACAmC,kBAAkBmB;gBAClBR;YACJ;QACJ;IACJ;IACA,MAAM4B,gBAAgB1C,IAAAA,gCAAgB,EAAC,CAACC;QACpC,IAAI,CAACkC,gBAAgBlC,EAAEd,GAAG,KAAKwD,mBAAK,EAAE;YAClCF,oBAAoBxC;QACxB;IACJ;IACAT,MAAMoD,IAAI,CAACC,SAAS,GAAGC,IAAAA,8BAAc,EAACJ,eAAelD,MAAMoD,IAAI,CAACC,SAAS;IACzE,MAAME,UAAUlE,OAAMmE,MAAM,CAAC;IAC7BxD,MAAMoD,IAAI,CAACvF,GAAG,GAAG4F,IAAAA,6BAAa,EAACzD,MAAMoD,IAAI,CAACvF,GAAG,EAAE0F;IAC/C,IAAIvD,MAAM0D,OAAO,EAAE;QACf1D,MAAM0D,OAAO,CAACC,QAAQ,GAAG,CAAC,GAAG,qDAAqD;IACtF;IACA,IAAI3D,MAAM4D,UAAU,EAAE;QAClB5D,MAAM4D,UAAU,CAACD,QAAQ,GAAG,CAAC,GAAG,qDAAqD;IACzF;IACA,MAAME,kBAAkBrD,IAAAA,gCAAgB,EAAC,CAACC;QACtC,MAAMqD,YAAYrD,EAAEsD,aAAa,GAAG,CAACC,IAAAA,+BAAe,EAACT,QAAQU,OAAO,EAAExD,EAAEsD,aAAa,IAAI;QACzF,IAAID,WAAW;YACXb,oBAAoBxC;QACxB;IACJ;IACAT,MAAMkE,KAAK,CAACC,MAAM,GAAGb,IAAAA,8BAAc,EAACO,iBAAiB7D,MAAMkE,KAAK,CAACC,MAAM;AAC3E;AACA;;CAEC,GAAG,MAAMjC,6BAA6B,CAAClC;IACpC,IAAIoE;IACJ,MAAMC,eAAeC,IAAAA,oCAAe;IACpC,MAAMC,mBAAmBC,IAAAA,qBAAK,EAAC;IAC/B,MAAMC,2BAA2B;IACjC,IAAI,AAACJ,CAAAA,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaK,OAAO,AAAD,KAAM,AAAC,CAAA,AAACN,CAAAA,oBAAoBpE,MAAM4D,UAAU,AAAD,MAAO,QAAQQ,sBAAsB,KAAK,IAAI,KAAK,IAAIA,iBAAiB,CAAC,aAAa,AAAD,MAAOK,0BAA0B;QACjP,IAAIE;QACJ,MAAMC,YAAY,AAACD,CAAAA,uBAAuB3E,MAAM4D,UAAU,CAACiB,EAAE,AAAD,MAAO,QAAQF,yBAAyB,KAAK,IAAIA,uBAAuBJ;QACpIvE,MAAM4D,UAAU,CAAC,kBAAkB,GAAG,CAAC,EAAEgB,UAAU,CAAC,EAAEP,aAAaK,OAAO,CAAC,CAAC;IAChF;AACJ"}

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"}