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

package/lib/components/Combobox/Combobox.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.types.js","sourceRoot":"../src/","sources":["components/Combobox/Combobox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox: NonNullable<Slot<typeof Listbox>>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\n"]}
+{"version":3,"file":"Combobox.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    /*\n     * Whether the ComboBox allows freeform user input, rather than restricting to the provided options.\n     */\n    freeform?: boolean;\n\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\n"]}

package/lib/components/Combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles';\n"]}

package/lib/components/Combobox/renderCombobox.js

@@ -5,20 +5,23 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
 /**
  * Render the final JSX of Combobox
  */
-
 export const renderCombobox_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.input, { ...slotProps.input
-  }), slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, { ...slotProps.expandIcon
-  }), state.open ? popup : null));
+  }, /*#__PURE__*/React.createElement(slots.input, {
+    ...slotProps.input
+  }), 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=renderCombobox.js.map

package/lib/components/Combobox/renderCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Combobox/renderCombobox.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,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAFvB,EAGG,KAAK,CAAC,IAAN,GAAa,KAAb,GAAqB,IAHxB,CADF,CADF;AASD,CAfM","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 { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  const { slots, slotProps } = getSlots<ComboboxSlots>(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.input {...slotProps.input} />\n        {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\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,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,EACnCN,KAAK,CAACO,UAAU,iBAAId,oBAACO,KAAK,CAACO,UAAU;IAAA,GAAKN,SAAS,CAACM;EAAU,EAAI,EAClEP,KAAK,CAACQ,OAAO,KACXV,KAAK,CAACW,WAAW,gBAChBhB,oBAACO,KAAK,CAACQ,OAAO;IAAA,GAAKP,SAAS,CAACO;EAAO,EAAI,gBAExCf,oBAACC,MAAM,qBACLD,oBAACO,KAAK,CAACQ,OAAO;IAAA,GAAKP,SAAS,CAACO;EAAO,EAAI,CAE3C,CAAC,CACqB,CAChB;AAEjB,CAAC","names":["React","Portal","getSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/renderCombobox.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 { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  const { slots, slotProps } = getSlots<ComboboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.input {...slotProps.input} />\n        {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\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/Combobox/useCombobox.js

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

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

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