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

package/lib-amd/components/Combobox/useCombobox.js

@@ -0,0 +1,206 @@
+define(["require", "exports", "tslib", "react", "@fluentui/keyboard-keys", "@fluentui/react-icons", "@fluentui/react-utilities", "../../utils/dropdownKeyActions", "../../utils/useComboboxBaseState", "../../utils/useComboboxPopup", "../../utils/useTriggerListboxSlots", "../Listbox/Listbox"], function (require, exports, tslib_1, React, keyboard_keys_1, react_icons_1, react_utilities_1, dropdownKeyActions_1, useComboboxBaseState_1, useComboboxPopup_1, useTriggerListboxSlots_1, Listbox_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCombobox_unstable = void 0;
+    /**
+     * Create the state required to render Combobox.
+     *
+     * The returned state can be modified with hooks such as useComboboxStyles_unstable,
+     * before being passed to renderCombobox_unstable.
+     *
+     * @param props - props from this instance of Combobox
+     * @param ref - reference to root HTMLElement of Combobox
+     */
+    var useCombobox_unstable = function (props, ref) {
+        var _a, _b;
+        var _c, _d;
+        var baseState = useComboboxBaseState_1.useComboboxBaseState(tslib_1.__assign(tslib_1.__assign({}, props), { editable: true }));
+        var activeOption = baseState.activeOption, clearSelection = baseState.clearSelection, getIndexOfId = baseState.getIndexOfId, getOptionsMatchingText = baseState.getOptionsMatchingText, hasFocus = baseState.hasFocus, open = baseState.open, selectOption = baseState.selectOption, selectedOptions = baseState.selectedOptions, setActiveOption = baseState.setActiveOption, setFocusVisible = baseState.setFocusVisible, setOpen = baseState.setOpen, setValue = baseState.setValue, value = baseState.value;
+        var disabled = props.disabled, freeform = props.freeform, inlinePopup = props.inlinePopup, multiselect = props.multiselect;
+        var comboId = react_utilities_1.useId('combobox-');
+        var _e = react_utilities_1.getPartitionedNativeProps({
+            props: props,
+            primarySlotTagName: 'input',
+            excludedPropNames: ['children', 'size'],
+        }), triggerNativeProps = _e.primary, rootNativeProps = _e.root;
+        var rootRef = React.useRef(null);
+        var triggerRef = React.useRef(null);
+        // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
+        // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
+        // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
+        var _f = React.useState(false), hideActiveDescendant = _f[0], setHideActiveDescendant = _f[1];
+        // calculate listbox width style based on trigger width
+        var _g = React.useState(), popupDimensions = _g[0], setPopupDimensions = _g[1];
+        React.useEffect(function () {
+            var _a;
+            // only recalculate width when opening
+            if (open) {
+                var width = ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) + "px";
+                if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {
+                    setPopupDimensions({ width: width });
+                }
+            }
+        }, [open, popupDimensions]);
+        // set active option and selection based on typing
+        var getOptionFromInput = function (inputValue) {
+            var _a;
+            var searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
+            if (!searchString || searchString.length === 0) {
+                return;
+            }
+            var matcher = function (optionText) { return optionText.toLowerCase().indexOf(searchString) === 0; };
+            var matches = getOptionsMatchingText(matcher);
+            // return first matching option after the current active option, looping back to the top
+            if (matches.length > 1 && activeOption) {
+                var startIndex_1 = getIndexOfId(activeOption.id);
+                var nextMatch = matches.find(function (option) { return getIndexOfId(option.id) >= startIndex_1; });
+                return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
+            }
+            return (_a = matches[0]) !== null && _a !== void 0 ? _a : undefined;
+        };
+        /* Handle typed input */
+        // reset any typed value when an option is selected
+        baseState.selectOption = function (ev, option) {
+            setValue(undefined);
+            selectOption(ev, option);
+        };
+        var onTriggerBlur = function (ev) {
+            // handle selection and updating value if freeform is false
+            if (!baseState.open && !freeform) {
+                // select matching option, if the value fully matches
+                if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value.toLowerCase())) {
+                    baseState.selectOption(ev, activeOption);
+                }
+                // reset typed value when the input loses focus while collapsed, unless freeform is true
+                setValue(undefined);
+            }
+        };
+        baseState.setOpen = function (ev, newState) {
+            if (disabled) {
+                return;
+            }
+            if (!newState && !freeform) {
+                setValue(undefined);
+            }
+            setOpen(ev, newState);
+        };
+        // update value and active option based on input
+        var onTriggerChange = function (ev) {
+            var inputValue = ev.target.value;
+            // update uncontrolled value
+            baseState.setValue(inputValue);
+            // handle updating active option based on input
+            var matchingOption = getOptionFromInput(inputValue);
+            setActiveOption(matchingOption);
+            setFocusVisible(true);
+            // clear selection for single-select if the input value no longer matches the selection
+            if (!multiselect &&
+                selectedOptions.length === 1 &&
+                (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)) {
+                clearSelection(ev);
+            }
+        };
+        // open Combobox when typing
+        var onTriggerKeyDown = function (ev) {
+            if (!open && dropdownKeyActions_1.getDropdownActionFromKey(ev) === 'Type') {
+                baseState.setOpen(ev, true);
+            }
+            // clear activedescendant when moving the text insertion cursor
+            if (ev.key === keyboard_keys_1.ArrowLeft || ev.key === keyboard_keys_1.ArrowRight) {
+                setHideActiveDescendant(true);
+            }
+            else {
+                setHideActiveDescendant(false);
+            }
+        };
+        // resolve input and listbox slot props
+        var triggerSlot;
+        var listboxSlot;
+        triggerSlot = react_utilities_1.resolveShorthand(props.input, {
+            required: true,
+            defaultProps: tslib_1.__assign({ ref: react_utilities_1.useMergedRefs((_c = props.input) === null || _c === void 0 ? void 0 : _c.ref, triggerRef), type: 'text', value: value !== null && value !== void 0 ? value : '' }, triggerNativeProps),
+        });
+        triggerSlot.onChange = react_utilities_1.mergeCallbacks(triggerSlot.onChange, onTriggerChange);
+        triggerSlot.onBlur = react_utilities_1.mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);
+        triggerSlot.onKeyDown = react_utilities_1.mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);
+        // only resolve listbox slot if needed
+        listboxSlot =
+            open || hasFocus
+                ? react_utilities_1.resolveShorthand(props.listbox, {
+                    required: true,
+                    defaultProps: {
+                        children: props.children,
+                        style: popupDimensions,
+                    },
+                })
+                : undefined;
+        _a = useComboboxPopup_1.useComboboxPopup(props, triggerSlot, listboxSlot), triggerSlot = _a[0], listboxSlot = _a[1];
+        _b = useTriggerListboxSlots_1.useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot), triggerSlot = _b[0], listboxSlot = _b[1];
+        if (hideActiveDescendant) {
+            triggerSlot['aria-activedescendant'] = undefined;
+        }
+        var state = tslib_1.__assign({ components: {
+                root: 'div',
+                input: 'input',
+                expandIcon: 'span',
+                listbox: Listbox_1.Listbox,
+            }, root: react_utilities_1.resolveShorthand(props.root, {
+                required: true,
+                defaultProps: tslib_1.__assign({ 'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined }, rootNativeProps),
+            }), input: triggerSlot, listbox: listboxSlot, expandIcon: react_utilities_1.resolveShorthand(props.expandIcon, {
+                required: true,
+                defaultProps: {
+                    'aria-expanded': open,
+                    children: React.createElement(react_icons_1.ChevronDownRegular, null),
+                    role: 'button',
+                },
+            }) }, baseState);
+        state.root.ref = react_utilities_1.useMergedRefs(state.root.ref, rootRef);
+        /* handle open/close + focus change when clicking expandIcon */
+        var _h = state.expandIcon || {}, onIconMouseDown = _h.onMouseDown, onIconClick = _h.onClick;
+        var onExpandIconMouseDown = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(onIconMouseDown, function () {
+            // do not dismiss on blur when closing via clicking the icon
+            if (open) {
+                baseState.ignoreNextBlur.current = true;
+            }
+        }));
+        var onExpandIconClick = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(onIconClick, function (event) {
+            var _a;
+            // open and set focus
+            state.setOpen(event, !state.open);
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            // set focus visible=false, since this can only be done with the mouse/pointer
+            setFocusVisible(false);
+        }));
+        if (state.expandIcon) {
+            state.expandIcon.onMouseDown = onExpandIconMouseDown;
+            state.expandIcon.onClick = onExpandIconClick;
+            // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
+            // using the following steps:
+            // 1. If there is an aria-label, it is "Open [aria-label]"
+            // 2. If there is an aria-labelledby, it is "Open [aria-labelledby target]" (using aria-labelledby + ids)
+            // 3. If there is no aria-label/ledby attr, it falls back to "Open"
+            // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179
+            var hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];
+            var defaultOpenString = 'Open'; // this is english-only since it is the fallback
+            if (!hasExpandLabel) {
+                if (props['aria-labelledby']) {
+                    var chevronId = (_d = state.expandIcon.id) !== null && _d !== void 0 ? _d : comboId + "-chevron";
+                    var chevronLabelledBy = chevronId + " " + state.input['aria-labelledby'];
+                    state.expandIcon['aria-label'] = defaultOpenString;
+                    state.expandIcon.id = chevronId;
+                    state.expandIcon['aria-labelledby'] = chevronLabelledBy;
+                }
+                else if (props['aria-label']) {
+                    state.expandIcon['aria-label'] = defaultOpenString + " " + props['aria-label'];
+                }
+                else {
+                    state.expandIcon['aria-label'] = defaultOpenString;
+                }
+            }
+        }
+        return state;
+    };
+    exports.useCombobox_unstable = useCombobox_unstable;
+});
+//# sourceMappingURL=useCombobox.js.map

package/lib-amd/components/Combobox/useCombobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCombobox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { disabled, freeform, inlinePopup, multiselect } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      const width = `${rootRef.current?.clientWidth}px`;\n      if (width !== popupDimensions?.width) {\n        setPopupDimensions({ width });\n      }\n    }\n  }, [open, popupDimensions]);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.value.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (\n      !multiselect &&\n      selectedOptions.length === 1 &&\n      (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n    ) {\n      clearSelection(ev);\n    }\n  };\n\n  // open Combobox when typing\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n\n  // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: popupDimensions,\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n\n  const state: ComboboxState = {\n    components: {\n      root: 'div',\n      input: 'input',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n        ...rootNativeProps,\n      },\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n    }),\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n\n      // set focus visible=false, since this can only be done with the mouse/pointer\n      setFocusVisible(false);\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  return state;\n};\n"]}

package/lib-amd/components/Combobox/useComboboxStyles.js

@@ -0,0 +1,152 @@
+define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react", "../../utils/internalTokens"], function (require, exports, tslib_1, react_theme_1, react_1, internalTokens_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useComboboxStyles_unstable = exports.comboboxClassNames = void 0;
+    exports.comboboxClassNames = {
+        root: 'fui-Combobox',
+        input: 'fui-Combobox__input',
+        expandIcon: 'fui-Combobox__expandIcon',
+        listbox: 'fui-Combobox__listbox',
+    };
+    // Matches internal heights for Select and Input, but there are no theme variables for these
+    // field heights are 2px less than other controls, since the border is on the parent element.
+    var fieldHeights = {
+        small: '22px',
+        medium: '30px',
+        large: '38px',
+    };
+    /**
+     * Styles for Combobox
+     */
+    var useStyles = react_1.makeStyles({
+        root: tslib_1.__assign(tslib_1.__assign({ alignItems: 'center' }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { boxSizing: 'border-box', columnGap: react_theme_1.tokens.spacingHorizontalXXS, display: 'inline-grid', gridTemplateColumns: '1fr auto', justifyContent: 'space-between', minWidth: '250px', position: 'relative', 
+            // windows high contrast mode focus indicator
+            ':focus-within': {
+                outlineWidth: '2px',
+                outlineStyle: 'solid',
+                outlineColor: 'transparent',
+            }, 
+            // bottom focus border, shared with Input, Select, and SpinButton
+            '::after': tslib_1.__assign(tslib_1.__assign({ boxSizing: 'border-box', content: '""', position: 'absolute', left: '-1px', bottom: '-1px', right: '-1px', height: "max(2px, " + react_theme_1.tokens.borderRadiusMedium + ")", borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium, borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium }, react_1.shorthands.borderBottom(react_theme_1.tokens.strokeWidthThick, 'solid', react_theme_1.tokens.colorCompoundBrandStroke)), { clipPath: 'inset(calc(100% - 2px) 0 0 0)', transform: 'scaleX(0)', transitionProperty: 'transform', transitionDuration: react_theme_1.tokens.durationUltraFast, transitionDelay: react_theme_1.tokens.curveAccelerateMid, '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                } }), ':focus-within::after': {
+                transform: 'scaleX(1)',
+                transitionProperty: 'transform',
+                transitionDuration: react_theme_1.tokens.durationNormal,
+                transitionDelay: react_theme_1.tokens.curveDecelerateMid,
+                '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                },
+            }, ':focus-within:active::after': {
+                borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
+            } }),
+        listbox: tslib_1.__assign(tslib_1.__assign({ boxShadow: "" + react_theme_1.tokens.shadow16 }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { maxHeight: '80vh' }),
+        listboxCollapsed: {
+            display: 'none',
+        },
+        // size variants
+        small: {
+            paddingRight: react_theme_1.tokens.spacingHorizontalSNudge,
+        },
+        medium: {
+            paddingRight: react_theme_1.tokens.spacingHorizontalMNudge,
+        },
+        large: {
+            columnGap: react_theme_1.tokens.spacingHorizontalSNudge,
+            paddingRight: react_theme_1.tokens.spacingHorizontalM,
+        },
+        // appearance variants
+        outline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1 }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
+        outlineInteractive: {
+            '&:hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
+            '&:active': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
+        },
+        underline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderBottom(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStrokeAccessible)), react_1.shorthands.borderRadius(0)),
+        'filled-lighter': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1 }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorTransparentStroke)),
+        'filled-darker': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground3 }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorTransparentStroke)),
+        invalid: {
+            ':not(:focus-within),:hover:not(:focus-within)': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteRedBorder2)),
+        },
+        invalidUnderline: {
+            ':not(:focus-within),:hover:not(:focus-within)': {
+                borderBottomColor: react_theme_1.tokens.colorPaletteRedBorder2,
+            },
+        },
+        disabled: tslib_1.__assign(tslib_1.__assign({ cursor: 'not-allowed', backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
+    });
+    var useInputStyles = react_1.makeStyles({
+        input: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.border('0')), { color: react_theme_1.tokens.colorNeutralForeground1, fontFamily: react_theme_1.tokens.fontFamilyBase, '&:focus': {
+                outlineStyle: 'none',
+            }, '&::placeholder': {
+                color: react_theme_1.tokens.colorNeutralForeground4,
+                opacity: 1,
+            } }),
+        // size variants
+        small: tslib_1.__assign(tslib_1.__assign({ height: fieldHeights.small }, react_theme_1.typographyStyles.caption1), react_1.shorthands.padding(0, 0, 0, "calc(" + react_theme_1.tokens.spacingHorizontalSNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")),
+        medium: tslib_1.__assign(tslib_1.__assign({ height: fieldHeights.medium }, react_theme_1.typographyStyles.body1), react_1.shorthands.padding(0, 0, 0, "calc(" + react_theme_1.tokens.spacingHorizontalMNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")),
+        large: tslib_1.__assign(tslib_1.__assign({ height: fieldHeights.large }, react_theme_1.typographyStyles.body2), react_1.shorthands.padding(0, 0, 0, "calc(" + react_theme_1.tokens.spacingHorizontalM + " + " + react_theme_1.tokens.spacingHorizontalSNudge + ")")),
+        disabled: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            cursor: 'not-allowed',
+            '::placeholder': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+        },
+    });
+    var useIconStyles = react_1.makeStyles({
+        icon: {
+            boxSizing: 'border-box',
+            color: react_theme_1.tokens.colorNeutralStrokeAccessible,
+            cursor: 'pointer',
+            display: 'block',
+            fontSize: react_theme_1.tokens.fontSizeBase500,
+            // the SVG must have display: block for accurate positioning
+            // otherwise an extra inline space is inserted after the svg element
+            '& svg': {
+                display: 'block',
+            },
+        },
+        // icon size variants
+        small: {
+            fontSize: internalTokens_1.iconSizes.small,
+            marginLeft: react_theme_1.tokens.spacingHorizontalXXS,
+        },
+        medium: {
+            fontSize: internalTokens_1.iconSizes.medium,
+            marginLeft: react_theme_1.tokens.spacingHorizontalXXS,
+        },
+        large: {
+            fontSize: internalTokens_1.iconSizes.large,
+            marginLeft: react_theme_1.tokens.spacingHorizontalSNudge,
+        },
+        disabled: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            cursor: 'not-allowed',
+        },
+    });
+    /**
+     * Apply styling to the Combobox slots based on the state
+     */
+    var useComboboxStyles_unstable = function (state) {
+        var appearance = state.appearance, open = state.open, size = state.size;
+        var invalid = "" + state.input['aria-invalid'] === 'true';
+        var disabled = state.input.disabled;
+        var styles = useStyles();
+        var iconStyles = useIconStyles();
+        var inputStyles = useInputStyles();
+        state.root.className = react_1.mergeClasses(exports.comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
+        state.input.className = react_1.mergeClasses(exports.comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
+        if (state.listbox) {
+            state.listbox.className = react_1.mergeClasses(exports.comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
+        }
+        if (state.expandIcon) {
+            state.expandIcon.className = react_1.mergeClasses(exports.comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);
+        }
+        return state;
+    };
+    exports.useComboboxStyles_unstable = useComboboxStyles_unstable;
+});
+//# sourceMappingURL=useComboboxStyles.js.map

package/lib-amd/components/Combobox/useComboboxStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n  small: '22px',\n  medium: '30px',\n  large: '38px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    columnGap: tokens.spacingHorizontalXXS,\n    display: 'inline-grid',\n    gridTemplateColumns: '1fr auto',\n    justifyContent: 'space-between',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  input: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n  },\n\n  // size variants\n  small: {\n    height: fieldHeights.small,\n    ...typographyStyles.caption1,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  medium: {\n    height: fieldHeights.medium,\n    ...typographyStyles.body1,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  large: {\n    height: fieldHeights.large,\n    ...typographyStyles.body2,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    cursor: 'pointer',\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n  const { appearance, open, size } = state;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const disabled = state.input.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib-amd/components/ComboboxField/ComboboxField.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "@fluentui/react-field", "../../Combobox"], function (require, exports, react_field_1, Combobox_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ComboboxField = exports.comboboxFieldClassNames = void 0;
+    /** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */
+    exports.comboboxFieldClassNames = react_field_1.getDeprecatedFieldClassNames(Combobox_1.comboboxClassNames.root);
+    /** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */
+    exports.ComboboxField = react_field_1.makeDeprecatedField(Combobox_1.Combobox);
+});
+//# sourceMappingURL=ComboboxField.js.map

package/lib-amd/components/ComboboxField/ComboboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.tsx"],"names":[],"mappings":";;;;IAOA,yEAAyE;IAC5D,QAAA,uBAAuB,GAAG,0CAA4B,CAAC,6BAAkB,CAAC,IAAI,CAAC,CAAC;IAC7F,yEAAyE;IAC5D,QAAA,aAAa,GAA4C,iCAAmB,CAAC,mBAAQ,CAAC,CAAC","sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Combobox, comboboxClassNames, ComboboxProps } from '../../Combobox';\n\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport type ComboboxFieldProps = DeprecatedFieldProps<ComboboxProps>;\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport const comboboxFieldClassNames = getDeprecatedFieldClassNames(comboboxClassNames.root);\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport const ComboboxField: ForwardRefComponent<ComboboxFieldProps> = makeDeprecatedField(Combobox);\n"]}

package/lib-amd/components/ComboboxField/index.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./ComboboxField"], function (require, exports, tslib_1, ComboboxField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(ComboboxField_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/ComboboxField/index.js.map

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

package/lib-amd/components/Dropdown/Dropdown.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./useDropdown", "./renderDropdown", "./useDropdownStyles", "../../contexts/useComboboxContextValues"], function (require, exports, React, useDropdown_1, renderDropdown_1, useDropdownStyles_1, useComboboxContextValues_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Dropdown = void 0;
+    /**
+     * Dropdown component: a selection control that allows users to choose from a set of possible options
+     */
+    exports.Dropdown = React.forwardRef(function (props, ref) {
+        var state = useDropdown_1.useDropdown_unstable(props, ref);
+        var contextValues = useComboboxContextValues_1.useComboboxContextValues(state);
+        useDropdownStyles_1.useDropdownStyles_unstable(state);
+        return renderDropdown_1.renderDropdown_unstable(state, contextValues);
+    });
+    exports.Dropdown.displayName = 'Dropdown';
+});
+//# sourceMappingURL=Dropdown.js.map

package/lib-amd/components/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACtF,IAAM,KAAK,GAAG,kCAAoB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC/C,IAAM,aAAa,GAAG,mDAAwB,CAAC,KAAK,CAAC,CAAC;QAEtD,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAClC,OAAO,wCAAuB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"]}

package/lib-amd/components/Dropdown/Dropdown.types.js

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

package/lib-amd/components/Dropdown/Dropdown.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n  /* The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  ComboboxBaseState & {\n    /* Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\n"]}

package/lib-amd/components/Dropdown/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Dropdown", "./Dropdown.types", "./renderDropdown", "./useDropdown", "./useDropdownStyles"], function (require, exports, tslib_1, Dropdown_1, Dropdown_types_1, renderDropdown_1, useDropdown_1, useDropdownStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Dropdown_1, exports);
+    tslib_1.__exportStar(Dropdown_types_1, exports);
+    tslib_1.__exportStar(renderDropdown_1, exports);
+    tslib_1.__exportStar(useDropdown_1, exports);
+    tslib_1.__exportStar(useDropdownStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/Dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Dropdown/index.ts"],"names":[],"mappings":";;;IAAA,0CAA2B;IAC3B,gDAAiC;IACjC,gDAAiC;IACjC,6CAA8B;IAC9B,mDAAoC","sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles';\n"]}

package/lib-amd/components/Dropdown/renderDropdown.js

@@ -0,0 +1,21 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-portal", "@fluentui/react-utilities", "../../contexts/ComboboxContext"], function (require, exports, tslib_1, React, react_portal_1, react_utilities_1, ComboboxContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderDropdown_unstable = void 0;
+    /**
+     * Render the final JSX of Dropdown
+     */
+    var renderDropdown_unstable = function (state, contextValues) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            React.createElement(ComboboxContext_1.ComboboxContext.Provider, { value: contextValues.combobox },
+                React.createElement(slots.button, tslib_1.__assign({}, slotProps.button),
+                    slotProps.button.children,
+                    slots.expandIcon && React.createElement(slots.expandIcon, tslib_1.__assign({}, slotProps.expandIcon))),
+                slots.listbox &&
+                    (state.inlinePopup ? (React.createElement(slots.listbox, tslib_1.__assign({}, slotProps.listbox))) : (React.createElement(react_portal_1.Portal, null,
+                        React.createElement(slots.listbox, tslib_1.__assign({}, slotProps.listbox))))))));
+    };
+    exports.renderDropdown_unstable = renderDropdown_unstable;
+});
+//# sourceMappingURL=renderDropdown.js.map

package/lib-amd/components/Dropdown/renderDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderDropdown.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAoB,EAAE,aAAoC;QAC1F,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,CAAC,EAAnD,KAAK,WAAA,EAAE,SAAS,eAAmC,CAAC;QAE5D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,iCAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,CAAC,QAAQ;gBACrD,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM;oBAC/B,SAAS,CAAC,MAAM,CAAC,QAAQ;oBACzB,KAAK,CAAC,UAAU,IAAI,oBAAC,KAAK,CAAC,UAAU,uBAAK,SAAS,CAAC,UAAU,EAAI,CACtD;gBACd,KAAK,CAAC,OAAO;oBACZ,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI,CACzC,CAAC,CAAC,CAAC,CACF,oBAAC,qBAAM;wBACL,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI,CACjC,CACV,CAAC,CACqB,CAChB,CACd,CAAC;IACJ,CAAC,CAAC;IArBW,QAAA,uBAAuB,2BAqBlC","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  const { slots, slotProps } = getSlots<DropdownSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.button {...slotProps.button}>\n          {slotProps.button.children}\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        </slots.button>\n        {slots.listbox &&\n          (state.inlinePopup ? (\n            <slots.listbox {...slotProps.listbox} />\n          ) : (\n            <Portal>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"]}