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

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

@@ -0,0 +1,121 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluentui/react-utilities", "../../utils/dropdownKeyActions", "../../utils/useComboboxBaseState", "../../utils/useComboboxPopup", "../../utils/useTriggerListboxSlots", "../Listbox/Listbox", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_icons_1, react_utilities_1, dropdownKeyActions_1, useComboboxBaseState_1, useComboboxPopup_1, useTriggerListboxSlots_1, Listbox_1, react_utilities_2) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useDropdown_unstable = void 0;
+    /**
+     * Create the state required to render Dropdown.
+     *
+     * The returned state can be modified with hooks such as useDropdownStyles_unstable,
+     * before being passed to renderDropdown_unstable.
+     *
+     * @param props - props from this instance of Dropdown
+     * @param ref - reference to root HTMLElement of Dropdown
+     */
+    var useDropdown_unstable = function (props, ref) {
+        var _a, _b;
+        var baseState = useComboboxBaseState_1.useComboboxBaseState(props);
+        var activeOption = baseState.activeOption, getIndexOfId = baseState.getIndexOfId, getOptionsMatchingText = baseState.getOptionsMatchingText, open = baseState.open, setActiveOption = baseState.setActiveOption, setFocusVisible = baseState.setFocusVisible, setOpen = baseState.setOpen;
+        var _c = react_utilities_1.getPartitionedNativeProps({
+            props: props,
+            primarySlotTagName: 'button',
+            excludedPropNames: ['children'],
+        }), triggerNativeProps = _c.primary, rootNativeProps = _c.root;
+        // set listbox popup width based off the root/trigger width
+        var rootRef = React.useRef(null);
+        var _d = React.useState(), popupWidth = _d[0], setPopupWidth = _d[1];
+        React.useEffect(function () {
+            var _a;
+            var width = open ? ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) + "px" : undefined;
+            setPopupWidth(width);
+        }, [open]);
+        // jump to matching option based on typing
+        var searchString = React.useRef('');
+        var _e = react_utilities_1.useTimeout(), setKeyTimeout = _e[0], clearKeyTimeout = _e[1];
+        var getNextMatchingOption = function () {
+            var _a;
+            // first check for matches for the full searchString
+            var matcher = function (optionValue) { return optionValue.toLowerCase().indexOf(searchString.current) === 0; };
+            var matches = getOptionsMatchingText(matcher);
+            var startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;
+            // if the dropdown is already open and the searchstring is a single character,
+            // then look after the current activeOption for letters
+            // this is so slowly typing the same letter will cycle through matches
+            if (open && searchString.current.length === 1) {
+                startIndex++;
+            }
+            // if there are no direct matches, check if the search is all the same letter, e.g. "aaa"
+            if (!matches.length) {
+                var letters_1 = searchString.current.split('');
+                var allSameLetter = letters_1.length && letters_1.every(function (letter) { return letter === letters_1[0]; });
+                // if the search is all the same letter, cycle through options starting with that letter
+                if (allSameLetter) {
+                    startIndex++;
+                    matcher = function (optionValue) { return optionValue.toLowerCase().indexOf(letters_1[0]) === 0; };
+                    matches = getOptionsMatchingText(matcher);
+                }
+            }
+            // if there is an active option and multiple matches,
+            // return first matching option after the current active option, looping back to the top
+            if (matches.length > 1 && activeOption) {
+                var nextMatch = matches.find(function (option) { return getIndexOfId(option.id) >= startIndex; });
+                return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
+            }
+            return (_a = matches[0]) !== null && _a !== void 0 ? _a : undefined;
+        };
+        var onTriggerKeyDown = function (ev) {
+            // clear timeout, if it exists
+            clearKeyTimeout();
+            // if the key was a char key, update search string
+            if (dropdownKeyActions_1.getDropdownActionFromKey(ev) === 'Type') {
+                // update search string
+                searchString.current += ev.key.toLowerCase();
+                setKeyTimeout(function () {
+                    searchString.current = '';
+                }, 500);
+                // update state
+                !open && setOpen(ev, true);
+                var nextOption = getNextMatchingOption();
+                setActiveOption(nextOption);
+                setFocusVisible(true);
+            }
+        };
+        // resolve button and listbox slot props
+        var triggerSlot;
+        var listboxSlot;
+        triggerSlot = react_utilities_1.resolveShorthand(props.button, {
+            required: true,
+            defaultProps: tslib_1.__assign({ type: 'button', children: baseState.value || props.placeholder }, triggerNativeProps),
+        });
+        triggerSlot.onKeyDown = react_utilities_1.mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);
+        listboxSlot =
+            baseState.open || baseState.hasFocus
+                ? react_utilities_1.resolveShorthand(props.listbox, {
+                    required: true,
+                    defaultProps: {
+                        children: props.children,
+                        style: { width: popupWidth },
+                    },
+                })
+                : 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];
+        var state = tslib_1.__assign({ components: {
+                root: 'div',
+                button: 'button',
+                expandIcon: 'span',
+                listbox: Listbox_1.Listbox,
+            }, root: react_utilities_1.resolveShorthand(props.root, {
+                required: true,
+                defaultProps: tslib_1.__assign({ 'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined, children: props.children }, rootNativeProps),
+            }), button: triggerSlot, listbox: listboxSlot, expandIcon: react_utilities_1.resolveShorthand(props.expandIcon, {
+                required: true,
+                defaultProps: {
+                    children: React.createElement(react_icons_1.ChevronDownRegular, null),
+                },
+            }), placeholderVisible: !baseState.value && !!props.placeholder }, baseState);
+        state.root.ref = react_utilities_2.useMergedRefs(state.root.ref, rootRef);
+        return state;
+    };
+    exports.useDropdown_unstable = useDropdown_unstable;
+});
+//# sourceMappingURL=useDropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdown.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx"],"names":[],"mappings":";;;;IAaA;;;;;;;;OAQG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAAoB,EAAE,GAAiC;;QAC1F,IAAM,SAAS,GAAG,2CAAoB,CAAC,KAAK,CAAC,CAAC;QAE5C,IAAA,YAAY,GAOV,SAAS,aAPC,EACZ,YAAY,GAMV,SAAS,aANC,EACZ,sBAAsB,GAKpB,SAAS,uBALW,EACtB,IAAI,GAIF,SAAS,KAJP,EACJ,eAAe,GAGb,SAAS,gBAHI,EACf,eAAe,GAEb,SAAS,gBAFI,EACf,OAAO,GACL,SAAS,QADJ,CACK;QAER,IAAA,KAAyD,2CAAyB,CAAC;YACvF,KAAK,OAAA;YACL,kBAAkB,EAAE,QAAQ;YAC5B,iBAAiB,EAAE,CAAC,UAAU,CAAC;SAChC,CAAC,EAJe,kBAAkB,aAAA,EAAQ,eAAe,UAIxD,CAAC;QAEH,2DAA2D;QAC3D,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;QAC7C,IAAA,KAA8B,KAAK,CAAC,QAAQ,EAAU,EAArD,UAAU,QAAA,EAAE,aAAa,QAA4B,CAAC;QAC7D,KAAK,CAAC,SAAS,CAAC;;YACd,IAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,WAAW,QAAI,CAAC,CAAC,CAAC,SAAS,CAAC;YACrE,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;QAEX,0CAA0C;QAC1C,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAChC,IAAA,KAAmC,4BAAU,EAAE,EAA9C,aAAa,QAAA,EAAE,eAAe,QAAgB,CAAC;QAEtD,IAAM,qBAAqB,GAAG;;YAC5B,oDAAoD;YACpD,IAAI,OAAO,GAAG,UAAC,WAAmB,IAAK,OAAA,WAAW,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,EAA7D,CAA6D,CAAC;YACrG,IAAI,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC;YAC9C,IAAI,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAElE,8EAA8E;YAC9E,uDAAuD;YACvD,sEAAsE;YACtE,IAAI,IAAI,IAAI,YAAY,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC7C,UAAU,EAAE,CAAC;aACd;YAED,yFAAyF;YACzF,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;gBACnB,IAAM,SAAO,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;gBAC/C,IAAM,aAAa,GAAG,SAAO,CAAC,MAAM,IAAI,SAAO,CAAC,KAAK,CAAC,UAAA,MAAM,IAAI,OAAA,MAAM,KAAK,SAAO,CAAC,CAAC,CAAC,EAArB,CAAqB,CAAC,CAAC;gBAEvF,wFAAwF;gBACxF,IAAI,aAAa,EAAE;oBACjB,UAAU,EAAE,CAAC;oBACb,OAAO,GAAG,UAAC,WAAmB,IAAK,OAAA,WAAW,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,SAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAnD,CAAmD,CAAC;oBACvF,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC;iBAC3C;aACF;YAED,qDAAqD;YACrD,wFAAwF;YACxF,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,EAAE;gBACtC,IAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,UAAA,MAAM,IAAI,OAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,UAAU,EAArC,CAAqC,CAAC,CAAC;gBAChF,OAAO,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,OAAO,CAAC,CAAC,CAAC,CAAC;aAChC;YAED,OAAO,MAAA,OAAO,CAAC,CAAC,CAAC,mCAAI,SAAS,CAAC;QACjC,CAAC,CAAC;QAEF,IAAM,gBAAgB,GAAG,UAAC,EAA0C;YAClE,8BAA8B;YAC9B,eAAe,EAAE,CAAC;YAElB,kDAAkD;YAClD,IAAI,6CAAwB,CAAC,EAAE,CAAC,KAAK,MAAM,EAAE;gBAC3C,uBAAuB;gBACvB,YAAY,CAAC,OAAO,IAAI,EAAE,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;gBAC7C,aAAa,CAAC;oBACZ,YAAY,CAAC,OAAO,GAAG,EAAE,CAAC;gBAC5B,CAAC,EAAE,GAAG,CAAC,CAAC;gBAER,eAAe;gBACf,CAAC,IAAI,IAAI,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;gBAE3B,IAAM,UAAU,GAAG,qBAAqB,EAAE,CAAC;gBAC3C,eAAe,CAAC,UAAU,CAAC,CAAC;gBAC5B,eAAe,CAAC,IAAI,CAAC,CAAC;aACvB;QACH,CAAC,CAAC;QAEF,wCAAwC;QACxC,IAAI,WAA2B,CAAC;QAChC,IAAI,WAA6C,CAAC;QAElD,WAAW,GAAG,kCAAgB,CAAC,KAAK,CAAC,MAAM,EAAE;YAC3C,QAAQ,EAAE,IAAI;YACd,YAAY,qBACV,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,WAAW,IAC3C,kBAAkB,CACtB;SACF,CAAC,CAAC;QAEH,WAAW,CAAC,SAAS,GAAG,gCAAc,CAAC,gBAAgB,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAEhF,WAAW;YACT,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,QAAQ;gBAClC,CAAC,CAAC,kCAAgB,CAAC,KAAK,CAAC,OAAO,EAAE;oBAC9B,QAAQ,EAAE,IAAI;oBACd,YAAY,EAAE;wBACZ,QAAQ,EAAE,KAAK,CAAC,QAAQ;wBACxB,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE;qBAC7B;iBACF,CAAC;gBACJ,CAAC,CAAC,SAAS,CAAC;QAEhB,KAA6B,mCAAgB,CAAC,KAAK,EAAE,WAAW,EAAE,WAAW,CAAC,EAA7E,WAAW,QAAA,EAAE,WAAW,QAAA,CAAsD;QAC/E,KAA6B,+CAAsB,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,WAAW,CAAC,EAAnG,WAAW,QAAA,EAAE,WAAW,QAAA,CAA4E;QAErG,IAAM,KAAK,sBACT,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,MAAM,EAAE,QAAQ;gBAChB,UAAU,EAAE,MAAM;gBAClB,OAAO,EAAE,iBAAO;aACjB,EACD,IAAI,EAAE,kCAAgB,CAAC,KAAK,CAAC,IAAI,EAAE;gBACjC,QAAQ,EAAE,IAAI;gBACd,YAAY,qBACV,WAAW,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAC7D,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACrB,eAAe,CACnB;aACF,CAAC,EACF,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,kCAAgB,CAAC,KAAK,CAAC,UAAU,EAAE;gBAC7C,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,QAAQ,EAAE,oBAAC,gCAAe,OAAG;iBAC9B;aACF,CAAC,EACF,kBAAkB,EAAE,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,WAAW,IACxD,SAAS,CACb,CAAC;QAEF,KAAK,CAAC,IAAI,CAAC,GAAG,GAAG,+BAAa,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;QAExD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAlJW,QAAA,oBAAoB,wBAkJ/B","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } 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 { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  const baseState = useComboboxBaseState(props);\n  const {\n    activeOption,\n    getIndexOfId,\n    getOptionsMatchingText,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n  } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\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  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  // resolve button and listbox slot props\n  let triggerSlot: Slot<'button'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n\n  listboxSlot =\n    baseState.open || baseState.hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: DropdownState = {\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,\n        children: props.children,\n        ...rootNativeProps,\n      },\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  return state;\n};\n"]}

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

@@ -0,0 +1,127 @@
+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.useDropdownStyles_unstable = exports.dropdownClassNames = void 0;
+    exports.dropdownClassNames = {
+        root: 'fui-Dropdown',
+        button: 'fui-Dropdown__button',
+        expandIcon: 'fui-Dropdown__expandIcon',
+        listbox: 'fui-Dropdown__listbox',
+    };
+    /**
+     * Styles for Dropdown
+     */
+    var useStyles = react_1.makeStyles({
+        root: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { boxSizing: 'border-box', display: 'inline-block', 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(" + react_theme_1.tokens.strokeWidthThick + ", " + 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',
+        },
+        button: tslib_1.__assign(tslib_1.__assign({ alignItems: 'center', backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.border('0')), { boxSizing: 'border-box', color: react_theme_1.tokens.colorNeutralForeground1, columnGap: react_theme_1.tokens.spacingHorizontalXXS, cursor: 'pointer', display: 'grid', fontFamily: react_theme_1.tokens.fontFamilyBase, gridTemplateColumns: '[content] 1fr [icon] auto [end]', justifyContent: 'space-between', textAlign: 'left', width: '100%', '&:focus': {
+                outlineStyle: 'none',
+            } }),
+        placeholder: {
+            color: react_theme_1.tokens.colorNeutralForeground4,
+        },
+        // size variants
+        small: tslib_1.__assign(tslib_1.__assign({}, react_theme_1.typographyStyles.caption1), react_1.shorthands.padding('3px', react_theme_1.tokens.spacingHorizontalSNudge, '3px', "calc(" + react_theme_1.tokens.spacingHorizontalSNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")),
+        medium: tslib_1.__assign(tslib_1.__assign({}, react_theme_1.typographyStyles.body1), react_1.shorthands.padding('5px', react_theme_1.tokens.spacingHorizontalMNudge, '5px', "calc(" + react_theme_1.tokens.spacingHorizontalMNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")),
+        large: tslib_1.__assign(tslib_1.__assign({ columnGap: react_theme_1.tokens.spacingHorizontalSNudge }, react_theme_1.typographyStyles.body2), react_1.shorthands.padding('7px', react_theme_1.tokens.spacingHorizontalM, '7px', "calc(" + react_theme_1.tokens.spacingHorizontalM + " + " + react_theme_1.tokens.spacingHorizontalSNudge + ")")),
+        // 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', 'transparent')),
+        'filled-darker': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground3 }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', 'transparent')),
+        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')) }),
+        disabledText: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            cursor: 'not-allowed',
+        },
+    });
+    var useIconStyles = react_1.makeStyles({
+        icon: {
+            boxSizing: 'border-box',
+            color: react_theme_1.tokens.colorNeutralStrokeAccessible,
+            display: 'block',
+            fontSize: react_theme_1.tokens.fontSizeBase500,
+            gridColumnStart: 'icon',
+            gridColumnEnd: 'end',
+            // 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,
+        },
+    });
+    /**
+     * Apply styling to the Dropdown slots based on the state
+     */
+    var useDropdownStyles_unstable = function (state) {
+        var appearance = state.appearance, open = state.open, placeholderVisible = state.placeholderVisible, size = state.size;
+        var invalid = "" + state.button['aria-invalid'] === 'true';
+        var disabled = state.button.disabled;
+        var styles = useStyles();
+        var iconStyles = useIconStyles();
+        state.root.className = react_1.mergeClasses(exports.dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
+        state.button.className = react_1.mergeClasses(exports.dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
+        if (state.listbox) {
+            state.listbox.className = react_1.mergeClasses(exports.dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
+        }
+        if (state.expandIcon) {
+            state.expandIcon.className = react_1.mergeClasses(exports.dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);
+        }
+        return state;
+    };
+    exports.useDropdownStyles_unstable = useDropdownStyles_unstable;
+});
+//# sourceMappingURL=useDropdownStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdownStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.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 { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n  root: 'fui-Dropdown',\n  button: 'fui-Dropdown__button',\n  expandIcon: 'fui-Dropdown__expandIcon',\n  listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    display: 'inline-block',\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(${tokens.strokeWidthThick}, ${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  button: {\n    alignItems: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    display: 'grid',\n    fontFamily: tokens.fontFamilyBase,\n    gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n    justifyContent: 'space-between',\n    textAlign: 'left',\n    width: '100%',\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  small: {\n    ...typographyStyles.caption1,\n    ...shorthands.padding(\n      '3px',\n      tokens.spacingHorizontalSNudge,\n      '3px',\n      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n  },\n  medium: {\n    ...typographyStyles.body1,\n    ...shorthands.padding(\n      '5px',\n      tokens.spacingHorizontalMNudge,\n      '5px',\n      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    ...shorthands.padding(\n      '7px',\n      tokens.spacingHorizontalM,\n      '7px',\n      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n    ),\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  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', 'transparent'),\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\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  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  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n    gridColumnStart: 'icon',\n    gridColumnEnd: 'end',\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\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n  const { appearance, open, placeholderVisible, size } = state;\n  const invalid = `${state.button['aria-invalid']}` === 'true';\n  const disabled = state.button.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n\n  state.root.className = mergeClasses(\n    dropdownClassNames.root,\n    styles.root,\n    styles[appearance],\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.button.className = mergeClasses(\n    dropdownClassNames.button,\n    styles.button,\n    styles[size],\n    placeholderVisible && styles.placeholder,\n    disabled && styles.disabledText,\n    state.button.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      dropdownClassNames.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      dropdownClassNames.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/Listbox/Listbox.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./useListbox", "./renderListbox", "./useListboxStyles", "../../contexts/useListboxContextValues"], function (require, exports, React, useListbox_1, renderListbox_1, useListboxStyles_1, useListboxContextValues_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Listbox = void 0;
+    /**
+     * Listbox component: a standalone selection control, or the popup in a Combobox
+     */
+    exports.Listbox = React.forwardRef(function (props, ref) {
+        var state = useListbox_1.useListbox_unstable(props, ref);
+        var contextValues = useListboxContextValues_1.useListboxContextValues(state);
+        useListboxStyles_1.useListboxStyles_unstable(state);
+        return renderListbox_1.renderListbox_unstable(state, contextValues);
+    });
+    exports.Listbox.displayName = 'Listbox';
+});
+//# sourceMappingURL=Listbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,OAAO,GAAsC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC9C,IAAM,aAAa,GAAG,iDAAuB,CAAC,KAAK,CAAC,CAAC;QAErD,4CAAyB,CAAC,KAAK,CAAC,CAAC;QACjC,OAAO,sCAAsB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Listbox/Listbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /* The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    setActiveOption(option?: OptionValue): void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n};\n"]}

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

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Listbox", "./Listbox.types", "./renderListbox", "./useListbox", "./useListboxStyles"], function (require, exports, tslib_1, Listbox_1, Listbox_types_1, renderListbox_1, useListbox_1, useListboxStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Listbox_1, exports);
+    tslib_1.__exportStar(Listbox_types_1, exports);
+    tslib_1.__exportStar(renderListbox_1, exports);
+    tslib_1.__exportStar(useListbox_1, exports);
+    tslib_1.__exportStar(useListboxStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Listbox/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,+CAAgC;IAChC,4CAA6B;IAC7B,kDAAmC","sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles';\n"]}

package/lib-amd/components/Listbox/renderListbox.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../../contexts/ListboxContext"], function (require, exports, tslib_1, React, react_utilities_1, ListboxContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderListbox_unstable = void 0;
+    /**
+     * Render the final JSX of Listbox
+     */
+    var renderListbox_unstable = function (state, contextValues) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(ListboxContext_1.ListboxContext.Provider, { value: contextValues.listbox },
+            React.createElement(slots.root, tslib_1.__assign({}, slotProps.root))));
+    };
+    exports.renderListbox_unstable = renderListbox_unstable;
+});
+//# sourceMappingURL=renderListbox.js.map

package/lib-amd/components/Listbox/renderListbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderListbox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Listbox/renderListbox.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAmB,EAAE,aAAmC;QACvF,IAAA,KAAuB,0BAAQ,CAAe,KAAK,CAAC,EAAlD,KAAK,WAAA,EAAE,SAAS,eAAkC,CAAC;QAE3D,OAAO,CACL,oBAAC,+BAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO;YACnD,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACV,CAC3B,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,sBAAsB,0BAQjC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  const { slots, slotProps } = getSlots<ListboxSlots>(state);\n\n  return (\n    <ListboxContext.Provider value={contextValues.listbox}>\n      <slots.root {...slotProps.root} />\n    </ListboxContext.Provider>\n  );\n};\n"]}

package/lib-amd/components/Listbox/useListbox.js

@@ -0,0 +1,80 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-context-selector", "../../utils/dropdownKeyActions", "../../utils/useOptionCollection", "../../utils/useScrollOptionsIntoView", "../../utils/useSelection", "../../contexts/ComboboxContext"], function (require, exports, tslib_1, React, react_utilities_1, react_context_selector_1, dropdownKeyActions_1, useOptionCollection_1, useScrollOptionsIntoView_1, useSelection_1, ComboboxContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useListbox_unstable = void 0;
+    /**
+     * Create the state required to render Listbox.
+     *
+     * The returned state can be modified with hooks such as useListboxStyles_unstable,
+     * before being passed to renderListbox_unstable.
+     *
+     * @param props - props from this instance of Listbox
+     * @param ref - reference to root HTMLElement of Listbox
+     */
+    var useListbox_unstable = function (props, ref) {
+        var multiselect = props.multiselect;
+        var optionCollection = useOptionCollection_1.useOptionCollection();
+        var getCount = optionCollection.getCount, getOptionAtIndex = optionCollection.getOptionAtIndex, getIndexOfId = optionCollection.getIndexOfId;
+        var _a = useSelection_1.useSelection(props), clearSelection = _a.clearSelection, selectedOptions = _a.selectedOptions, selectOption = _a.selectOption;
+        var _b = React.useState(), activeOption = _b[0], setActiveOption = _b[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 _c = React.useState(false), focusVisible = _c[0], setFocusVisible = _c[1];
+        var onKeyDown = function (event) {
+            var action = dropdownKeyActions_1.getDropdownActionFromKey(event, { open: true });
+            var maxIndex = getCount() - 1;
+            var activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
+            var newIndex = activeIndex;
+            switch (action) {
+                case 'Select':
+                case 'CloseSelect':
+                    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);
+            }
+        };
+        var onMouseOver = function (event) {
+            setFocusVisible(false);
+        };
+        // get state from parent combobox, if it exists
+        var hasComboboxContext = react_context_selector_1.useHasParentContext(ComboboxContext_1.ComboboxContext);
+        var comboboxActiveOption = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, function (ctx) { return ctx.activeOption; });
+        var comboboxFocusVisible = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, function (ctx) { return ctx.focusVisible; });
+        var comboboxSelectedOptions = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, function (ctx) { return ctx.selectedOptions; });
+        var comboboxSelectOption = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, function (ctx) { return ctx.selectOption; });
+        var comboboxSetActiveOption = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, function (ctx) { return ctx.setActiveOption; });
+        // without a parent combobox context, provide values directly from Listbox
+        var optionContextValues = hasComboboxContext
+            ? {
+                activeOption: comboboxActiveOption,
+                focusVisible: comboboxFocusVisible,
+                selectedOptions: comboboxSelectedOptions,
+                selectOption: comboboxSelectOption,
+                setActiveOption: comboboxSetActiveOption,
+            }
+            : {
+                activeOption: activeOption,
+                focusVisible: focusVisible,
+                selectedOptions: selectedOptions,
+                selectOption: selectOption,
+                setActiveOption: setActiveOption,
+            };
+        var state = tslib_1.__assign(tslib_1.__assign({ components: {
+                root: 'div',
+            }, root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: ref, role: multiselect ? 'menu' : 'listbox', 'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id, 'aria-multiselectable': multiselect, tabIndex: 0 }, props)), multiselect: multiselect, clearSelection: clearSelection }, optionCollection), optionContextValues);
+        var scrollContainerRef = useScrollOptionsIntoView_1.useScrollOptionsIntoView(state);
+        state.root.ref = react_utilities_1.useMergedRefs(state.root.ref, scrollContainerRef);
+        state.root.onKeyDown = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(state.root.onKeyDown, onKeyDown));
+        state.root.onMouseOver = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(state.root.onMouseOver, onMouseOver));
+        return state;
+    };
+    exports.useListbox_unstable = useListbox_unstable;
+});
+//# sourceMappingURL=useListbox.js.map

package/lib-amd/components/Listbox/useListbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListbox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Listbox/useListbox.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  const { multiselect } = props;\n  const optionCollection = useOptionCollection();\n  const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\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  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const maxIndex = getCount() - 1;\n    const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n    let newIndex = activeIndex;\n\n    switch (action) {\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n      default:\n        newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n    }\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\n  const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n    setFocusVisible(false);\n  };\n\n  // get state from parent combobox, if it exists\n  const hasComboboxContext = useHasParentContext(ComboboxContext);\n  const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n  const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n  const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n  const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasComboboxContext\n    ? {\n        activeOption: comboboxActiveOption,\n        focusVisible: comboboxFocusVisible,\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        setActiveOption: comboboxSetActiveOption,\n      }\n    : {\n        activeOption,\n        focusVisible,\n        selectedOptions,\n        selectOption,\n        setActiveOption,\n      };\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      role: multiselect ? 'menu' : 'listbox',\n      'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n      'aria-multiselectable': multiselect,\n      tabIndex: 0,\n      ...props,\n    }),\n    multiselect,\n    clearSelection,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  const scrollContainerRef = useScrollOptionsIntoView(state);\n  state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n  return state;\n};\n"]}

package/lib-amd/components/Listbox/useListboxStyles.js

@@ -0,0 +1,24 @@
+define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_theme_1, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useListboxStyles_unstable = exports.listboxClassNames = void 0;
+    exports.listboxClassNames = {
+        root: 'fui-Listbox',
+    };
+    /**
+     * Styles for the root slot
+     */
+    var useStyles = react_1.makeStyles({
+        root: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', minWidth: '160px', overflowY: 'auto' }, react_1.shorthands.outline('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)), react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalXS)), { rowGap: react_theme_1.tokens.spacingHorizontalXXS }),
+    });
+    /**
+     * Apply styling to the Listbox slots based on the state
+     */
+    var useListboxStyles_unstable = function (state) {
+        var styles = useStyles();
+        state.root.className = react_1.mergeClasses(exports.listboxClassNames.root, styles.root, state.root.className);
+        return state;
+    };
+    exports.useListboxStyles_unstable = useListboxStyles_unstable;
+});
+//# sourceMappingURL=useListboxStyles.js.map

package/lib-amd/components/Listbox/useListboxStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListboxStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts"],"names":[],"mappings":";;;;IAKa,QAAA,iBAAiB,GAAiC;QAC7D,IAAI,EAAE,aAAa;KACpB,CAAC;IAEF;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,uDACF,eAAe,EAAE,oBAAM,CAAC,uBAAuB,EAC/C,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,MAAM,IACd,kBAAU,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,oBAAM,CAAC,sBAAsB,CAAC,GACjE,kBAAU,CAAC,OAAO,CAAC,oBAAM,CAAC,mBAAmB,CAAC,KACjD,MAAM,EAAE,oBAAM,CAAC,oBAAoB,GACpC;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,yBAAyB,GAAG,UAAC,KAAmB;QAC3D,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,yBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE/F,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IALW,QAAA,yBAAyB,6BAKpC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n  root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: '160px',\n    overflowY: 'auto',\n    ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n    rowGap: tokens.spacingHorizontalXXS,\n  },\n});\n\n/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"]}

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

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useOption", "./renderOption", "./useOptionStyles"], function (require, exports, React, useOption_1, renderOption_1, useOptionStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Option = void 0;
+    /**
+     * Option component: a styled child option of a Combobox
+     */
+    exports.Option = React.forwardRef(function (props, ref) {
+        var state = useOption_1.useOption_unstable(props, ref);
+        useOptionStyles_1.useOptionStyles_unstable(state);
+        return renderOption_1.renderOption_unstable(state);
+    });
+    exports.Option.displayName = 'Option';
+});
+//# sourceMappingURL=Option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Option/Option.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,MAAM,GAAqC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClF,IAAM,KAAK,GAAG,8BAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE7C,0CAAwB,CAAC,KAAK,CAAC,CAAC;QAChC,OAAO,oCAAqB,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n  const state = useOption_unstable(props, ref);\n\n  useOptionStyles_unstable(state);\n  return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Option.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Option/Option.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n  /* The root option slot, with role=\"option\" */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The check icon that is visible for selected options */\n  checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n  /**\n   * Sets an option to the `disabled` state.\n   * Disabled options cannot be selected, but are still keyboard navigable\n   */\n  disabled?: boolean;\n\n  /*\n   * Defines a unique identifier for the option.\n   * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n   * Defaults to `text` if not provided.\n   */\n  value?: string;\n} & (\n    | {\n        /**\n         * An optional override the string value of the Option's display text,\n         * defaulting to the Option's child content.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the Option's display text when the Option's children are not a string.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n  Pick<OptionProps, 'disabled'> & {\n    /* If true, this is the currently highlighted option */\n    active: boolean;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    /* If true, the option is part of a multiselect combobox or listbox */\n    multiselect?: boolean;\n\n    /* If true, the option is selected */\n    selected: boolean;\n  };\n"]}

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

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Option", "./Option.types", "./renderOption", "./useOption", "./useOptionStyles"], function (require, exports, tslib_1, Option_1, Option_types_1, renderOption_1, useOption_1, useOptionStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Option_1, exports);
+    tslib_1.__exportStar(Option_types_1, exports);
+    tslib_1.__exportStar(renderOption_1, exports);
+    tslib_1.__exportStar(useOption_1, exports);
+    tslib_1.__exportStar(useOptionStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Option/index.ts"],"names":[],"mappings":";;;IAAA,wCAAyB;IACzB,8CAA+B;IAC/B,8CAA+B;IAC/B,2CAA4B;IAC5B,iDAAkC","sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles';\n"]}

package/lib-amd/components/Option/renderOption.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderOption_unstable = void 0;
+    /**
+     * Render the final JSX of Option
+     */
+    var renderOption_unstable = function (state) {
+        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(slots.checkIcon, tslib_1.__assign({}, slotProps.checkIcon)),
+            slotProps.root.children));
+    };
+    exports.renderOption_unstable = renderOption_unstable;
+});
+//# sourceMappingURL=renderOption.js.map

package/lib-amd/components/Option/renderOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderOption.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Option/renderOption.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,qBAAqB,GAAG,UAAC,KAAkB;QAChD,IAAA,KAAuB,0BAAQ,CAAc,KAAK,CAAC,EAAjD,KAAK,WAAA,EAAE,SAAS,eAAiC,CAAC;QAE1D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,SAAS,uBAAK,SAAS,CAAC,SAAS,EAAI;YAC3C,SAAS,CAAC,IAAI,CAAC,QAAQ,CACb,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,qBAAqB,yBAShC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n  const { slots, slotProps } = getSlots<OptionSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.checkIcon {...slotProps.checkIcon} />\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"]}