@fluentui/react-combobox 9.3.4 → 9.4.1

package/lib/utils/useComboboxBaseState.js

@@ -4,107 +4,105 @@ import { useOptionCollection } from '../utils/useOptionCollection';
 import { useSelection } from '../utils/useSelection';
 /**
  * State shared between Combobox and Dropdown components
- */
-export const useComboboxBaseState = props => {
-  const {
-    appearance = 'outline',
-    children,
-    editable = false,
-    inlinePopup = false,
-    multiselect,
-    onOpenChange,
-    size = 'medium'
-  } = props;
-  const optionCollection = useOptionCollection();
-  const {
-    getOptionAtIndex,
-    getOptionsMatchingValue
-  } = optionCollection;
-  const [activeOption, setActiveOption] = React.useState();
-  // track whether keyboard focus outline should be shown
-  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
-  const [focusVisible, setFocusVisible] = React.useState(false);
-  // track focused state to conditionally render collapsed listbox
-  const [hasFocus, setHasFocus] = React.useState(false);
-  const ignoreNextBlur = React.useRef(false);
-  const selectionState = useSelection(props);
-  const {
-    selectedOptions
-  } = selectionState;
-  // calculate value based on props, internal value changes, and selected options
-  const isFirstMount = useFirstMount();
-  const [controllableValue, setValue] = useControllableState({
-    state: props.value,
-    initialState: undefined
-  });
-  const value = React.useMemo(() => {
-    // don't compute the value if it is defined through props or setValue,
-    if (controllableValue !== undefined) {
-      return controllableValue;
-    }
-    // handle defaultValue here, so it is overridden by selection
-    if (isFirstMount && props.defaultValue !== undefined) {
-      return props.defaultValue;
-    }
-    const selectedOptionsText = getOptionsMatchingValue(optionValue => {
-      return selectedOptions.includes(optionValue);
-    }).map(option => option.text);
-    if (multiselect) {
-      // editable inputs should not display multiple selected options in the input as text
-      return editable ? '' : selectedOptionsText.join(', ');
-    }
-    return selectedOptionsText[0];
+ */ export const useComboboxBaseState = (props)=>{
+    const { appearance ='outline' , children , editable =false , inlinePopup =false , multiselect , onOpenChange , size ='medium'  } = props;
+    const optionCollection = useOptionCollection();
+    const { getOptionAtIndex , getOptionsMatchingValue  } = optionCollection;
+    const [activeOption, setActiveOption] = React.useState();
+    // track whether keyboard focus outline should be shown
+    // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
+    const [focusVisible, setFocusVisible] = React.useState(false);
+    // track focused state to conditionally render collapsed listbox
+    const [hasFocus, setHasFocus] = React.useState(false);
+    const ignoreNextBlur = React.useRef(false);
+    const selectionState = useSelection(props);
+    const { selectedOptions  } = selectionState;
+    // calculate value based on props, internal value changes, and selected options
+    const isFirstMount = useFirstMount();
+    const [controllableValue, setValue] = useControllableState({
+        state: props.value,
+        initialState: undefined
+    });
+    const value = React.useMemo(()=>{
+        // don't compute the value if it is defined through props or setValue,
+        if (controllableValue !== undefined) {
+            return controllableValue;
+        }
+        // handle defaultValue here, so it is overridden by selection
+        if (isFirstMount && props.defaultValue !== undefined) {
+            return props.defaultValue;
+        }
+        const selectedOptionsText = getOptionsMatchingValue((optionValue)=>{
+            return selectedOptions.includes(optionValue);
+        }).map((option)=>option.text);
+        if (multiselect) {
+            // editable inputs should not display multiple selected options in the input as text
+            return editable ? '' : selectedOptionsText.join(', ');
+        }
+        return selectedOptionsText[0];
     // do not change value after isFirstMount changes,
     // we do not want to accidentally override defaultValue on a second render
     // unless another value is intentionally set
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);
-  // Handle open state, which is shared with options in context
-  const [open, setOpenState] = useControllableState({
-    state: props.open,
-    defaultState: props.defaultOpen,
-    initialState: false
-  });
-  const setOpen = React.useCallback((event, newState) => {
-    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
-      open: newState
+    }, [
+        controllableValue,
+        editable,
+        getOptionsMatchingValue,
+        multiselect,
+        props.defaultValue,
+        selectedOptions
+    ]);
+    // Handle open state, which is shared with options in context
+    const [open, setOpenState] = useControllableState({
+        state: props.open,
+        defaultState: props.defaultOpen,
+        initialState: false
     });
-    setOpenState(newState);
-  }, [onOpenChange, setOpenState]);
-  // update active option based on change in open state or children
-  React.useEffect(() => {
-    if (open && !activeOption) {
-      // if it is single-select and there is a selected option, start at the selected option
-      if (!multiselect && selectedOptions.length > 0) {
-        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();
-        selectedOption && setActiveOption(selectedOption);
-      } else {
-        setActiveOption(getOptionAtIndex(0));
-      }
-    } else if (!open) {
-      // reset the active option when closing
-      setActiveOption(undefined);
-    }
+    const setOpen = React.useCallback((event, newState)=>{
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
+            open: newState
+        });
+        setOpenState(newState);
+    }, [
+        onOpenChange,
+        setOpenState
+    ]);
+    // update active option based on change in open state or children
+    React.useEffect(()=>{
+        if (open && !activeOption) {
+            // if it is single-select and there is a selected option, start at the selected option
+            if (!multiselect && selectedOptions.length > 0) {
+                const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();
+                selectedOption && setActiveOption(selectedOption);
+            } else {
+                setActiveOption(getOptionAtIndex(0));
+            }
+        } else if (!open) {
+            // reset the active option when closing
+            setActiveOption(undefined);
+        }
     // this should only be run in response to changes in the open state or children
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, children]);
-  return {
-    ...optionCollection,
-    ...selectionState,
-    activeOption,
-    appearance,
-    focusVisible,
-    hasFocus,
-    ignoreNextBlur,
-    inlinePopup,
-    open,
-    setActiveOption,
-    setFocusVisible,
-    setHasFocus,
-    setOpen,
-    setValue,
-    size,
-    value
-  };
+    }, [
+        open,
+        children
+    ]);
+    return {
+        ...optionCollection,
+        ...selectionState,
+        activeOption,
+        appearance,
+        focusVisible,
+        hasFocus,
+        ignoreNextBlur,
+        inlinePopup,
+        open,
+        setActiveOption,
+        setFocusVisible,
+        setHasFocus,
+        setOpen,
+        setValue,
+        size,
+        value
+    };
 };
-//# sourceMappingURL=useComboboxBaseState.js.map

package/lib/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"sources":["../../src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    editable = false,\n    inlinePopup = false,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    editable = false,\n    inlinePopup = false,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n  };\n};\n"],"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"mappings":"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"}

package/lib/utils/useComboboxPopup.js

@@ -1,34 +1,37 @@
 import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
 import { useMergedRefs } from '@fluentui/react-utilities';
 export function useComboboxPopup(props, triggerShorthand, listboxShorthand) {
-  const {
-    positioning
-  } = props;
-  // Set a default set of fallback positions to try if the dropdown does not fit on screen
-  const fallbackPositions = ['above', 'after', 'after-top', 'before', 'before-top'];
-  // popper options
-  const popperOptions = {
-    position: 'below',
-    align: 'start',
-    offset: {
-      crossAxis: 0,
-      mainAxis: 2
-    },
-    fallbackPositions,
-    ...resolvePositioningShorthand(positioning)
-  };
-  const {
-    targetRef,
-    containerRef
-  } = usePositioning(popperOptions);
-  const listboxRef = useMergedRefs(listboxShorthand === null || listboxShorthand === void 0 ? void 0 : listboxShorthand.ref, containerRef);
-  const listbox = listboxShorthand && {
-    ...listboxShorthand,
-    ref: listboxRef
-  };
-  return [{
-    ...triggerShorthand,
-    ref: useMergedRefs(triggerShorthand === null || triggerShorthand === void 0 ? void 0 : triggerShorthand.ref, targetRef)
-  }, listbox];
+    const { positioning  } = props;
+    // Set a default set of fallback positions to try if the dropdown does not fit on screen
+    const fallbackPositions = [
+        'above',
+        'after',
+        'after-top',
+        'before',
+        'before-top'
+    ];
+    // popper options
+    const popperOptions = {
+        position: 'below',
+        align: 'start',
+        offset: {
+            crossAxis: 0,
+            mainAxis: 2
+        },
+        fallbackPositions,
+        ...resolvePositioningShorthand(positioning)
+    };
+    const { targetRef , containerRef  } = usePositioning(popperOptions);
+    const listboxRef = useMergedRefs(listboxShorthand === null || listboxShorthand === void 0 ? void 0 : listboxShorthand.ref, containerRef);
+    const listbox = listboxShorthand && {
+        ...listboxShorthand,
+        ref: listboxRef
+    };
+    return [
+        {
+            ...triggerShorthand,
+            ref: useMergedRefs(triggerShorthand === null || triggerShorthand === void 0 ? void 0 : triggerShorthand.ref, targetRef)
+        },
+        listbox
+    ];
 }
-//# sourceMappingURL=useComboboxPopup.js.map

package/lib/utils/useComboboxPopup.js.map

@@ -1 +1 @@
-{"version":3,"names":["resolvePositioningShorthand","usePositioning","useMergedRefs","useComboboxPopup","props","triggerShorthand","listboxShorthand","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","targetRef","containerRef","listboxRef","ref","listbox"],"sources":["../../src/utils/useComboboxPopup.ts"],"sourcesContent":["import { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { ExtractSlotProps, Slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport { Listbox } from '../components/Listbox/Listbox';\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { positioning } = props;\n\n  // Set a default set of fallback positions to try if the dropdown does not fit on screen\n  const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    fallbackPositions,\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  const listboxRef = useMergedRefs(listboxShorthand?.ref, containerRef);\n  const listbox = listboxShorthand && { ...listboxShorthand, ref: listboxRef };\n\n  return [{ ...triggerShorthand, ref: useMergedRefs(triggerShorthand?.ref, targetRef) }, listbox];\n}\n"],"mappings":"AAAA,SAAoCA,2BAA2B,EAAEC,cAAc,QAAQ;AACvF,SAAiCC,aAAa,QAAQ;AAetD,OAAO,SAASC,iBACdC,KAAwB,EACxBC,gBAAqF,EACrFC,gBAAyD,EAIzD;EACA,MAAM;IAAEC;EAAW,CAAE,GAAGH,KAAA;EAExB;EACA,MAAMI,iBAAA,GAAiD,CAAC,SAAS,SAAS,aAAa,UAAU,aAAa;EAE9G;EACA,MAAMC,aAAA,GAAgB;IACpBC,QAAA,EAAU;IACVC,KAAA,EAAO;IACPC,MAAA,EAAQ;MAAEC,SAAA,EAAW;MAAGC,QAAA,EAAU;IAAE;IACpCN,iBAAA;IACA,GAAGR,2BAAA,CAA4BO,WAAA;EACjC;EAEA,MAAM;IAAEQ,SAAA;IAAWC;EAAY,CAAE,GAAGf,cAAA,CAAeQ,aAAA;EAEnD,MAAMQ,UAAA,GAAaf,aAAA,CAAcI,gBAAA,aAAAA,gBAAA,uBAAAA,gBAAA,CAAkBY,GAAG,EAAEF,YAAA;EACxD,MAAMG,OAAA,GAAUb,gBAAA,IAAoB;IAAE,GAAGA,gBAAgB;IAAEY,GAAA,EAAKD;EAAW;EAE3E,OAAO,CAAC;IAAE,GAAGZ,gBAAgB;IAAEa,GAAA,EAAKhB,aAAA,CAAcG,gBAAA,aAAAA,gBAAA,uBAAAA,gBAAA,CAAkBa,GAAG,EAAEH,SAAA;EAAW,GAAGI,OAAA,CAAQ;AACjG"}
+{"version":3,"sources":["useComboboxPopup.ts"],"sourcesContent":["import { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { ExtractSlotProps, Slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport { Listbox } from '../components/Listbox/Listbox';\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { positioning } = props;\n\n  // Set a default set of fallback positions to try if the dropdown does not fit on screen\n  const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    fallbackPositions,\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  const listboxRef = useMergedRefs(listboxShorthand?.ref, containerRef);\n  const listbox = listboxShorthand && { ...listboxShorthand, ref: listboxRef };\n\n  return [{ ...triggerShorthand, ref: useMergedRefs(triggerShorthand?.ref, targetRef) }, listbox];\n}\n"],"names":["resolvePositioningShorthand","usePositioning","useMergedRefs","useComboboxPopup","props","triggerShorthand","listboxShorthand","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","targetRef","containerRef","listboxRef","ref","listbox"],"mappings":"AAAA,SAAoCA,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AACrH,SAAiCC,aAAa,QAAQ,4BAA4B;AAelF,OAAO,SAASC,iBACdC,KAAwB,EACxBC,gBAAqF,EACrFC,gBAAyD,EAIzD;IACA,MAAM,EAAEC,YAAW,EAAE,GAAGH;IAExB,wFAAwF;IACxF,MAAMI,oBAAiD;QAAC;QAAS;QAAS;QAAa;QAAU;KAAa;IAE9G,iBAAiB;IACjB,MAAMC,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCN;QACA,GAAGR,4BAA4BO,YAAY;IAC7C;IAEA,MAAM,EAAEQ,UAAS,EAAEC,aAAY,EAAE,GAAGf,eAAeQ;IAEnD,MAAMQ,aAAaf,cAAcI,6BAAAA,8BAAAA,KAAAA,IAAAA,iBAAkBY,GAAG,EAAEF;IACxD,MAAMG,UAAUb,oBAAoB;QAAE,GAAGA,gBAAgB;QAAEY,KAAKD;IAAW;IAE3E,OAAO;QAAC;YAAE,GAAGZ,gBAAgB;YAAEa,KAAKhB,cAAcG,6BAAAA,8BAAAA,KAAAA,IAAAA,iBAAkBa,GAAG,EAAEH;QAAW;QAAGI;KAAQ;AACjG,CAAC"}

package/lib/utils/useOptionCollection.js

@@ -1,70 +1,71 @@
 import * as React from 'react';
 /**
  * A hook for managing a collection of child Options
- */
-export const useOptionCollection = () => {
-  const nodes = React.useRef([]);
-  const collectionAPI = React.useMemo(() => {
-    const getCount = () => nodes.current.length;
-    const getOptionAtIndex = index => {
-      var _nodes_current_index;
-      return (_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option;
-    };
-    const getIndexOfId = id => nodes.current.findIndex(node => node.option.id === id);
-    const getOptionById = id => {
-      const item = nodes.current.find(node => node.option.id === id);
-      return item === null || item === void 0 ? void 0 : item.option;
-    };
-    const getOptionsMatchingText = matcher => {
-      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);
-    };
-    const getOptionsMatchingValue = matcher => {
-      return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);
-    };
+ */ export const useOptionCollection = ()=>{
+    const nodes = React.useRef([]);
+    const collectionAPI = React.useMemo(()=>{
+        const getCount = ()=>nodes.current.length;
+        const getOptionAtIndex = (index)=>{
+            var _nodes_current_index;
+            return (_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option;
+        };
+        const getIndexOfId = (id)=>nodes.current.findIndex((node)=>node.option.id === id);
+        const getOptionById = (id)=>{
+            const item = nodes.current.find((node)=>node.option.id === id);
+            return item === null || item === void 0 ? void 0 : item.option;
+        };
+        const getOptionsMatchingText = (matcher)=>{
+            return nodes.current.filter((node)=>matcher(node.option.text)).map((node)=>node.option);
+        };
+        const getOptionsMatchingValue = (matcher)=>{
+            return nodes.current.filter((node)=>matcher(node.option.value)).map((node)=>node.option);
+        };
+        return {
+            getCount,
+            getOptionAtIndex,
+            getIndexOfId,
+            getOptionById,
+            getOptionsMatchingText,
+            getOptionsMatchingValue
+        };
+    }, []);
+    const registerOption = React.useCallback((option, element)=>{
+        var _nodes_current_index;
+        const index = nodes.current.findIndex((node)=>{
+            if (!node.element || !element) {
+                return false;
+            }
+            if (node.option.id === option.id) {
+                return true;
+            }
+            // use the DOM method compareDocumentPosition to order the current node against registered nodes
+            // eslint-disable-next-line no-bitwise
+            return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;
+        });
+        // do not register the option if it already exists
+        if (((_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option.id) !== option.id) {
+            const newItem = {
+                element,
+                option
+            };
+            // If an index is not found we will push the element to the end.
+            if (index === -1) {
+                nodes.current = [
+                    ...nodes.current,
+                    newItem
+                ];
+            } else {
+                nodes.current.splice(index, 0, newItem);
+            }
+        }
+        // return the unregister function
+        return ()=>{
+            nodes.current = nodes.current.filter((node)=>node.option.id !== option.id);
+        };
+    }, []);
     return {
-      getCount,
-      getOptionAtIndex,
-      getIndexOfId,
-      getOptionById,
-      getOptionsMatchingText,
-      getOptionsMatchingValue
-    };
-  }, []);
-  const registerOption = React.useCallback((option, element) => {
-    var _nodes_current_index;
-    const index = nodes.current.findIndex(node => {
-      if (!node.element || !element) {
-        return false;
-      }
-      if (node.option.id === option.id) {
-        return true;
-      }
-      // use the DOM method compareDocumentPosition to order the current node against registered nodes
-      // eslint-disable-next-line no-bitwise
-      return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;
-    });
-    // do not register the option if it already exists
-    if (((_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option.id) !== option.id) {
-      const newItem = {
-        element,
-        option
-      };
-      // If an index is not found we will push the element to the end.
-      if (index === -1) {
-        nodes.current = [...nodes.current, newItem];
-      } else {
-        nodes.current.splice(index, 0, newItem);
-      }
-    }
-    // return the unregister function
-    return () => {
-      nodes.current = nodes.current.filter(node => node.option.id !== option.id);
+        ...collectionAPI,
+        options: nodes.current.map((node)=>node.option),
+        registerOption
     };
-  }, []);
-  return {
-    ...collectionAPI,
-    options: nodes.current.map(node => node.option),
-    registerOption
-  };
 };
-//# sourceMappingURL=useOptionCollection.js.map

package/lib/utils/useOptionCollection.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useOptionCollection","nodes","useRef","collectionAPI","useMemo","getCount","current","length","getOptionAtIndex","index","_nodes_current_index","option","getIndexOfId","id","findIndex","node","getOptionById","item","find","getOptionsMatchingText","matcher","filter","text","map","getOptionsMatchingValue","value","registerOption","useCallback","element","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","newItem","splice","options"],"sources":["../../src/utils/useOptionCollection.ts"],"sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n  const nodes = React.useRef<{ option: OptionValue; element: HTMLElement }[]>([]);\n\n  const collectionAPI = React.useMemo(() => {\n    const getCount = () => nodes.current.length;\n    const getOptionAtIndex = (index: number) => nodes.current[index]?.option;\n    const getIndexOfId = (id: string) => nodes.current.findIndex(node => node.option.id === id);\n    const getOptionById = (id: string) => {\n      const item = nodes.current.find(node => node.option.id === id);\n      return item?.option;\n    };\n    const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);\n    };\n    const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingText,\n      getOptionsMatchingValue,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue, element: HTMLElement) => {\n    const index = nodes.current.findIndex(node => {\n      if (!node.element || !element) {\n        return false;\n      }\n\n      if (node.option.id === option.id) {\n        return true;\n      }\n\n      // use the DOM method compareDocumentPosition to order the current node against registered nodes\n      // eslint-disable-next-line no-bitwise\n      return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n    });\n\n    // do not register the option if it already exists\n    if (nodes.current[index]?.option.id !== option.id) {\n      const newItem = {\n        element,\n        option,\n      };\n\n      // If an index is not found we will push the element to the end.\n      if (index === -1) {\n        nodes.current = [...nodes.current, newItem];\n      } else {\n        nodes.current.splice(index, 0, newItem);\n      }\n    }\n\n    // return the unregister function\n    return () => {\n      nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n    };\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: nodes.current.map(node => node.option),\n    registerOption,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"sources":["useOptionCollection.ts"],"sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n  const nodes = React.useRef<{ option: OptionValue; element: HTMLElement }[]>([]);\n\n  const collectionAPI = React.useMemo(() => {\n    const getCount = () => nodes.current.length;\n    const getOptionAtIndex = (index: number) => nodes.current[index]?.option;\n    const getIndexOfId = (id: string) => nodes.current.findIndex(node => node.option.id === id);\n    const getOptionById = (id: string) => {\n      const item = nodes.current.find(node => node.option.id === id);\n      return item?.option;\n    };\n    const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);\n    };\n    const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingText,\n      getOptionsMatchingValue,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue, element: HTMLElement) => {\n    const index = nodes.current.findIndex(node => {\n      if (!node.element || !element) {\n        return false;\n      }\n\n      if (node.option.id === option.id) {\n        return true;\n      }\n\n      // use the DOM method compareDocumentPosition to order the current node against registered nodes\n      // eslint-disable-next-line no-bitwise\n      return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n    });\n\n    // do not register the option if it already exists\n    if (nodes.current[index]?.option.id !== option.id) {\n      const newItem = {\n        element,\n        option,\n      };\n\n      // If an index is not found we will push the element to the end.\n      if (index === -1) {\n        nodes.current = [...nodes.current, newItem];\n      } else {\n        nodes.current.splice(index, 0, newItem);\n      }\n    }\n\n    // return the unregister function\n    return () => {\n      nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n    };\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: nodes.current.map(node => node.option),\n    registerOption,\n  };\n};\n"],"names":["React","useOptionCollection","nodes","useRef","collectionAPI","useMemo","getCount","current","length","getOptionAtIndex","index","option","getIndexOfId","id","findIndex","node","getOptionById","item","find","getOptionsMatchingText","matcher","filter","text","map","getOptionsMatchingValue","value","registerOption","useCallback","element","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","newItem","splice","options"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,sBAAsB,IAA6B;IAC9D,MAAMC,QAAQF,MAAMG,MAAM,CAAkD,EAAE;IAE9E,MAAMC,gBAAgBJ,MAAMK,OAAO,CAAC,IAAM;QACxC,MAAMC,WAAW,IAAMJ,MAAMK,OAAO,CAACC,MAAM;QAC3C,MAAMC,mBAAmB,CAACC;gBAAkBR;YAAAA,OAAAA,CAAAA,uBAAAA,MAAMK,OAAO,CAACG,MAAM,cAApBR,kCAAAA,KAAAA,IAAAA,qBAAsBS,MAAM;;QACxE,MAAMC,eAAe,CAACC,KAAeX,MAAMK,OAAO,CAACO,SAAS,CAACC,CAAAA,OAAQA,KAAKJ,MAAM,CAACE,EAAE,KAAKA;QACxF,MAAMG,gBAAgB,CAACH,KAAe;YACpC,MAAMI,OAAOf,MAAMK,OAAO,CAACW,IAAI,CAACH,CAAAA,OAAQA,KAAKJ,MAAM,CAACE,EAAE,KAAKA;YAC3D,OAAOI,iBAAAA,kBAAAA,KAAAA,IAAAA,KAAMN,MAAM;QACrB;QACA,MAAMQ,yBAAyB,CAACC,UAAuC;YACrE,OAAOlB,MAAMK,OAAO,CAACc,MAAM,CAACN,CAAAA,OAAQK,QAAQL,KAAKJ,MAAM,CAACW,IAAI,GAAGC,GAAG,CAACR,CAAAA,OAAQA,KAAKJ,MAAM;QACxF;QACA,MAAMa,0BAA0B,CAACJ,UAAwC;YACvE,OAAOlB,MAAMK,OAAO,CAACc,MAAM,CAACN,CAAAA,OAAQK,QAAQL,KAAKJ,MAAM,CAACc,KAAK,GAAGF,GAAG,CAACR,CAAAA,OAAQA,KAAKJ,MAAM;QACzF;QAEA,OAAO;YACLL;YACAG;YACAG;YACAI;YACAG;YACAK;QACF;IACF,GAAG,EAAE;IAEL,MAAME,iBAAiB1B,MAAM2B,WAAW,CAAC,CAAChB,QAAqBiB,UAAyB;YAgBlF1B;QAfJ,MAAMQ,QAAQR,MAAMK,OAAO,CAACO,SAAS,CAACC,CAAAA,OAAQ;YAC5C,IAAI,CAACA,KAAKa,OAAO,IAAI,CAACA,SAAS;gBAC7B,OAAO,KAAK;YACd,CAAC;YAED,IAAIb,KAAKJ,MAAM,CAACE,EAAE,KAAKF,OAAOE,EAAE,EAAE;gBAChC,OAAO,IAAI;YACb,CAAC;YAED,gGAAgG;YAChG,sCAAsC;YACtC,OAAOE,KAAKa,OAAO,CAACC,uBAAuB,CAACD,WAAWE,KAAKC,2BAA2B;QACzF;QAEA,kDAAkD;QAClD,IAAI7B,CAAAA,CAAAA,uBAAAA,MAAMK,OAAO,CAACG,MAAM,cAApBR,kCAAAA,KAAAA,IAAAA,qBAAsBS,OAAOE,EAAE,MAAKF,OAAOE,EAAE,EAAE;YACjD,MAAMmB,UAAU;gBACdJ;gBACAjB;YACF;YAEA,gEAAgE;YAChE,IAAID,UAAU,CAAC,GAAG;gBAChBR,MAAMK,OAAO,GAAG;uBAAIL,MAAMK,OAAO;oBAAEyB;iBAAQ;YAC7C,OAAO;gBACL9B,MAAMK,OAAO,CAAC0B,MAAM,CAACvB,OAAO,GAAGsB;YACjC,CAAC;QACH,CAAC;QAED,iCAAiC;QACjC,OAAO,IAAM;YACX9B,MAAMK,OAAO,GAAGL,MAAMK,OAAO,CAACc,MAAM,CAACN,CAAAA,OAAQA,KAAKJ,MAAM,CAACE,EAAE,KAAKF,OAAOE,EAAE;QAC3E;IACF,GAAG,EAAE;IAEL,OAAO;QACL,GAAGT,aAAa;QAChB8B,SAAShC,MAAMK,OAAO,CAACgB,GAAG,CAACR,CAAAA,OAAQA,KAAKJ,MAAM;QAC9Ce;IACF;AACF,EAAE"}

package/lib/utils/useScrollOptionsIntoView.js

@@ -1,36 +1,29 @@
 import * as React from 'react';
 import { canUseDOM } from '@fluentui/react-utilities';
 export function useScrollOptionsIntoView(state) {
-  const {
-    activeOption
-  } = state;
-  const scrollContainerRef = React.useRef(null);
-  React.useEffect(() => {
-    if (scrollContainerRef.current && activeOption && canUseDOM()) {
-      const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`);
-      if (!activeOptionElement) {
-        return;
-      }
-      const {
-        offsetHeight,
-        offsetTop
-      } = activeOptionElement;
-      const {
-        offsetHeight: parentOffsetHeight,
-        scrollTop
-      } = scrollContainerRef.current;
-      const isAbove = offsetTop < scrollTop;
-      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-      // add a small buffer for general visual nicety
-      // it looks slightly better if the option has some space from the top/bottom while arrowing
-      const buffer = 2;
-      if (isAbove) {
-        scrollContainerRef.current.scrollTo(0, offsetTop - buffer);
-      } else if (isBelow) {
-        scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
-      }
-    }
-  }, [activeOption]);
-  return scrollContainerRef;
+    const { activeOption  } = state;
+    const scrollContainerRef = React.useRef(null);
+    React.useEffect(()=>{
+        if (scrollContainerRef.current && activeOption && canUseDOM()) {
+            const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`);
+            if (!activeOptionElement) {
+                return;
+            }
+            const { offsetHeight , offsetTop  } = activeOptionElement;
+            const { offsetHeight: parentOffsetHeight , scrollTop  } = scrollContainerRef.current;
+            const isAbove = offsetTop < scrollTop;
+            const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
+            // add a small buffer for general visual nicety
+            // it looks slightly better if the option has some space from the top/bottom while arrowing
+            const buffer = 2;
+            if (isAbove) {
+                scrollContainerRef.current.scrollTo(0, offsetTop - buffer);
+            } else if (isBelow) {
+                scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
+            }
+        }
+    }, [
+        activeOption
+    ]);
+    return scrollContainerRef;
 }
-//# sourceMappingURL=useScrollOptionsIntoView.js.map

package/lib/utils/useScrollOptionsIntoView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","canUseDOM","useScrollOptionsIntoView","state","activeOption","scrollContainerRef","useRef","useEffect","current","activeOptionElement","querySelector","id","offsetHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo"],"sources":["../../src/utils/useScrollOptionsIntoView.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nimport { ListboxState } from '../Listbox';\n\nexport function useScrollOptionsIntoView(state: ListboxState): React.Ref<HTMLDivElement> {\n  const { activeOption } = state;\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (scrollContainerRef.current && activeOption && canUseDOM()) {\n      const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`) as HTMLElement;\n\n      if (!activeOptionElement) {\n        return;\n      }\n\n      const { offsetHeight, offsetTop } = activeOptionElement;\n      const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;\n\n      const isAbove = offsetTop < scrollTop;\n      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n      // add a small buffer for general visual nicety\n      // it looks slightly better if the option has some space from the top/bottom while arrowing\n      const buffer = 2;\n\n      if (isAbove) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - buffer);\n      } else if (isBelow) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n      }\n    }\n  }, [activeOption]);\n\n  return scrollContainerRef;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,SAAS,QAAQ;AAG1B,OAAO,SAASC,yBAAyBC,KAAmB,EAA6B;EACvF,MAAM;IAAEC;EAAY,CAAE,GAAGD,KAAA;EACzB,MAAME,kBAAA,GAAqBL,KAAA,CAAMM,MAAM,CAAiB,IAAI;EAE5DN,KAAA,CAAMO,SAAS,CAAC,MAAM;IACpB,IAAIF,kBAAA,CAAmBG,OAAO,IAAIJ,YAAA,IAAgBH,SAAA,IAAa;MAC7D,MAAMQ,mBAAA,GAAsBJ,kBAAA,CAAmBG,OAAO,CAACE,aAAa,CAAE,IAAGN,YAAA,CAAaO,EAAG,EAAC;MAE1F,IAAI,CAACF,mBAAA,EAAqB;QACxB;MACF;MAEA,MAAM;QAAEG,YAAA;QAAcC;MAAS,CAAE,GAAGJ,mBAAA;MACpC,MAAM;QAAEG,YAAA,EAAcE,kBAAA;QAAoBC;MAAS,CAAE,GAAGV,kBAAA,CAAmBG,OAAO;MAElF,MAAMQ,OAAA,GAAUH,SAAA,GAAYE,SAAA;MAC5B,MAAME,OAAA,GAAUJ,SAAA,GAAYD,YAAA,GAAeG,SAAA,GAAYD,kBAAA;MAEvD;MACA;MACA,MAAMI,MAAA,GAAS;MAEf,IAAIF,OAAA,EAAS;QACXX,kBAAA,CAAmBG,OAAO,CAACW,QAAQ,CAAC,GAAGN,SAAA,GAAYK,MAAA;MACrD,OAAO,IAAID,OAAA,EAAS;QAClBZ,kBAAA,CAAmBG,OAAO,CAACW,QAAQ,CAAC,GAAGN,SAAA,GAAYC,kBAAA,GAAqBF,YAAA,GAAeM,MAAA;MACzF;IACF;EACF,GAAG,CAACd,YAAA,CAAa;EAEjB,OAAOC,kBAAA;AACT"}
+{"version":3,"sources":["useScrollOptionsIntoView.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nimport { ListboxState } from '../Listbox';\n\nexport function useScrollOptionsIntoView(state: ListboxState): React.Ref<HTMLDivElement> {\n  const { activeOption } = state;\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (scrollContainerRef.current && activeOption && canUseDOM()) {\n      const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`) as HTMLElement;\n\n      if (!activeOptionElement) {\n        return;\n      }\n\n      const { offsetHeight, offsetTop } = activeOptionElement;\n      const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;\n\n      const isAbove = offsetTop < scrollTop;\n      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n      // add a small buffer for general visual nicety\n      // it looks slightly better if the option has some space from the top/bottom while arrowing\n      const buffer = 2;\n\n      if (isAbove) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - buffer);\n      } else if (isBelow) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n      }\n    }\n  }, [activeOption]);\n\n  return scrollContainerRef;\n}\n"],"names":["React","canUseDOM","useScrollOptionsIntoView","state","activeOption","scrollContainerRef","useRef","useEffect","current","activeOptionElement","querySelector","id","offsetHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAQ,4BAA4B;AAGtD,OAAO,SAASC,yBAAyBC,KAAmB,EAA6B;IACvF,MAAM,EAAEC,aAAY,EAAE,GAAGD;IACzB,MAAME,qBAAqBL,MAAMM,MAAM,CAAiB,IAAI;IAE5DN,MAAMO,SAAS,CAAC,IAAM;QACpB,IAAIF,mBAAmBG,OAAO,IAAIJ,gBAAgBH,aAAa;YAC7D,MAAMQ,sBAAsBJ,mBAAmBG,OAAO,CAACE,aAAa,CAAC,CAAC,CAAC,EAAEN,aAAaO,EAAE,CAAC,CAAC;YAE1F,IAAI,CAACF,qBAAqB;gBACxB;YACF,CAAC;YAED,MAAM,EAAEG,aAAY,EAAEC,UAAS,EAAE,GAAGJ;YACpC,MAAM,EAAEG,cAAcE,mBAAkB,EAAEC,UAAS,EAAE,GAAGV,mBAAmBG,OAAO;YAElF,MAAMQ,UAAUH,YAAYE;YAC5B,MAAME,UAAUJ,YAAYD,eAAeG,YAAYD;YAEvD,+CAA+C;YAC/C,2FAA2F;YAC3F,MAAMI,SAAS;YAEf,IAAIF,SAAS;gBACXX,mBAAmBG,OAAO,CAACW,QAAQ,CAAC,GAAGN,YAAYK;YACrD,OAAO,IAAID,SAAS;gBAClBZ,mBAAmBG,OAAO,CAACW,QAAQ,CAAC,GAAGN,YAAYC,qBAAqBF,eAAeM;YACzF,CAAC;QACH,CAAC;IACH,GAAG;QAACd;KAAa;IAEjB,OAAOC;AACT,CAAC"}