@fluentui/react-combobox 9.2.4 → 9.2.5

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

@@ -1,156 +1,142 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "useDropdown_unstable", {
+    enumerable: true,
+    get: ()=>useDropdown_unstable
 });
-exports.useDropdown_unstable = void 0;
-const React = /*#__PURE__*/require("react");
-const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const dropdownKeyActions_1 = /*#__PURE__*/require("../../utils/dropdownKeyActions");
-const useComboboxBaseState_1 = /*#__PURE__*/require("../../utils/useComboboxBaseState");
-const useComboboxPopup_1 = /*#__PURE__*/require("../../utils/useComboboxPopup");
-const useTriggerListboxSlots_1 = /*#__PURE__*/require("../../utils/useTriggerListboxSlots");
-const Listbox_1 = /*#__PURE__*/require("../Listbox/Listbox");
-const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
-/**
- * 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
- */
-const useDropdown_unstable = (props, ref) => {
-  const baseState = useComboboxBaseState_1.useComboboxBaseState(props);
-  const {
-    activeOption,
-    getIndexOfId,
-    getOptionsMatchingText,
-    open,
-    setActiveOption,
-    setFocusVisible,
-    setOpen
-  } = baseState;
-  const {
-    primary: triggerNativeProps,
-    root: rootNativeProps
-  } = react_utilities_1.getPartitionedNativeProps({
-    props,
-    primarySlotTagName: 'button',
-    excludedPropNames: ['children']
-  });
-  // set listbox popup width based off the root/trigger width
-  const rootRef = React.useRef(null);
-  const [popupWidth, setPopupWidth] = React.useState();
-  React.useEffect(() => {
-    var _a;
-    const 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
-  const searchString = React.useRef('');
-  const [setKeyTimeout, clearKeyTimeout] = react_utilities_1.useTimeout();
-  const getNextMatchingOption = () => {
-    var _a;
-    // first check for matches for the full searchString
-    let matcher = optionText => optionText.toLowerCase().indexOf(searchString.current) === 0;
-    let matches = getOptionsMatchingText(matcher);
-    let 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) {
-      const letters = searchString.current.split('');
-      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);
-      // if the search is all the same letter, cycle through options starting with that letter
-      if (allSameLetter) {
-        startIndex++;
-        matcher = optionText => optionText.toLowerCase().indexOf(letters[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) {
-      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);
-      return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
-    }
-    return (_a = matches[0]) !== null && _a !== void 0 ? _a : undefined;
-  };
-  const onTriggerKeyDown = 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(() => {
-        searchString.current = '';
-      }, 500);
-      // update state
-      !open && setOpen(ev, true);
-      const nextOption = getNextMatchingOption();
-      setActiveOption(nextOption);
-      setFocusVisible(true);
-    }
-  };
-  // resolve button and listbox slot props
-  let triggerSlot;
-  let listboxSlot;
-  triggerSlot = react_utilities_1.resolveShorthand(props.button, {
-    required: true,
-    defaultProps: {
-      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;
-  [triggerSlot, listboxSlot] = useComboboxPopup_1.useComboboxPopup(props, triggerSlot, listboxSlot);
-  [triggerSlot, listboxSlot] = useTriggerListboxSlots_1.useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
-  const state = {
-    components: {
-      root: 'div',
-      button: 'button',
-      expandIcon: 'span',
-      listbox: Listbox_1.Listbox
-    },
-    root: react_utilities_1.resolveShorthand(props.root, {
-      required: true,
-      defaultProps: {
-        '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;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactIcons = require("@fluentui/react-icons");
+const _reactUtilities = require("@fluentui/react-utilities");
+const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
+const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
+const _useComboboxPopup = require("../../utils/useComboboxPopup");
+const _useTriggerListboxSlots = require("../../utils/useTriggerListboxSlots");
+const _listbox = require("../Listbox/Listbox");
+const useDropdown_unstable = (props, ref)=>{
+    const baseState = (0, _useComboboxBaseState.useComboboxBaseState)(props);
+    const { activeOption , getIndexOfId , getOptionsMatchingText , open , setActiveOption , setFocusVisible , setOpen  } = baseState;
+    const { primary: triggerNativeProps , root: rootNativeProps  } = (0, _reactUtilities.getPartitionedNativeProps)({
+        props,
+        primarySlotTagName: 'button',
+        excludedPropNames: [
+            'children'
+        ]
+    });
+    // set listbox popup width based off the root/trigger width
+    const rootRef = _react.useRef(null);
+    const [popupWidth, setPopupWidth] = _react.useState();
+    _react.useEffect(()=>{
+        var _rootRef_current;
+        const width = open ? `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px` : undefined;
+        setPopupWidth(width);
+    }, [
+        open
+    ]);
+    // jump to matching option based on typing
+    const searchString = _react.useRef('');
+    const [setKeyTimeout, clearKeyTimeout] = (0, _reactUtilities.useTimeout)();
+    const getNextMatchingOption = ()=>{
+        // first check for matches for the full searchString
+        let matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString.current) === 0;
+        let matches = getOptionsMatchingText(matcher);
+        let 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) {
+            const letters = searchString.current.split('');
+            const allSameLetter = letters.length && letters.every((letter)=>letter === letters[0]);
+            // if the search is all the same letter, cycle through options starting with that letter
+            if (allSameLetter) {
+                startIndex++;
+                matcher = (optionText)=>optionText.toLowerCase().indexOf(letters[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) {
+            const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);
+            return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
+        }
+        var _matches_;
+        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
+    };
+    const onTriggerKeyDown = (ev)=>{
+        // clear timeout, if it exists
+        clearKeyTimeout();
+        // if the key was a char key, update search string
+        if ((0, _dropdownKeyActions.getDropdownActionFromKey)(ev) === 'Type') {
+            // update search string
+            searchString.current += ev.key.toLowerCase();
+            setKeyTimeout(()=>{
+                searchString.current = '';
+            }, 500);
+            // update state
+            !open && setOpen(ev, true);
+            const nextOption = getNextMatchingOption();
+            setActiveOption(nextOption);
+            setFocusVisible(true);
+        }
+    };
+    // resolve button and listbox slot props
+    let triggerSlot;
+    let listboxSlot;
+    triggerSlot = (0, _reactUtilities.resolveShorthand)(props.button, {
+        required: true,
+        defaultProps: {
+            type: 'button',
+            children: baseState.value || props.placeholder,
+            ...triggerNativeProps
+        }
+    });
+    triggerSlot.onKeyDown = (0, _reactUtilities.mergeCallbacks)(onTriggerKeyDown, triggerSlot.onKeyDown);
+    listboxSlot = baseState.open || baseState.hasFocus ? (0, _reactUtilities.resolveShorthand)(props.listbox, {
+        required: true,
+        defaultProps: {
+            children: props.children,
+            style: {
+                width: popupWidth
+            }
+        }
+    }) : undefined;
+    [triggerSlot, listboxSlot] = (0, _useComboboxPopup.useComboboxPopup)(props, triggerSlot, listboxSlot);
+    [triggerSlot, listboxSlot] = (0, _useTriggerListboxSlots.useTriggerListboxSlots)(props, baseState, ref, triggerSlot, listboxSlot);
+    const state = {
+        components: {
+            root: 'div',
+            button: 'button',
+            expandIcon: 'span',
+            listbox: _listbox.Listbox
+        },
+        root: (0, _reactUtilities.resolveShorthand)(props.root, {
+            required: true,
+            defaultProps: {
+                'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
+                children: props.children,
+                ...rootNativeProps
+            }
+        }),
+        button: triggerSlot,
+        listbox: listboxSlot,
+        expandIcon: (0, _reactUtilities.resolveShorthand)(props.expandIcon, {
+            required: true,
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_reactIcons.ChevronDownRegular, null)
+            }
+        }),
+        placeholderVisible: !baseState.value && !!props.placeholder,
+        ...baseState
+    };
+    state.root.ref = (0, _reactUtilities.useMergedRefs)(state.root.ref, rootRef);
+    return state;
+}; //# sourceMappingURL=useDropdown.js.map
+
 //# sourceMappingURL=useDropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_icons_1","react_utilities_1","dropdownKeyActions_1","useComboboxBaseState_1","useComboboxPopup_1","useTriggerListboxSlots_1","Listbox_1","react_utilities_2","useDropdown_unstable","props","ref","baseState","useComboboxBaseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","width","_a","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","useTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","onTriggerKeyDown","ev","getDropdownActionFromKey","key","nextOption","triggerSlot","listboxSlot","resolveShorthand","button","required","defaultProps","type","children","value","placeholder","onKeyDown","mergeCallbacks","hasFocus","listbox","style","useComboboxPopup","useTriggerListboxSlots","state","components","expandIcon","Listbox","inlinePopup","createElement","ChevronDownRegular","placeholderVisible","useMergedRefs","exports"],"sources":["../src/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx"],"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 { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, 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 = (optionText: string) => optionText.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 = (optionText: string) => optionText.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"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/Dropdown/useDropdown.js"],"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 { useMergedRefs } from '@fluentui/react-utilities';\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, ref) => {\n  const baseState = useComboboxBaseState(props);\n  const {\n    activeOption,\n    getIndexOfId,\n    getOptionsMatchingText,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setOpen\n  } = baseState;\n  const {\n    primary: triggerNativeProps,\n    root: rootNativeProps\n  } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children']\n  });\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef(null);\n  const [popupWidth, setPopupWidth] = React.useState();\n  React.useEffect(() => {\n    var _rootRef_current;\n    const width = open ? `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n  const getNextMatchingOption = () => {\n    // first check for matches for the full searchString\n    let matcher = optionText => optionText.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\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    // 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      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = optionText => optionText.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\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 !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n    }\n    var _matches_;\n    return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n  };\n  const onTriggerKeyDown = ev => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\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      // update state\n      !open && setOpen(ev, true);\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n  // resolve button and listbox slot props\n  let triggerSlot;\n  let listboxSlot;\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps\n    }\n  });\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n  listboxSlot = baseState.open || baseState.hasFocus ? resolveShorthand(props.listbox, {\n    required: true,\n    defaultProps: {\n      children: props.children,\n      style: {\n        width: popupWidth\n      }\n    }\n  }) : undefined;\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  const state = {\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 === null || listboxSlot === void 0 ? void 0 : 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: /*#__PURE__*/React.createElement(ChevronDownIcon, null)\n      }\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState\n  };\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n  return state;\n};\n//# sourceMappingURL=useDropdown.js.map"],"names":["useDropdown_unstable","props","ref","baseState","useComboboxBaseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","popupWidth","setPopupWidth","useState","useEffect","_rootRef_current","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","useTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","_matches_","onTriggerKeyDown","ev","getDropdownActionFromKey","key","nextOption","triggerSlot","listboxSlot","resolveShorthand","button","required","defaultProps","type","children","value","placeholder","onKeyDown","mergeCallbacks","hasFocus","listbox","style","useComboboxPopup","useTriggerListboxSlots","state","components","expandIcon","Listbox","inlinePopup","createElement","ChevronDownIcon","placeholderVisible","useMergedRefs"],"mappings":"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"}