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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dropdown/Dropdown.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AAEA,MAAA,0BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EACA,MAAM,aAAa,GAAG,0BAAA,CAAA,wBAAA,CAAyB,KAAzB,CAAtB;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,aAA/B,CAAP;AACD,CAN2D,CAA/C;AAQb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAEA;AAGA;;;AAGaA,gBAAQ,gBAAuCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGC,kCAAoB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAMG,aAAa,GAAGC,mDAAwB,CAACH,KAAK,CAAC;EAErDI,8CAA0B,CAACJ,KAAK,CAAC;EACjC,OAAOK,wCAAuB,CAACL,KAAK,EAAEE,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFP,gBAAQ,CAACW,WAAW,GAAG,UAAU","names":["exports","React","forwardRef","props","ref","state","useDropdown_1","contextValues","useComboboxContextValues_1","useDropdownStyles_1","renderDropdown_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Dropdown"), exports);
-
 tslib_1.__exportStar(require("./Dropdown.types"), exports);
-
 tslib_1.__exportStar(require("./renderDropdown"), exports);
-
 tslib_1.__exportStar(require("./useDropdown"), exports);
-
 tslib_1.__exportStar(require("./useDropdownStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dropdown/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/index.ts"],"sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles';\n"]}

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

@@ -4,34 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderDropdown_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const ComboboxContext_1 = /*#__PURE__*/require("../../contexts/ComboboxContext");
 /**
  * Render the final JSX of Dropdown
  */
-
-
 const renderDropdown_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  const listbox = React.createElement(slots.listbox, { ...slotProps.listbox
-  }, slotProps.root.children);
-  const popup = state.inlinePopup ? listbox : React.createElement(react_portal_1.Portal, null, listbox);
-  return React.createElement(slots.root, { ...slotProps.root
+  return React.createElement(slots.root, {
+    ...slotProps.root
   }, React.createElement(ComboboxContext_1.ComboboxContext.Provider, {
     value: contextValues.combobox
-  }, React.createElement(slots.button, { ...slotProps.button
-  }, slotProps.button.children, slots.expandIcon && React.createElement(slots.expandIcon, { ...slotProps.expandIcon
-  })), state.open ? popup : null));
+  }, React.createElement(slots.button, {
+    ...slotProps.button
+  }, slotProps.button.children, slots.expandIcon && React.createElement(slots.expandIcon, {
+    ...slotProps.expandIcon
+  })), slots.listbox && (state.inlinePopup ? React.createElement(slots.listbox, {
+    ...slotProps.listbox
+  }) : React.createElement(react_portal_1.Portal, null, React.createElement(slots.listbox, {
+    ...slotProps.listbox
+  })))));
 };
-
 exports.renderDropdown_unstable = renderDropdown_unstable;
 //# sourceMappingURL=renderDropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dropdown/renderDropdown.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;EACpG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,MAAM,OAAO,GAAG,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,GAA8B,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EAAS,OAAT,CAA5C;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,eAAA,CAAgB,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,IAAoB,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;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","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;AACA;AACA;AACA;AAGA;;;AAGO,MAAMA,uBAAuB,GAAG,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAgBJ,KAAK,CAAC;EAE3D,OACEK,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACE,iCAAe,CAACC,QAAQ;IAACC,KAAK,EAAER,aAAa,CAACS;EAAQ,GACrDL,oBAACH,KAAK,CAACS,MAAM;IAAA,GAAKR,SAAS,CAACQ;EAAM,GAC/BR,SAAS,CAACQ,MAAM,CAACC,QAAQ,EACzBV,KAAK,CAACW,UAAU,IAAIR,oBAACH,KAAK,CAACW,UAAU;IAAA,GAAKV,SAAS,CAACU;EAAU,EAAI,CACtD,EACdX,KAAK,CAACY,OAAO,KACXd,KAAK,CAACe,WAAW,GAChBV,oBAACH,KAAK,CAACY,OAAO;IAAA,GAAKX,SAAS,CAACW;EAAO,EAAI,GAExCT,oBAACW,qBAAM,QACLX,oBAACH,KAAK,CAACY,OAAO;IAAA,GAAKX,SAAS,CAACW;EAAO,EAAI,CAE3C,CAAC,CACqB,CAChB;AAEjB,CAAC;AArBYG,+BAAuB","names":["renderDropdown_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","root","ComboboxContext_1","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup","react_portal_1","exports"],"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-commonjs/components/Dropdown/useDropdown.js

@@ -4,20 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 useTriggerListboxSlots_1 = /*#__PURE__*/require("../../utils/useTriggerListboxSlots");
-
 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.
  *
@@ -27,10 +22,17 @@ const Listbox_1 = /*#__PURE__*/require("../Listbox/Listbox");
  * @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
@@ -39,7 +41,69 @@ const useDropdown_unstable = (props, ref) => {
     primarySlotTagName: 'button',
     excludedPropNames: ['children']
   });
-  const triggerShorthand = react_utilities_1.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] = react_utilities_1.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 (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',
@@ -47,11 +111,18 @@ const useDropdown_unstable = (props, ref) => {
       ...triggerNativeProps
     }
   });
-  const listboxShorthand = react_utilities_1.resolveShorthand(props.listbox, {
-    required: true
-  });
-  const [triggerWithPopup, listboxWithPopup] = useComboboxPopup_1.useComboboxPopup(props, triggerShorthand, listboxShorthand);
-  const [triggerSlot, listboxSlot] = useTriggerListboxSlots_1.useTriggerListboxSlots(props, baseState, ref, triggerWithPopup, listboxWithPopup);
+  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',
@@ -62,6 +133,7 @@ const useDropdown_unstable = (props, ref) => {
     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
       }
@@ -77,8 +149,8 @@ const useDropdown_unstable = (props, ref) => {
     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-commonjs/components/Dropdown/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Dropdown/useDropdown.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,oCAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA2E;EAC7G,MAAM,SAAS,GAAG,sBAAA,CAAA,oBAAA,CAAqB,KAArB,CAAlB;EAEA,MAAM;IAAE,OAAO,EAAE,kBAAX;IAA+B,IAAI,EAAE;EAArC,IAAyD,iBAAA,CAAA,yBAAA,CAA0B;IACvF,KADuF;IAEvF,kBAAkB,EAAE,QAFmE;IAGvF,iBAAiB,EAAE,CAAC,UAAD;EAHoE,CAA1B,CAA/D;EAMA,MAAM,gBAAgB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,EAA+B;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,CAA/B,CAAzB;EASA,MAAM,gBAAgB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,OAAvB,EAAgC;IAAE,QAAQ,EAAE;EAAZ,CAAhC,CAAzB;EAEA,MAAM,CAAC,gBAAD,EAAmB,gBAAnB,IAAuC,kBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB,gBAAxB,EAA0C,gBAA1C,CAA7C;EACA,MAAM,CAAC,WAAD,EAAc,WAAd,IAA6B,wBAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,SAA9B,EAAyC,GAAzC,EAA8C,gBAA9C,EAAgE,gBAAhE,CAAnC;EAEA,MAAM,KAAK,GAAkB;IAC3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE,QAFE;MAGV,UAAU,EAAE,MAHF;MAIV,OAAO,EAAE,SAAA,CAAA;IAJC,CADe;IAO3B,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,QAAQ,EAAE,KAAK,CAAC,QADJ;QAEZ,GAAG;MAFS;IAFmB,CAA7B,CAPqB;IAc3B,MAAM,EAAE,WAdmB;IAe3B,OAAO,EAAE,WAfkB;IAgB3B,UAAU,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,UAAvB,EAAmC;MAC7C,QAAQ,EAAE,IADmC;MAE7C,YAAY,EAAE;QACZ,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,kBAAD,EAAgB,IAAhB;MADE;IAF+B,CAAnC,CAhBe;IAsB3B,kBAAkB,EAAE,CAAC,SAAS,CAAC,KAAX,IAAoB,CAAC,CAAC,KAAK,CAAC,WAtBrB;IAuB3B,GAAG;EAvBwB,CAA7B;EA0BA,OAAO,KAAP;AACD,CAlDM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","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":["useDropdown_unstable","props","ref","baseState","useComboboxBaseState_1","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","react_utilities_1","primarySlotTagName","excludedPropNames","rootRef","React","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","dropdownKeyActions_1","key","nextOption","triggerSlot","listboxSlot","button","required","defaultProps","type","children","value","placeholder","onKeyDown","hasFocus","listbox","style","useComboboxPopup_1","useTriggerListboxSlots_1","state","components","expandIcon","Listbox_1","inlinePopup","react_icons_1","placeholderVisible","react_utilities_2","exports"],"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"]}