@fluentui/react-combobox 9.0.0-beta.9 → 9.0.0

package/lib-amd/utils/OptionCollection.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionCollection.types.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/utils/OptionCollection.types.ts"],"names":[],"mappings":"","sourcesContent":["export type OptionValue = {\n  /** The disabled state of the option. */\n  disabled?: boolean;\n\n  /** The `id` attribute of the option. */\n  id: string;\n\n  /** The `text` string for the option. */\n  text: string;\n\n  /** The value string of the option. */\n  value: string;\n};\n\nexport type OptionCollectionState = {\n  /** The total number of options in the collection. */\n  getCount: () => number;\n\n  /** Returns the index of an option by key. */\n  getIndexOfId(id: string): number;\n\n  /** Returns the option data for the nth option. */\n  getOptionAtIndex(index: number): OptionValue | undefined;\n\n  /** Returns the option data by key. */\n  getOptionById(id: string): OptionValue | undefined;\n\n  /** Returns an array of options filtered by a value matching function against the option's text string. */\n  getOptionsMatchingText(matcher: (value: string) => boolean): OptionValue[];\n\n  /** The unordered option data. */\n  options: OptionValue[];\n\n  /* A function that child options call to register their values. Returns a function to unregister the option. */\n  registerOption: (option: OptionValue, element: HTMLElement) => () => void;\n};\n"]}

package/lib-amd/utils/Selection.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Selection.types.js.map

package/lib-amd/utils/Selection.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selection.types.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/utils/Selection.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type SelectionProps = {\n  /* For an uncontrolled component, sets the initial selection */\n  defaultSelectedOptions?: string[];\n\n  /**\n   * Sets the selection type to multiselect.\n   * Set this to true for multiselect, even if fully controlling selection state.\n   * This enables styles and accessibility properties to be set.\n   * @default false\n   */\n  multiselect?: boolean;\n\n  /* Callback when an option is selected */\n  onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;\n\n  /**\n   * An array of selected option keys.\n   * Use this with `onOptionSelect` to directly control the selected option(s)\n   */\n  selectedOptions?: string[];\n};\n\n/* Values returned by the useSelection hook */\nexport type SelectionState = {\n  clearSelection: (event: SelectionEvents) => void;\n  selectedOptions: string[];\n  selectOption: (event: SelectionEvents, option: OptionValue) => void;\n};\n\n/*\n * Data for the onOptionSelect callback.\n * `optionValue` and `optionText` will be undefined if multiple options are modified at once.\n */\nexport type OptionOnSelectData = {\n  optionValue: string | undefined;\n  optionText: string | undefined;\n  selectedOptions: string[];\n};\n\n/* Possible event types for onOptionSelect */\nexport type SelectionEvents =\n  | React.ChangeEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"]}

package/lib-amd/utils/dropdownKeyActions.js

@@ -0,0 +1,85 @@
+define(["require", "exports", "@fluentui/keyboard-keys"], function (require, exports, keys) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getIndexFromAction = exports.getDropdownActionFromKey = void 0;
+    /**
+     * Converts a keyboard interaction into a defined action
+     */
+    function getDropdownActionFromKey(e, options) {
+        if (options === void 0) { options = {}; }
+        var _a = options.open, open = _a === void 0 ? true : _a, _b = options.multiselect, multiselect = _b === void 0 ? false : _b;
+        var code = e.key;
+        var altKey = e.altKey, ctrlKey = e.ctrlKey, key = e.key, metaKey = e.metaKey;
+        // typing action occurs whether open or closed
+        if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {
+            return 'Type';
+        }
+        // handle opening the dropdown if closed
+        if (!open) {
+            if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {
+                return 'Open';
+            }
+            // if the dropdown is closed and an action did not match the above, do nothing
+            return 'None';
+        }
+        // select or close actions
+        if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {
+            return 'CloseSelect';
+        }
+        if (multiselect && code === keys.Space) {
+            return 'Select';
+        }
+        if (code === keys.Escape) {
+            return 'Close';
+        }
+        // navigation interactions
+        if (code === keys.ArrowDown) {
+            return 'Next';
+        }
+        if (code === keys.ArrowUp) {
+            return 'Previous';
+        }
+        if (code === keys.Home) {
+            return 'First';
+        }
+        if (code === keys.End) {
+            return 'Last';
+        }
+        if (code === keys.PageUp) {
+            return 'PageUp';
+        }
+        if (code === keys.PageDown) {
+            return 'PageDown';
+        }
+        if (code === keys.Tab) {
+            return 'Tab';
+        }
+        // if nothing matched, return none
+        return 'None';
+    }
+    exports.getDropdownActionFromKey = getDropdownActionFromKey;
+    /**
+     * Returns the requested option index from an action
+     */
+    function getIndexFromAction(action, currentIndex, maxIndex) {
+        switch (action) {
+            case 'Next':
+                return Math.min(maxIndex, currentIndex + 1);
+                break;
+            case 'Previous':
+                return Math.max(0, currentIndex - 1);
+            case 'First':
+                return 0;
+            case 'Last':
+                return maxIndex;
+            case 'PageDown':
+                return Math.min(maxIndex, currentIndex + 10);
+            case 'PageUp':
+                return Math.max(0, currentIndex - 10);
+            default:
+                return currentIndex;
+        }
+    }
+    exports.getIndexFromAction = getIndexFromAction;
+});
+//# sourceMappingURL=dropdownKeyActions.js.map

package/lib-amd/utils/dropdownKeyActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdownKeyActions.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/utils/dropdownKeyActions.ts"],"names":[],"mappings":"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","sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n  | 'Close'\n  | 'CloseSelect'\n  | 'First'\n  | 'Last'\n  | 'Next'\n  | 'None'\n  | 'Open'\n  | 'PageDown'\n  | 'PageUp'\n  | 'Previous'\n  | 'Select'\n  | 'Tab'\n  | 'Type';\n\nexport interface DropdownActionOptions {\n  open?: boolean;\n  multiselect?: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n  e: KeyboardEvent | React.KeyboardEvent,\n  options: DropdownActionOptions = {},\n): DropdownActions {\n  const { open = true, multiselect = false } = options;\n  const code = e.key;\n  const { altKey, ctrlKey, key, metaKey } = e;\n\n  // typing action occurs whether open or closed\n  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n    return 'Type';\n  }\n\n  // handle opening the dropdown if closed\n  if (!open) {\n    if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {\n      return 'Open';\n    }\n\n    // if the dropdown is closed and an action did not match the above, do nothing\n    return 'None';\n  }\n\n  // select or close actions\n  if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {\n    return 'CloseSelect';\n  }\n  if (multiselect && code === keys.Space) {\n    return 'Select';\n  }\n  if (code === keys.Escape) {\n    return 'Close';\n  }\n\n  // navigation interactions\n  if (code === keys.ArrowDown) {\n    return 'Next';\n  }\n  if (code === keys.ArrowUp) {\n    return 'Previous';\n  }\n  if (code === keys.Home) {\n    return 'First';\n  }\n  if (code === keys.End) {\n    return 'Last';\n  }\n  if (code === keys.PageUp) {\n    return 'PageUp';\n  }\n  if (code === keys.PageDown) {\n    return 'PageDown';\n  }\n  if (code === keys.Tab) {\n    return 'Tab';\n  }\n\n  // if nothing matched, return none\n  return 'None';\n}\n\n/**\n * Returns the requested option index from an action\n */\nexport function getIndexFromAction(action: DropdownActions, currentIndex: number, maxIndex: number): number {\n  switch (action) {\n    case 'Next':\n      return Math.min(maxIndex, currentIndex + 1);\n      break;\n    case 'Previous':\n      return Math.max(0, currentIndex - 1);\n    case 'First':\n      return 0;\n    case 'Last':\n      return maxIndex;\n    case 'PageDown':\n      return Math.min(maxIndex, currentIndex + 10);\n    case 'PageUp':\n      return Math.max(0, currentIndex - 10);\n    default:\n      return currentIndex;\n  }\n}\n"]}

package/lib-amd/utils/internalTokens.js

@@ -0,0 +1,11 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.iconSizes = void 0;
+    exports.iconSizes = {
+        small: '16px',
+        medium: '20px',
+        large: '24px',
+    };
+});
+//# sourceMappingURL=internalTokens.js.map

package/lib-amd/utils/internalTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internalTokens.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/utils/internalTokens.ts"],"names":[],"mappings":";;;;IAAa,QAAA,SAAS,GAAG;QACvB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd,CAAC","sourcesContent":["export const iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n"]}

package/lib-amd/utils/useComboboxBaseState.js

@@ -0,0 +1,76 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../utils/useOptionCollection", "../utils/useSelection"], function (require, exports, tslib_1, React, react_utilities_1, useOptionCollection_1, useSelection_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useComboboxBaseState = void 0;
+    /**
+     * State shared between Combobox and Dropdown components
+     */
+    var useComboboxBaseState = function (props) {
+        var _a = props.appearance, appearance = _a === void 0 ? 'outline' : _a, children = props.children, _b = props.editable, editable = _b === void 0 ? false : _b, _c = props.inlinePopup, inlinePopup = _c === void 0 ? false : _c, multiselect = props.multiselect, onOpenChange = props.onOpenChange, _d = props.size, size = _d === void 0 ? 'medium' : _d;
+        var optionCollection = useOptionCollection_1.useOptionCollection();
+        var getOptionAtIndex = optionCollection.getOptionAtIndex, getOptionsMatchingText = optionCollection.getOptionsMatchingText;
+        var _e = React.useState(), activeOption = _e[0], setActiveOption = _e[1];
+        // track whether keyboard focus outline should be shown
+        // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
+        var _f = React.useState(false), focusVisible = _f[0], setFocusVisible = _f[1];
+        // track focused state to conditionally render collapsed listbox
+        var _g = React.useState(false), hasFocus = _g[0], setHasFocus = _g[1];
+        var ignoreNextBlur = React.useRef(false);
+        var selectionState = useSelection_1.useSelection(props);
+        var selectedOptions = selectionState.selectedOptions;
+        // calculate value based on props, internal value changes, and selected options
+        var isFirstMount = react_utilities_1.useFirstMount();
+        var _h = react_utilities_1.useControllableState({
+            state: props.value,
+            initialState: undefined,
+        }), controllableValue = _h[0], setValue = _h[1];
+        var value = React.useMemo(function () {
+            // 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;
+            }
+            if (multiselect) {
+                // editable inputs should not display multiple selected options in the input as text
+                return editable ? '' : selectedOptions.join(', ');
+            }
+            return selectedOptions[0];
+        }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);
+        // Handle open state, which is shared with options in context
+        var _j = react_utilities_1.useControllableState({
+            state: props.open,
+            defaultState: props.defaultOpen,
+            initialState: false,
+        }), open = _j[0], setOpenState = _j[1];
+        var setOpen = React.useCallback(function (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(function () {
+            if (open && !activeOption) {
+                // if it is single-select and there is a selected option, start at the selected option
+                if (!multiselect && selectedOptions.length > 0) {
+                    var selectedOption = getOptionsMatchingText(function (v) { return v === selectedOptions[0]; }).pop();
+                    selectedOption && setActiveOption(selectedOption);
+                }
+                // default to starting at the first option
+                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 tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, optionCollection), selectionState), { activeOption: activeOption, appearance: appearance, focusVisible: focusVisible, hasFocus: hasFocus, ignoreNextBlur: ignoreNextBlur, inlinePopup: inlinePopup, open: open, setActiveOption: setActiveOption, setFocusVisible: setFocusVisible, setHasFocus: setHasFocus, setOpen: setOpen, setValue: setValue, size: size, value: value });
+    };
+    exports.useComboboxBaseState = useComboboxBaseState;
+});
+//# sourceMappingURL=useComboboxBaseState.js.map

package/lib-amd/utils/useComboboxBaseState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxBaseState.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"names":[],"mappings":"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","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, getOptionsMatchingText } = 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    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptions.join(', ');\n    }\n\n    return selectedOptions[0];\n  }, [controllableValue, editable, isFirstMount, 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 = getOptionsMatchingText(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"]}

package/lib-amd/utils/useComboboxPopup.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "tslib", "@fluentui/react-positioning", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_positioning_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useComboboxPopup = void 0;
+    function useComboboxPopup(props, triggerShorthand, listboxShorthand) {
+        var positioning = props.positioning;
+        // popper options
+        var popperOptions = tslib_1.__assign({ position: 'below', align: 'start', offset: { crossAxis: 0, mainAxis: 2 } }, react_positioning_1.resolvePositioningShorthand(positioning));
+        var _a = react_positioning_1.usePositioning(popperOptions), targetRef = _a.targetRef, containerRef = _a.containerRef;
+        var listboxRef = react_utilities_1.useMergedRefs(listboxShorthand === null || listboxShorthand === void 0 ? void 0 : listboxShorthand.ref, containerRef);
+        var listbox = listboxShorthand && tslib_1.__assign(tslib_1.__assign({}, listboxShorthand), { ref: listboxRef });
+        return [tslib_1.__assign(tslib_1.__assign({}, triggerShorthand), { ref: react_utilities_1.useMergedRefs(triggerShorthand === null || triggerShorthand === void 0 ? void 0 : triggerShorthand.ref, targetRef) }), listbox];
+    }
+    exports.useComboboxPopup = useComboboxPopup;
+});
+//# sourceMappingURL=useComboboxPopup.js.map

package/lib-amd/utils/useComboboxPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxPopup.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/utils/useComboboxPopup.ts"],"names":[],"mappings":";;;;IAgBA,SAAgB,gBAAgB,CAC9B,KAAwB,EACxB,gBAAqF,EACrF,gBAAyD;QAKjD,IAAA,WAAW,GAAK,KAAK,YAAV,CAAW;QAE9B,iBAAiB;QACjB,IAAM,aAAa,sBACjB,QAAQ,EAAE,OAAgB,EAC1B,KAAK,EAAE,OAAgB,EACvB,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,IAClC,+CAA2B,CAAC,WAAW,CAAC,CAC5C,CAAC;QAEI,IAAA,KAA8B,kCAAc,CAAC,aAAa,CAAC,EAAzD,SAAS,eAAA,EAAE,YAAY,kBAAkC,CAAC;QAElE,IAAM,UAAU,GAAG,+BAAa,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,GAAG,EAAE,YAAY,CAAC,CAAC;QACtE,IAAM,OAAO,GAAG,gBAAgB,0CAAS,gBAAgB,KAAE,GAAG,EAAE,UAAU,GAAE,CAAC;QAE7E,OAAO,uCAAM,gBAAgB,KAAE,GAAG,EAAE,+BAAa,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,GAAG,EAAE,SAAS,CAAC,KAAI,OAAO,CAAC,CAAC;IAClG,CAAC;IAxBD,4CAwBC","sourcesContent":["import { 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  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\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"]}

package/lib-amd/utils/useOptionCollection.js

@@ -0,0 +1,65 @@
+define(["require", "exports", "tslib", "react"], function (require, exports, tslib_1, React) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useOptionCollection = void 0;
+    /**
+     * A hook for managing a collection of child Options
+     */
+    var useOptionCollection = function () {
+        var nodes = React.useRef([]);
+        var collectionAPI = React.useMemo(function () {
+            var getCount = function () { return nodes.current.length; };
+            var getOptionAtIndex = function (index) { var _a; return (_a = nodes.current[index]) === null || _a === void 0 ? void 0 : _a.option; };
+            var getIndexOfId = function (id) { return nodes.current.findIndex(function (node) { return node.option.id === id; }); };
+            var getOptionById = function (id) {
+                var item = nodes.current.find(function (node) { return node.option.id === id; });
+                return item === null || item === void 0 ? void 0 : item.option;
+            };
+            var getOptionsMatchingText = function (matcher) {
+                return nodes.current.filter(function (node) { return matcher(node.option.text); }).map(function (node) { return node.option; });
+            };
+            return {
+                getCount: getCount,
+                getOptionAtIndex: getOptionAtIndex,
+                getIndexOfId: getIndexOfId,
+                getOptionById: getOptionById,
+                getOptionsMatchingText: getOptionsMatchingText,
+            };
+        }, []);
+        var registerOption = React.useCallback(function (option, element) {
+            var _a;
+            var index = nodes.current.findIndex(function (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 (((_a = nodes.current[index]) === null || _a === void 0 ? void 0 : _a.option.id) !== option.id) {
+                var newItem = {
+                    element: element,
+                    option: option,
+                };
+                // If an index is not found we will push the element to the end.
+                if (index === -1) {
+                    nodes.current = tslib_1.__spreadArray(tslib_1.__spreadArray([], nodes.current), [newItem]);
+                }
+                else {
+                    nodes.current.splice(index, 0, newItem);
+                }
+            }
+            // return the unregister function
+            return function () {
+                nodes.current = nodes.current.filter(function (node) { return node.option.id !== option.id; });
+            };
+        }, []);
+        return tslib_1.__assign(tslib_1.__assign({}, collectionAPI), { options: nodes.current.map(function (node) { return node.option; }), registerOption: registerOption });
+    };
+    exports.useOptionCollection = useOptionCollection;
+});
+//# sourceMappingURL=useOptionCollection.js.map

package/lib-amd/utils/useOptionCollection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptionCollection.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/utils/useOptionCollection.ts"],"names":[],"mappings":"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","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: (value: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingText,\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"]}

package/lib-amd/utils/useScrollOptionsIntoView.js

@@ -0,0 +1,33 @@
+define(["require", "exports", "react", "@fluentui/react-utilities"], function (require, exports, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useScrollOptionsIntoView = void 0;
+    function useScrollOptionsIntoView(state) {
+        var activeOption = state.activeOption;
+        var scrollContainerRef = React.useRef(null);
+        React.useEffect(function () {
+            if (scrollContainerRef.current && activeOption && react_utilities_1.canUseDOM()) {
+                var activeOptionElement = scrollContainerRef.current.querySelector("#" + activeOption.id);
+                if (!activeOptionElement) {
+                    return;
+                }
+                var offsetHeight = activeOptionElement.offsetHeight, offsetTop = activeOptionElement.offsetTop;
+                var _a = scrollContainerRef.current, parentOffsetHeight = _a.offsetHeight, scrollTop = _a.scrollTop;
+                var isAbove = offsetTop < scrollTop;
+                var 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
+                var buffer = 2;
+                if (isAbove) {
+                    scrollContainerRef.current.scrollTo(0, offsetTop - buffer);
+                }
+                else if (isBelow) {
+                    scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
+                }
+            }
+        }, [activeOption]);
+        return scrollContainerRef;
+    }
+    exports.useScrollOptionsIntoView = useScrollOptionsIntoView;
+});
+//# sourceMappingURL=useScrollOptionsIntoView.js.map

package/lib-amd/utils/useScrollOptionsIntoView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollOptionsIntoView.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/utils/useScrollOptionsIntoView.ts"],"names":[],"mappings":";;;;IAIA,SAAgB,wBAAwB,CAAC,KAAmB;QAClD,IAAA,YAAY,GAAK,KAAK,aAAV,CAAW;QAC/B,IAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;QAE9D,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,kBAAkB,CAAC,OAAO,IAAI,YAAY,IAAI,2BAAS,EAAE,EAAE;gBAC7D,IAAM,mBAAmB,GAAG,kBAAkB,CAAC,OAAO,CAAC,aAAa,CAAC,MAAI,YAAY,CAAC,EAAI,CAAgB,CAAC;gBAE3G,IAAI,CAAC,mBAAmB,EAAE;oBACxB,OAAO;iBACR;gBAEO,IAAA,YAAY,GAAgB,mBAAmB,aAAnC,EAAE,SAAS,GAAK,mBAAmB,UAAxB,CAAyB;gBAClD,IAAA,KAAkD,kBAAkB,CAAC,OAAO,EAA5D,kBAAkB,kBAAA,EAAE,SAAS,eAA+B,CAAC;gBAEnF,IAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;gBACtC,IAAM,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,kBAAkB,CAAC;gBAE1E,+CAA+C;gBAC/C,2FAA2F;gBAC3F,IAAM,MAAM,GAAG,CAAC,CAAC;gBAEjB,IAAI,OAAO,EAAE;oBACX,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;iBAC5D;qBAAM,IAAI,OAAO,EAAE;oBAClB,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,SAAS,GAAG,kBAAkB,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC;iBAChG;aACF;QACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;QAEnB,OAAO,kBAAkB,CAAC;IAC5B,CAAC;IA/BD,4DA+BC","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"]}

package/lib-amd/utils/useSelection.js

@@ -0,0 +1,42 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSelection = void 0;
+    var useSelection = function (props) {
+        var defaultSelectedOptions = props.defaultSelectedOptions, multiselect = props.multiselect, onOptionSelect = props.onOptionSelect;
+        var _a = react_utilities_1.useControllableState({
+            state: props.selectedOptions,
+            defaultState: defaultSelectedOptions,
+            initialState: [],
+        }), selectedOptions = _a[0], setSelectedOptions = _a[1];
+        var selectOption = react_1.useCallback(function (event, option) {
+            // if the option is disabled, do nothing
+            if (option.disabled) {
+                return;
+            }
+            // for single-select, always return the selected option
+            var newSelection = [option.value];
+            // toggle selected state of the option for multiselect
+            if (multiselect) {
+                var selectedIndex = selectedOptions.findIndex(function (o) { return o === option.value; });
+                if (selectedIndex > -1) {
+                    // deselect option
+                    newSelection = tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedOptions.slice(0, selectedIndex)), selectedOptions.slice(selectedIndex + 1));
+                }
+                else {
+                    // select option
+                    newSelection = tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedOptions), [option.value]);
+                }
+            }
+            setSelectedOptions(newSelection);
+            onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });
+        }, [onOptionSelect, multiselect, selectedOptions, setSelectedOptions]);
+        var clearSelection = function (event) {
+            setSelectedOptions([]);
+            onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });
+        };
+        return { clearSelection: clearSelection, selectOption: selectOption, selectedOptions: selectedOptions };
+    };
+    exports.useSelection = useSelection;
+});
+//# sourceMappingURL=useSelection.js.map

package/lib-amd/utils/useSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelection.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/utils/useSelection.ts"],"names":[],"mappings":";;;;IAKO,IAAM,YAAY,GAAG,UAAC,KAAqB;QACxC,IAAA,sBAAsB,GAAkC,KAAK,uBAAvC,EAAE,WAAW,GAAqB,KAAK,YAA1B,EAAE,cAAc,GAAK,KAAK,eAAV,CAAW;QAEhE,IAAA,KAAwC,sCAAoB,CAAC;YACjE,KAAK,EAAE,KAAK,CAAC,eAAe;YAC5B,YAAY,EAAE,sBAAsB;YACpC,YAAY,EAAE,EAAE;SACjB,CAAC,EAJK,eAAe,QAAA,EAAE,kBAAkB,QAIxC,CAAC;QAEH,IAAM,YAAY,GAAG,mBAAW,CAC9B,UAAC,KAAsB,EAAE,MAAmB;YAC1C,wCAAwC;YACxC,IAAI,MAAM,CAAC,QAAQ,EAAE;gBACnB,OAAO;aACR;YAED,uDAAuD;YACvD,IAAI,YAAY,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAElC,sDAAsD;YACtD,IAAI,WAAW,EAAE;gBACf,IAAM,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,MAAM,CAAC,KAAK,EAAlB,CAAkB,CAAC,CAAC;gBACzE,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE;oBACtB,kBAAkB;oBAClB,YAAY,mDAAO,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC,GAAK,eAAe,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC;iBAC1G;qBAAM;oBACL,gBAAgB;oBAChB,YAAY,mDAAO,eAAe,IAAE,MAAM,CAAC,KAAK,EAAC,CAAC;iBACnD;aACF;YAED,kBAAkB,CAAC,YAAY,CAAC,CAAC;YACjC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,CAAC,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;QACjH,CAAC,EACD,CAAC,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,kBAAkB,CAAC,CACnE,CAAC;QAEF,IAAM,cAAc,GAAG,UAAC,KAAsB;YAC5C,kBAAkB,CAAC,EAAE,CAAC,CAAC;YACvB,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;QAClG,CAAC,CAAC;QAEF,OAAO,EAAE,cAAc,gBAAA,EAAE,YAAY,cAAA,EAAE,eAAe,iBAAA,EAAE,CAAC;IAC3D,CAAC,CAAC;IA3CW,QAAA,YAAY,gBA2CvB","sourcesContent":["import { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n  const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n  const [selectedOptions, setSelectedOptions] = useControllableState({\n    state: props.selectedOptions,\n    defaultState: defaultSelectedOptions,\n    initialState: [],\n  });\n\n  const selectOption = useCallback(\n    (event: SelectionEvents, option: OptionValue) => {\n      // if the option is disabled, do nothing\n      if (option.disabled) {\n        return;\n      }\n\n      // for single-select, always return the selected option\n      let newSelection = [option.value];\n\n      // toggle selected state of the option for multiselect\n      if (multiselect) {\n        const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n        if (selectedIndex > -1) {\n          // deselect option\n          newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n        } else {\n          // select option\n          newSelection = [...selectedOptions, option.value];\n        }\n      }\n\n      setSelectedOptions(newSelection);\n      onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n    },\n    [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n  );\n\n  const clearSelection = (event: SelectionEvents) => {\n    setSelectedOptions([]);\n    onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n  };\n\n  return { clearSelection, selectOption, selectedOptions };\n};\n"]}

package/lib-amd/utils/useTriggerListboxSlots.js

@@ -0,0 +1,104 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../utils/dropdownKeyActions"], function (require, exports, tslib_1, React, react_utilities_1, dropdownKeyActions_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTriggerListboxSlots = void 0;
+    /*
+     * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,
+     * with the semantics and event handlers needed for the Combobox and Dropdown components.
+     * The element type of the ref should always match the element type used in the trigger shorthand.
+     */
+    function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
+        var multiselect = props.multiselect;
+        var activeOption = state.activeOption, getCount = state.getCount, getIndexOfId = state.getIndexOfId, getOptionAtIndex = state.getOptionAtIndex, ignoreNextBlur = state.ignoreNextBlur, open = state.open, selectOption = state.selectOption, setActiveOption = state.setActiveOption, setFocusVisible = state.setFocusVisible, setHasFocus = state.setHasFocus, setOpen = state.setOpen;
+        // handle trigger focus/blur
+        var triggerRef = React.useRef(null);
+        // resolve listbox shorthand props
+        var listboxId = react_utilities_1.useId('fluent-listbox', listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id);
+        var listbox = listboxSlot && tslib_1.__assign({ id: listboxId, multiselect: multiselect, tabIndex: undefined }, listboxSlot);
+        // resolve trigger shorthand props
+        var trigger = tslib_1.__assign(tslib_1.__assign({ 'aria-expanded': open, 'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : activeOption.id : undefined, role: 'combobox' }, triggerSlot), { 
+            // explicitly type the ref as an intersection here to prevent type errors
+            // since the `children` prop has mutually incompatible types between input/button
+            // functionally both ref and triggerRef will always be the same element type
+            ref: react_utilities_1.useMergedRefs(ref, triggerSlot === null || triggerSlot === void 0 ? void 0 : triggerSlot.ref, triggerRef) });
+        /*
+         * Handle focus when clicking the listbox popup:
+         * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)
+         * 2. Do not close the listbox on button/input blur when clicking into the listbox
+         */
+        var listboxOnClick = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(function (event) {
+            var _a;
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, listbox === null || listbox === void 0 ? void 0 : listbox.onClick));
+        var listboxOnMouseOver = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(function (event) {
+            setFocusVisible(false);
+        }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseOver));
+        var listboxOnMouseDown = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(function (event) {
+            ignoreNextBlur.current = true;
+        }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseDown));
+        // listbox is nullable, only add event handlers if it exists
+        if (listbox) {
+            listbox.onClick = listboxOnClick;
+            listbox.onMouseOver = listboxOnMouseOver;
+            listbox.onMouseDown = listboxOnMouseDown;
+        }
+        // the trigger should open/close the popup on click or blur
+        trigger.onBlur = react_utilities_1.mergeCallbacks(function (event) {
+            if (!ignoreNextBlur.current) {
+                setOpen(event, false);
+            }
+            ignoreNextBlur.current = false;
+            setHasFocus(false);
+        }, trigger.onBlur);
+        trigger.onClick = react_utilities_1.mergeCallbacks(function (event) {
+            setOpen(event, !open);
+        }, trigger.onClick);
+        trigger.onFocus = react_utilities_1.mergeCallbacks(function (event) {
+            setHasFocus(true);
+        }, trigger.onFocus);
+        // handle combobox keyboard interaction
+        trigger.onKeyDown = react_utilities_1.mergeCallbacks(function (event) {
+            var action = dropdownKeyActions_1.getDropdownActionFromKey(event, { open: open, multiselect: multiselect });
+            var maxIndex = getCount() - 1;
+            var activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
+            var newIndex = activeIndex;
+            switch (action) {
+                case 'Open':
+                    event.preventDefault();
+                    setFocusVisible(true);
+                    setOpen(event, true);
+                    break;
+                case 'Close':
+                    // stop propagation for escape key to avoid dismissing any parent popups
+                    event.stopPropagation();
+                    event.preventDefault();
+                    setOpen(event, false);
+                    break;
+                case 'CloseSelect':
+                    !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);
+                // fallthrough
+                case 'Select':
+                    activeOption && selectOption(event, activeOption);
+                    event.preventDefault();
+                    break;
+                case 'Tab':
+                    !multiselect && activeOption && selectOption(event, activeOption);
+                    break;
+                default:
+                    newIndex = dropdownKeyActions_1.getIndexFromAction(action, activeIndex, maxIndex);
+            }
+            if (newIndex !== activeIndex) {
+                // prevent default page scroll/keyboard action if the index changed
+                event.preventDefault();
+                setActiveOption(getOptionAtIndex(newIndex));
+                setFocusVisible(true);
+            }
+        }, trigger.onKeyDown);
+        trigger.onMouseOver = react_utilities_1.mergeCallbacks(function (event) {
+            setFocusVisible(false);
+        }, trigger.onMouseOver);
+        return [trigger, listbox];
+    }
+    exports.useTriggerListboxSlots = useTriggerListboxSlots;
+});
+//# sourceMappingURL=useTriggerListboxSlots.js.map

package/lib-amd/utils/useTriggerListboxSlots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTriggerListboxSlots.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLButtonElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLInputElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/*\n * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLButtonElement | HTMLInputElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { multiselect } = props;\n  const {\n    activeOption,\n    getCount,\n    getIndexOfId,\n    getOptionAtIndex,\n    ignoreNextBlur,\n    open,\n    selectOption,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n  } = state;\n\n  // handle trigger focus/blur\n  const triggerRef: typeof ref = React.useRef(null);\n\n  // resolve listbox shorthand props\n  const listboxId = useId('fluent-listbox', listboxSlot?.id);\n  const listbox: typeof listboxSlot = listboxSlot && {\n    id: listboxId,\n    multiselect,\n    tabIndex: undefined,\n    ...listboxSlot,\n  };\n\n  // resolve trigger shorthand props\n  const trigger: typeof triggerSlot = {\n    'aria-expanded': open,\n    'aria-activedescendant': open ? activeOption?.id : undefined,\n    role: 'combobox',\n    ...triggerSlot,\n    // explicitly type the ref as an intersection here to prevent type errors\n    // since the `children` prop has mutually incompatible types between input/button\n    // functionally both ref and triggerRef will always be the same element type\n    ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n  };\n\n  /*\n   * Handle focus when clicking the listbox popup:\n   * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n   * 2. Do not close the listbox on button/input blur when clicking into the listbox\n   */\n  const listboxOnClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      triggerRef.current?.focus();\n    }, listbox?.onClick),\n  );\n\n  const listboxOnMouseOver = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      setFocusVisible(false);\n    }, listbox?.onMouseOver),\n  );\n\n  const listboxOnMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      ignoreNextBlur.current = true;\n    }, listbox?.onMouseDown),\n  );\n\n  // listbox is nullable, only add event handlers if it exists\n  if (listbox) {\n    listbox.onClick = listboxOnClick;\n    listbox.onMouseOver = listboxOnMouseOver;\n    listbox.onMouseDown = listboxOnMouseDown;\n  }\n\n  // the trigger should open/close the popup on click or blur\n  trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n    if (!ignoreNextBlur.current) {\n      setOpen(event, false);\n    }\n\n    ignoreNextBlur.current = false;\n\n    setHasFocus(false);\n  }, trigger.onBlur);\n\n  trigger.onClick = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setOpen(event, !open);\n    },\n    trigger.onClick,\n  );\n\n  trigger.onFocus = mergeCallbacks(\n    (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n      setHasFocus(true);\n    },\n    trigger.onFocus,\n  );\n\n  // handle combobox keyboard interaction\n  trigger.onKeyDown = mergeCallbacks(\n    (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n      const action = getDropdownActionFromKey(event, { open, multiselect });\n      const maxIndex = getCount() - 1;\n      const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n      let newIndex = activeIndex;\n\n      switch (action) {\n        case 'Open':\n          event.preventDefault();\n          setFocusVisible(true);\n          setOpen(event, true);\n          break;\n        case 'Close':\n          // stop propagation for escape key to avoid dismissing any parent popups\n          event.stopPropagation();\n          event.preventDefault();\n          setOpen(event, false);\n          break;\n        case 'CloseSelect':\n          !multiselect && !activeOption?.disabled && setOpen(event, false);\n        // fallthrough\n        case 'Select':\n          activeOption && selectOption(event, activeOption);\n          event.preventDefault();\n          break;\n        case 'Tab':\n          !multiselect && activeOption && selectOption(event, activeOption);\n          break;\n        default:\n          newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n      }\n      if (newIndex !== activeIndex) {\n        // prevent default page scroll/keyboard action if the index changed\n        event.preventDefault();\n        setActiveOption(getOptionAtIndex(newIndex));\n        setFocusVisible(true);\n      }\n    },\n    trigger.onKeyDown,\n  );\n\n  trigger.onMouseOver = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setFocusVisible(false);\n    },\n    trigger.onMouseOver,\n  );\n\n  return [trigger, listbox];\n}\n"]}

package/lib-commonjs/Combobox.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Combobox/index"), exports);
 //# sourceMappingURL=Combobox.js.map

package/lib-commonjs/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Combobox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Combobox/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/Combobox.ts"],"sourcesContent":["export * from './components/Combobox/index';\n"]}

package/lib-commonjs/ComboboxField.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./components/ComboboxField/index"), exports);
+//# sourceMappingURL=ComboboxField.js.map

package/lib-commonjs/ComboboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/ComboboxField.ts"],"sourcesContent":["export * from './components/ComboboxField/index';\n"]}

package/lib-commonjs/Dropdown.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Dropdown/index"), exports);
 //# sourceMappingURL=Dropdown.js.map

package/lib-commonjs/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Dropdown/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/Dropdown.ts"],"sourcesContent":["export * from './components/Dropdown/index';\n"]}

package/lib-commonjs/Listbox.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Listbox/index"), exports);
 //# sourceMappingURL=Listbox.js.map