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

package/lib/components/Dropdown/renderDropdown.js

@@ -5,20 +5,23 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
 /**
  * Render the final JSX of Dropdown
  */
-
 export const renderDropdown_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  const listbox = /*#__PURE__*/React.createElement(slots.listbox, { ...slotProps.listbox
-  }, slotProps.root.children);
-  const popup = state.inlinePopup ? listbox : /*#__PURE__*/React.createElement(Portal, null, listbox);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
   }, /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
     value: contextValues.combobox
-  }, /*#__PURE__*/React.createElement(slots.button, { ...slotProps.button
-  }, slotProps.button.children, slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, { ...slotProps.expandIcon
-  })), state.open ? popup : null));
+  }, /*#__PURE__*/React.createElement(slots.button, {
+    ...slotProps.button
+  }, slotProps.button.children, slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, {
+    ...slotProps.expandIcon
+  })), slots.listbox && (state.inlinePopup ? /*#__PURE__*/React.createElement(slots.listbox, {
+    ...slotProps.listbox
+  }) : /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.listbox, {
+    ...slotProps.listbox
+  })))));
 };
 //# sourceMappingURL=renderDropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dropdown/renderDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,eAAT,QAAgC,gCAAhC;AAGA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;EACpG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,MAAM,OAAO,gBAAG,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,EAAuC,SAAS,CAAC,IAAV,CAAe,QAAtD,CAAhB;EACA,MAAM,KAAK,GAAG,KAAK,CAAC,WAAN,GAAoB,OAApB,gBAA8B,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,EAAS,OAAT,CAA5C;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAzB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,EACG,SAAS,CAAC,MAAV,CAAiB,QADpB,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAFvB,CADF,EAKG,KAAK,CAAC,IAAN,GAAa,KAAb,GAAqB,IALxB,CADF,CADF;AAWD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  const { slots, slotProps } = getSlots<DropdownSlots>(state);\n\n  const listbox = <slots.listbox {...slotProps.listbox}>{slotProps.root.children}</slots.listbox>;\n  const popup = state.inlinePopup ? listbox : <Portal>{listbox}</Portal>;\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.button {...slotProps.button}>\n          {slotProps.button.children}\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        </slots.button>\n        {state.open ? popup : null}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,eAAe,QAAQ,gCAAgC;AAGhE;;;AAGA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAgBG,KAAK,CAAC;EAE3D,oBACEL,oBAACO,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BT,oBAACG,eAAe,CAACO,QAAQ;IAACC,KAAK,EAAEL,aAAa,CAACM;EAAQ,gBACrDZ,oBAACO,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,GAC/BL,SAAS,CAACK,MAAM,CAACC,QAAQ,EACzBP,KAAK,CAACQ,UAAU,iBAAIf,oBAACO,KAAK,CAACQ,UAAU;IAAA,GAAKP,SAAS,CAACO;EAAU,EAAI,CACtD,EACdR,KAAK,CAACS,OAAO,KACXX,KAAK,CAACY,WAAW,gBAChBjB,oBAACO,KAAK,CAACS,OAAO;IAAA,GAAKR,SAAS,CAACQ;EAAO,EAAI,gBAExChB,oBAACC,MAAM,qBACLD,oBAACO,KAAK,CAACS,OAAO;IAAA,GAAKR,SAAS,CAACQ;EAAO,EAAI,CAE3C,CAAC,CACqB,CAChB;AAEjB,CAAC","names":["React","Portal","getSlots","ComboboxContext","renderDropdown_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  const { slots, slotProps } = getSlots<DropdownSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.button {...slotProps.button}>\n          {slotProps.button.children}\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        </slots.button>\n        {slots.listbox &&\n          (state.inlinePopup ? (\n            <slots.listbox {...slotProps.listbox} />\n          ) : (\n            <Portal>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"]}

package/lib/components/Dropdown/useDropdown.js

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
-import { getPartitionedNativeProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';
+import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
-import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { useComboboxPopup } from '../../utils/useComboboxPopup';
+import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { Listbox } from '../Listbox/Listbox';
+import { useMergedRefs } from '@fluentui/react-utilities';
 /**
  * Create the state required to render Dropdown.
  *
@@ -14,9 +16,17 @@ import { Listbox } from '../Listbox/Listbox';
  * @param props - props from this instance of Dropdown
  * @param ref - reference to root HTMLElement of Dropdown
  */
-
 export const useDropdown_unstable = (props, ref) => {
   const baseState = useComboboxBaseState(props);
+  const {
+    activeOption,
+    getIndexOfId,
+    getOptionsMatchingText,
+    open,
+    setActiveOption,
+    setFocusVisible,
+    setOpen
+  } = baseState;
   const {
     primary: triggerNativeProps,
     root: rootNativeProps
@@ -25,7 +35,69 @@ export const useDropdown_unstable = (props, ref) => {
     primarySlotTagName: 'button',
     excludedPropNames: ['children']
   });
-  const triggerShorthand = resolveShorthand(props.button, {
+  // 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] = useTimeout();
+  const getNextMatchingOption = () => {
+    var _a;
+    // first check for matches for the full searchString
+    let matcher = optionValue => optionValue.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 = optionValue => optionValue.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 (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 = resolveShorthand(props.button, {
     required: true,
     defaultProps: {
       type: 'button',
@@ -33,11 +105,18 @@ export const useDropdown_unstable = (props, ref) => {
       ...triggerNativeProps
     }
   });
-  const listboxShorthand = resolveShorthand(props.listbox, {
-    required: true
-  });
-  const [triggerWithPopup, listboxWithPopup] = useComboboxPopup(props, triggerShorthand, listboxShorthand);
-  const [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerWithPopup, listboxWithPopup);
+  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);
+  listboxSlot = baseState.open || baseState.hasFocus ? resolveShorthand(props.listbox, {
+    required: true,
+    defaultProps: {
+      children: props.children,
+      style: {
+        width: popupWidth
+      }
+    }
+  }) : undefined;
+  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
+  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
   const state = {
     components: {
       root: 'div',
@@ -48,6 +127,7 @@ export const useDropdown_unstable = (props, ref) => {
     root: resolveShorthand(props.root, {
       required: true,
       defaultProps: {
+        'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
         children: props.children,
         ...rootNativeProps
       }
@@ -63,6 +143,7 @@ export const useDropdown_unstable = (props, ref) => {
     placeholderVisible: !baseState.value && !!props.placeholder,
     ...baseState
   };
+  state.root.ref = useMergedRefs(state.root.ref, rootRef);
   return state;
 };
 //# sourceMappingURL=useDropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dropdown/useDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAkB,IAAI,eAA/B,QAAsD,uBAAtD;AACA,SAAS,yBAAT,EAAoC,gBAApC,QAA4D,2BAA5D;AACA,SAAS,oBAAT,QAAqC,kCAArC;AACA,SAAS,sBAAT,QAAuC,oCAAvC;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,OAAT,QAAwB,oBAAxB;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA2E;EAC7G,MAAM,SAAS,GAAG,oBAAoB,CAAC,KAAD,CAAtC;EAEA,MAAM;IAAE,OAAO,EAAE,kBAAX;IAA+B,IAAI,EAAE;EAArC,IAAyD,yBAAyB,CAAC;IACvF,KADuF;IAEvF,kBAAkB,EAAE,QAFmE;IAGvF,iBAAiB,EAAE,CAAC,UAAD;EAHoE,CAAD,CAAxF;EAMA,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAP,EAAe;IACtD,QAAQ,EAAE,IAD4C;IAEtD,YAAY,EAAE;MACZ,IAAI,EAAE,QADM;MAEZ,QAAQ,EAAE,SAAS,CAAC,KAAV,IAAmB,KAAK,CAAC,WAFvB;MAGZ,GAAG;IAHS;EAFwC,CAAf,CAAzC;EASA,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAP,EAAgB;IAAE,QAAQ,EAAE;EAAZ,CAAhB,CAAzC;EAEA,MAAM,CAAC,gBAAD,EAAmB,gBAAnB,IAAuC,gBAAgB,CAAC,KAAD,EAAQ,gBAAR,EAA0B,gBAA1B,CAA7D;EACA,MAAM,CAAC,WAAD,EAAc,WAAd,IAA6B,sBAAsB,CAAC,KAAD,EAAQ,SAAR,EAAmB,GAAnB,EAAwB,gBAAxB,EAA0C,gBAA1C,CAAzD;EAEA,MAAM,KAAK,GAAkB;IAC3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE,QAFE;MAGV,UAAU,EAAE,MAHF;MAIV,OAAO,EAAE;IAJC,CADe;IAO3B,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,QAAQ,EAAE,KAAK,CAAC,QADJ;QAEZ,GAAG;MAFS;IAFmB,CAAb,CAPK;IAc3B,MAAM,EAAE,WAdmB;IAe3B,OAAO,EAAE,WAfkB;IAgB3B,UAAU,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAP,EAAmB;MAC7C,QAAQ,EAAE,IADmC;MAE7C,YAAY,EAAE;QACZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,eAAD,EAAgB,IAAhB;MADE;IAF+B,CAAnB,CAhBD;IAsB3B,kBAAkB,EAAE,CAAC,SAAS,CAAC,KAAX,IAAoB,CAAC,CAAC,KAAK,CAAC,WAtBrB;IAuB3B,GAAG;EAvBwB,CAA7B;EA0BA,OAAO,KAAP;AACD,CAlDM","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\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\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const triggerShorthand = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  const listboxShorthand = resolveShorthand(props.listbox, { required: true });\n\n  const [triggerWithPopup, listboxWithPopup] = useComboboxPopup(props, triggerShorthand, listboxShorthand);\n  const [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerWithPopup, listboxWithPopup);\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        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  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["React","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useTimeout","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useMergedRefs","useDropdown_unstable","props","ref","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionValue","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","onTriggerKeyDown","ev","key","nextOption","triggerSlot","listboxSlot","button","required","defaultProps","type","children","value","placeholder","onKeyDown","hasFocus","listbox","style","state","components","expandIcon","inlinePopup","placeholderVisible"],"sourceRoot":"../src/","sources":["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 {\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"]}