@fluentui/react-combobox 9.13.9 → 9.13.11

package/lib/utils/useTriggerSlot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../utils/dropdownKeyActions';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type UseTriggerSlotState = Pick<\n  ComboboxBaseState,\n  'open' | 'getOptionById' | 'selectOption' | 'setOpen' | 'multiselect' | 'setHasFocus'\n>;\n\ntype UseTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseTriggerSlotOptions & { elementType: 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;\n\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseTriggerSlotOptions & { elementType: 'input' },\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'input'>> | NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement> | React.Ref<HTMLInputElement>,\n  options: UseTriggerSlotOptions & { elementType: 'input' | 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> | SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: { open, setOpen, setHasFocus },\n    defaultProps,\n    elementType,\n    activeDescendantController,\n  } = options;\n\n  const trigger = slot.always(triggerSlotFromProp, {\n    defaultProps: {\n      type: 'text',\n      'aria-expanded': open,\n      role: 'combobox',\n      ...(typeof defaultProps === 'object' && defaultProps),\n    },\n    elementType,\n  });\n\n  // handle trigger focus/blur\n  const triggerRef = React.useRef<HTMLButtonElement | HTMLInputElement>(null);\n  trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref) as React.Ref<HTMLButtonElement & HTMLInputElement>;\n\n  // the trigger should open/close the popup on click or blur\n  trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n    setOpen(event, false);\n    setHasFocus(false);\n  }, trigger.onBlur);\n\n  trigger.onFocus = mergeCallbacks(\n    (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n      if (event.target === event.currentTarget) {\n        setHasFocus(true);\n      }\n    },\n    trigger.onFocus,\n  );\n  trigger.onClick = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setOpen(event, !open);\n    },\n    trigger.onClick,\n  );\n\n  // handle combobox keyboard interaction\n  trigger.onKeyDown = mergeCallbacks(\n    useTriggerKeydown({ activeDescendantController, ...options.state }),\n    trigger.onKeyDown,\n  );\n\n  return trigger as SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n}\n\nfunction useTriggerKeydown(\n  options: {\n    activeDescendantController: ActiveDescendantImperativeRef;\n  } & Pick<UseTriggerSlotState, 'setOpen' | 'selectOption' | 'getOptionById' | 'multiselect' | 'open'>,\n) {\n  const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;\n\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  const first = () => {\n    activeDescendantController.first();\n  };\n\n  const last = () => {\n    activeDescendantController.last();\n  };\n\n  const next = (activeOption: OptionValue | undefined) => {\n    if (activeOption) {\n      activeDescendantController.next();\n    } else {\n      activeDescendantController.first();\n    }\n  };\n\n  const previous = (activeOption: OptionValue | undefined) => {\n    if (activeOption) {\n      activeDescendantController.prev();\n    } else {\n      activeDescendantController.first();\n    }\n  };\n\n  const pageUp = () => {\n    for (let i = 0; i < 10; i++) {\n      activeDescendantController.prev();\n    }\n  };\n\n  const pageDown = () => {\n    for (let i = 0; i < 10; i++) {\n      activeDescendantController.next();\n    }\n  };\n\n  const setKeyboardNavigation = useSetKeyboardNavigation();\n  return useEventCallback((e: React.KeyboardEvent<HTMLInputElement> & React.KeyboardEvent<HTMLButtonElement>) => {\n    const action = getDropdownActionFromKey(e, { open, multiselect });\n    const activeOption = getActiveOption();\n\n    switch (action) {\n      case 'First':\n      case 'Last':\n      case 'Next':\n      case 'Previous':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Open':\n      case 'Close':\n      case 'CloseSelect':\n      case 'Select':\n        e.preventDefault();\n        break;\n    }\n\n    setKeyboardNavigation(true);\n\n    switch (action) {\n      case 'First':\n        first();\n        break;\n      case 'Last':\n        last();\n        break;\n      case 'Next':\n        next(activeOption);\n        break;\n      case 'Previous':\n        previous(activeOption);\n        break;\n      case 'PageDown':\n        pageDown();\n        break;\n      case 'PageUp':\n        pageUp();\n        break;\n      case 'Open':\n        setOpen(e, true);\n        break;\n      case 'Close':\n        // stop propagation for escape key to avoid dismissing any parent popups\n        e.stopPropagation();\n        setOpen(e, false);\n        break;\n      case 'CloseSelect':\n        !multiselect && !activeOption?.disabled && setOpen(e, false);\n      // fallthrough\n      case 'Select':\n        activeOption && selectOption(e, activeOption);\n        break;\n      case 'Tab':\n        !multiselect && activeOption && selectOption(e, activeOption);\n        break;\n    }\n  });\n}\n"],"names":["React","useSetKeyboardNavigation","mergeCallbacks","slot","useEventCallback","useMergedRefs","getDropdownActionFromKey","useTriggerSlot","triggerSlotFromProp","ref","options","state","open","setOpen","setHasFocus","defaultProps","elementType","activeDescendantController","trigger","always","type","role","triggerRef","useRef","onBlur","event","onFocus","target","currentTarget","onClick","onKeyDown","useTriggerKeydown","getOptionById","selectOption","multiselect","getActiveOption","useCallback","activeOptionId","active","undefined","first","last","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","e","action","preventDefault","stopPropagation","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/utils/useTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../utils/dropdownKeyActions';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type UseTriggerSlotState = Pick<\n  ComboboxBaseState,\n  'open' | 'getOptionById' | 'selectOption' | 'setOpen' | 'multiselect' | 'setHasFocus'\n>;\n\ntype UseTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseTriggerSlotOptions & { elementType: 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;\n\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseTriggerSlotOptions & { elementType: 'input' },\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'input'>> | NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement> | React.Ref<HTMLInputElement>,\n  options: UseTriggerSlotOptions & { elementType: 'input' | 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> | SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: { open, setOpen, setHasFocus },\n    defaultProps,\n    elementType,\n    activeDescendantController,\n  } = options;\n\n  const trigger = slot.always(triggerSlotFromProp, {\n    defaultProps: {\n      type: 'text',\n      'aria-expanded': open,\n      role: 'combobox',\n      ...(typeof defaultProps === 'object' && defaultProps),\n    },\n    elementType,\n  });\n\n  // handle trigger focus/blur\n  const triggerRef = React.useRef<HTMLButtonElement | HTMLInputElement>(null);\n  trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref) as React.Ref<HTMLButtonElement & HTMLInputElement>;\n\n  // the trigger should open/close the popup on click or blur\n  trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n    setOpen(event, false);\n    setHasFocus(false);\n  }, trigger.onBlur);\n\n  trigger.onFocus = mergeCallbacks(\n    (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n      if (event.target === event.currentTarget) {\n        setHasFocus(true);\n      }\n    },\n    trigger.onFocus,\n  );\n  trigger.onClick = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setOpen(event, !open);\n    },\n    trigger.onClick,\n  );\n\n  // handle combobox keyboard interaction\n  trigger.onKeyDown = mergeCallbacks(\n    useTriggerKeydown({ activeDescendantController, ...options.state }),\n    trigger.onKeyDown,\n  );\n\n  return trigger as SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n}\n\nfunction useTriggerKeydown(\n  options: {\n    activeDescendantController: ActiveDescendantImperativeRef;\n  } & Pick<UseTriggerSlotState, 'setOpen' | 'selectOption' | 'getOptionById' | 'multiselect' | 'open'>,\n) {\n  const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;\n\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  const first = () => {\n    activeDescendantController.first();\n  };\n\n  const last = () => {\n    activeDescendantController.last();\n  };\n\n  const next = (activeOption: OptionValue | undefined) => {\n    if (activeOption) {\n      activeDescendantController.next();\n    } else {\n      activeDescendantController.first();\n    }\n  };\n\n  const previous = (activeOption: OptionValue | undefined) => {\n    if (activeOption) {\n      activeDescendantController.prev();\n    } else {\n      activeDescendantController.first();\n    }\n  };\n\n  const pageUp = () => {\n    for (let i = 0; i < 10; i++) {\n      activeDescendantController.prev();\n    }\n  };\n\n  const pageDown = () => {\n    for (let i = 0; i < 10; i++) {\n      activeDescendantController.next();\n    }\n  };\n\n  const setKeyboardNavigation = useSetKeyboardNavigation();\n  return useEventCallback((e: React.KeyboardEvent<HTMLInputElement> & React.KeyboardEvent<HTMLButtonElement>) => {\n    const action = getDropdownActionFromKey(e, { open, multiselect });\n    const activeOption = getActiveOption();\n\n    switch (action) {\n      case 'First':\n      case 'Last':\n      case 'Next':\n      case 'Previous':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Open':\n      case 'Close':\n      case 'CloseSelect':\n      case 'Select':\n        e.preventDefault();\n        break;\n    }\n\n    setKeyboardNavigation(true);\n\n    switch (action) {\n      case 'First':\n        first();\n        break;\n      case 'Last':\n        last();\n        break;\n      case 'Next':\n        next(activeOption);\n        break;\n      case 'Previous':\n        previous(activeOption);\n        break;\n      case 'PageDown':\n        pageDown();\n        break;\n      case 'PageUp':\n        pageUp();\n        break;\n      case 'Open':\n        setOpen(e, true);\n        break;\n      case 'Close':\n        // stop propagation for escape key to avoid dismissing any parent popups\n        e.stopPropagation();\n        setOpen(e, false);\n        break;\n      case 'CloseSelect':\n        !multiselect && !activeOption?.disabled && setOpen(e, false);\n      // fallthrough\n      case 'Select':\n        activeOption && selectOption(e, activeOption);\n        break;\n      case 'Tab':\n        !multiselect && activeOption && selectOption(e, activeOption);\n        break;\n    }\n  });\n}\n"],"names":["React","useSetKeyboardNavigation","mergeCallbacks","slot","useEventCallback","useMergedRefs","getDropdownActionFromKey","useTriggerSlot","triggerSlotFromProp","ref","options","state","open","setOpen","setHasFocus","defaultProps","elementType","activeDescendantController","trigger","always","type","role","triggerRef","useRef","onBlur","event","onFocus","target","currentTarget","onClick","onKeyDown","useTriggerKeydown","getOptionById","selectOption","multiselect","getActiveOption","useCallback","activeOptionId","active","undefined","first","last","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","e","action","preventDefault","stopPropagation","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Combobox.ts"],"sourcesContent":["export * from './components/Combobox/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/Combobox.ts"],"sourcesContent":["export * from './components/Combobox/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.ts"],"sourcesContent":["export * from './components/Dropdown/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/Dropdown.ts"],"sourcesContent":["export * from './components/Dropdown/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Listbox.ts"],"sourcesContent":["export * from './components/Listbox/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/Listbox.ts"],"sourcesContent":["export * from './components/Listbox/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/Option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Option.ts"],"sourcesContent":["export * from './components/Option/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/Option.ts"],"sourcesContent":["export * from './components/Option/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/OptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["OptionGroup.ts"],"sourcesContent":["export * from './components/OptionGroup/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/OptionGroup.ts"],"sourcesContent":["export * from './components/OptionGroup/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/Selection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Selection.ts"],"sourcesContent":["export * from './utils/Selection.types';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/Selection.ts"],"sourcesContent":["export * from './utils/Selection.types';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["Combobox","React","forwardRef","props","ref","state","useCombobox_unstable","contextValues","useComboboxContextValues","useComboboxStyles_unstable","useCustomStyleHook_unstable","renderCombobox_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACc;gCACG;yCACG;0CAEF;qCAEG;AAKrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,kDAAAA,EAAyBH;IAE/CI,IAAAA,mDAAAA,EAA2BJ;IAE3BK,IAAAA,gDAAAA,EAA4B,8BAA8BL;IAE1D,OAAOM,IAAAA,uCAAAA,EAAwBN,OAAOE;AACxC;AAEAP,SAASY,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["Combobox","React","forwardRef","props","ref","state","useCombobox_unstable","contextValues","useComboboxContextValues","useComboboxStyles_unstable","useCustomStyleHook_unstable","renderCombobox_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACc;gCACG;yCACG;0CAEF;qCAEG;AAKrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,kDAAAA,EAAyBH;IAE/CI,IAAAA,mDAAAA,EAA2BJ;IAE3BK,IAAAA,gDAAAA,EAA4B,8BAA8BL;IAE1D,OAAOM,IAAAA,uCAAAA,EAAwBN,OAAOE;AACxC;AAEAP,SAASY,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\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 dropdown clear icon */\n  clearIcon?: 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    freeform?: boolean;\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> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
+{"version":3,"sources":["../src/components/Combobox/Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\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 dropdown clear icon */\n  clearIcon?: 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    freeform?: boolean;\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> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line deprecation/deprecation*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            {state.expandIcon && <state.expandIcon />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line deprecation/deprecation*/}\n          </ComboboxContext.Provider>\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["renderCombobox_unstable","state","contextValues","assertSlots","_jsx","root","ActiveDescendantContextProvider","value","activeDescendant","ListboxProvider","listbox","_jsxs","ComboboxContext","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","Portal","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;4BAZb;6BACuB;2BACyB;gCAEpB;iCACI;gCAEA;AAKzB,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,0CAAAA,EAAAA;YAAgCC,OAAOL,cAAcM,gBAAgB;sBACpE,WAAA,GAAAJ,IAAAA,eAAA,EAACK,+BAAAA,EAAAA;gBAAgBF,OAAOL,cAAcQ,OAAO;0BAE3C,WAAA,GAAAC,IAAAA,gBAAA,EAACC,gCAAAA,CAAgBC,QAAQ,EAAA;oBAACN,OAAOL,cAAcY,QAAQ;;sCACrDV,IAAAA,eAAA,EAACH,MAAMc,KAAK,EAAA,CAAA;wBACXd,MAAMe,SAAS,IAAA,WAAA,GAAIZ,IAAAA,eAAA,EAACH,MAAMe,SAAS,EAAA,CAAA;wBACnCf,MAAMgB,UAAU,IAAA,WAAA,GAAIb,IAAAA,eAAA,EAACH,MAAMgB,UAAU,EAAA,CAAA;wBACrChB,MAAMS,OAAO,IACXT,CAAAA,MAAMiB,WAAW,GAAA,WAAA,GAChBd,IAAAA,eAAA,EAACH,MAAMS,OAAO,EAAA,CAAA,KAAA,WAAA,GAEdN,IAAAA,eAAA,EAACe,mBAAAA,EAAAA;4BAAOC,WAAWnB,MAAMmB,SAAS;sCAChC,WAAA,GAAAhB,IAAAA,eAAA,EAACH,MAAMS,OAAO,EAAA,CAAA;;;;;;;AAShC"}
+{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line deprecation/deprecation*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            {state.expandIcon && <state.expandIcon />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line deprecation/deprecation*/}\n          </ComboboxContext.Provider>\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["renderCombobox_unstable","state","contextValues","assertSlots","_jsx","root","ActiveDescendantContextProvider","value","activeDescendant","ListboxProvider","listbox","_jsxs","ComboboxContext","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","Portal","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;4BAZb;6BACuB;2BACyB;gCAEpB;iCACI;gCAEA;AAKzB,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,0CAAAA,EAAAA;YAAgCC,OAAOL,cAAcM,gBAAgB;sBACpE,WAAA,GAAAJ,IAAAA,eAAA,EAACK,+BAAAA,EAAAA;gBAAgBF,OAAOL,cAAcQ,OAAO;0BAE3C,WAAA,GAAAC,IAAAA,gBAAA,EAACC,gCAAAA,CAAgBC,QAAQ,EAAA;oBAACN,OAAOL,cAAcY,QAAQ;;sCACrDV,IAAAA,eAAA,EAACH,MAAMc,KAAK,EAAA,CAAA;wBACXd,MAAMe,SAAS,IAAA,WAAA,GAAIZ,IAAAA,eAAA,EAACH,MAAMe,SAAS,EAAA,CAAA;wBACnCf,MAAMgB,UAAU,IAAA,WAAA,GAAIb,IAAAA,eAAA,EAACH,MAAMgB,UAAU,EAAA,CAAA;wBACrChB,MAAMS,OAAO,IACXT,CAAAA,MAAMiB,WAAW,GAAA,WAAA,GAChBd,IAAAA,eAAA,EAACH,MAAMS,OAAO,EAAA,CAAA,KAAA,WAAA,GAEdN,IAAAA,eAAA,EAACe,mBAAAA,EAAAA;4BAAOC,WAAWnB,MAAMmB,SAAS;sCAChC,WAAA,GAAAhB,IAAAA,eAAA,EAACH,MAAMS,OAAO,EAAA,CAAA;;;;;;;AAShC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { ComboboxOpenEvents, ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\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  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n  const baseState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n\n  const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } =\n    baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disableAutoFocus = false, freeform, inlinePopup } = 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 triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n      disableAutoFocus,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: <DismissIcon />,\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-disabled': disabled ? 'true' : undefined,\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\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  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearIcon = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["useCombobox_unstable","props","ref","state","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","editable","clearable","clearSelection","disabled","multiselect","open","selectedOptions","setOpen","value","hasFocus","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","disableAutoFocus","freeform","inlinePopup","comboId","useId","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","defaultProps","children","triggerSlot","useInputTriggerSlot","input","type","id","undefined","rootSlot","slot","always","elementType","showClearIcon","length","components","expandIcon","Listbox","clearIcon","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","role","targetDocument","useFluent","useOnClickOutside","element","callback","event","refs","onMouseDown","onIconMouseDown","onExpandIconMouseDown","useEventCallback","mergeCallbacks","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { ComboboxOpenEvents, ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\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  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n  const baseState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n\n  const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } =\n    baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disableAutoFocus = false, freeform, inlinePopup } = 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 triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n      disableAutoFocus,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: <DismissIcon />,\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-disabled': disabled ? 'true' : undefined,\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\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  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearIcon = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["useCombobox_unstable","props","ref","state","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","editable","clearable","clearSelection","disabled","multiselect","open","selectedOptions","setOpen","value","hasFocus","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","disableAutoFocus","freeform","inlinePopup","comboId","useId","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","defaultProps","children","triggerSlot","useInputTriggerSlot","input","type","id","undefined","rootSlot","slot","always","elementType","showClearIcon","length","components","expandIcon","Listbox","clearIcon","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","role","targetDocument","useFluent","useOnClickOutside","element","callback","event","refs","onMouseDown","onIconMouseDown","onExpandIconMouseDown","useEventCallback","mergeCallbacks","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js

@@ -691,4 +691,4 @@ const useComboboxStyles_unstable = (state)=>{
         state.clearIcon.className = (0, _react.mergeClasses)(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
     }
     return state;
-}; //# sourceMappingURL=useComboboxStyles.styles.js.map
+};

package/lib-commonjs/components/Combobox/useInputTriggerSlot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useInputTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ComboboxProps } from '../Combobox/Combobox.types';\nimport { UseTriggerSlotState, useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { ComboboxBaseState } from '../../utils/ComboboxBase.types';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n  Pick<ComboboxBaseState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionById'>;\n\ntype UseInputTriggerSlotOptions = {\n  state: UsedComboboxState;\n  freeform: boolean | undefined;\n  defaultProps?: Partial<ComboboxProps>;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * @internal\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useInputTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  'use no memo';\n\n  const {\n    state: {\n      open,\n      value,\n      selectOption,\n      setValue,\n      multiselect,\n      selectedOptions,\n      clearSelection,\n      getOptionById,\n      setOpen,\n    },\n    freeform,\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!open && !freeform) {\n      const activeOptionId = activeDescendantController.active();\n      const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        selectOption(event, 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  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      activeDescendantController.blur();\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const match = activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n\n    if (!match) {\n      activeDescendantController.blur();\n      return undefined;\n    }\n\n    return getOptionById(match);\n  };\n\n  // update value and active option based on input\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = event.target.value;\n    // update uncontrolled value\n    setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(event);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'input',\n    activeDescendantController,\n  });\n\n  trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n  trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\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  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const defaultOnKeyDown = trigger.onKeyDown;\n  const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(event) === 'Type') {\n      setOpen(event, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (event.key === ArrowLeft || event.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(event, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && event.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if ((isTyping.current || !open) && event.key === ' ') {\n      triggerFromProps?.onKeyDown?.(event);\n      return;\n    }\n\n    defaultOnKeyDown?.(event);\n  });\n\n  trigger.onKeyDown = onKeyDown;\n\n  if (hideActiveDescendant) {\n    trigger['aria-activedescendant'] = undefined;\n  }\n\n  return trigger;\n}\n"],"names":["useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","selectOption","setValue","multiselect","selectedOptions","clearSelection","getOptionById","setOpen","freeform","defaultProps","activeDescendantController","onBlur","event","activeOptionId","active","activeOption","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","blur","matcher","optionText","indexOf","match","find","id","option","onChange","target","matchingOption","trigger","useTriggerSlot","elementType","mergeCallbacks","hideActiveDescendant","setHideActiveDescendant","React","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","useEventCallback","getDropdownActionFromKey","key","ArrowLeft","ArrowRight","action","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Combobox/useInputTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ComboboxProps } from '../Combobox/Combobox.types';\nimport { UseTriggerSlotState, useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { ComboboxBaseState } from '../../utils/ComboboxBase.types';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n  Pick<ComboboxBaseState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionById'>;\n\ntype UseInputTriggerSlotOptions = {\n  state: UsedComboboxState;\n  freeform: boolean | undefined;\n  defaultProps?: Partial<ComboboxProps>;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * @internal\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useInputTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  'use no memo';\n\n  const {\n    state: {\n      open,\n      value,\n      selectOption,\n      setValue,\n      multiselect,\n      selectedOptions,\n      clearSelection,\n      getOptionById,\n      setOpen,\n    },\n    freeform,\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!open && !freeform) {\n      const activeOptionId = activeDescendantController.active();\n      const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        selectOption(event, 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  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      activeDescendantController.blur();\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const match = activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n\n    if (!match) {\n      activeDescendantController.blur();\n      return undefined;\n    }\n\n    return getOptionById(match);\n  };\n\n  // update value and active option based on input\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = event.target.value;\n    // update uncontrolled value\n    setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(event);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'input',\n    activeDescendantController,\n  });\n\n  trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n  trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\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  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const defaultOnKeyDown = trigger.onKeyDown;\n  const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(event) === 'Type') {\n      setOpen(event, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (event.key === ArrowLeft || event.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(event, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && event.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if ((isTyping.current || !open) && event.key === ' ') {\n      triggerFromProps?.onKeyDown?.(event);\n      return;\n    }\n\n    defaultOnKeyDown?.(event);\n  });\n\n  trigger.onKeyDown = onKeyDown;\n\n  if (hideActiveDescendant) {\n    trigger['aria-activedescendant'] = undefined;\n  }\n\n  return trigger;\n}\n"],"names":["useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","selectOption","setValue","multiselect","selectedOptions","clearSelection","getOptionById","setOpen","freeform","defaultProps","activeDescendantController","onBlur","event","activeOptionId","active","activeOption","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","blur","matcher","optionText","indexOf","match","find","id","option","onChange","target","matchingOption","trigger","useTriggerSlot","elementType","mergeCallbacks","hideActiveDescendant","setHideActiveDescendant","React","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","useEventCallback","getDropdownActionFromKey","key","ArrowLeft","ArrowRight","action","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["Dropdown","React","forwardRef","props","ref","state","useDropdown_unstable","contextValues","useComboboxContextValues","useDropdownStyles_unstable","useCustomStyleHook_unstable","renderDropdown_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACc;gCACG;yCACG;0CAEF;qCAEG;AAKrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,kDAAAA,EAAyBH;IAE/CI,IAAAA,mDAAAA,EAA2BJ;IAE3BK,IAAAA,gDAAAA,EAA4B,8BAA8BL;IAE1D,OAAOM,IAAAA,uCAAAA,EAAwBN,OAAOE;AACxC;AAEAP,SAASY,WAAW,GAAG"}
+{"version":3,"sources":["../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.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["Dropdown","React","forwardRef","props","ref","state","useDropdown_unstable","contextValues","useComboboxContextValues","useDropdownStyles_unstable","useCustomStyleHook_unstable","renderDropdown_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACc;gCACG;yCACG;0CAEF;qCAEG;AAKrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,kDAAAA,EAAyBH;IAE/CI,IAAAA,mDAAAA,EAA2BJ;IAE3BK,IAAAA,gDAAAA,EAA4B,8BAA8BL;IAE1D,OAAOM,IAAAA,uCAAAA,EAAwBN,OAAOE;AACxC;AAEAP,SAASY,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n  /** The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /** The dropdown clear icon */\n  clearButton?: Slot<'button'>;\n\n  /** The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /** The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  Omit<ComboboxBaseState, 'freeform'> & {\n    /** Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n\n    showClearButton?: boolean;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n  /** The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /** The dropdown clear icon */\n  clearButton?: Slot<'button'>;\n\n  /** The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /** The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  Omit<ComboboxBaseState, 'freeform'> & {\n    /** Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n\n    showClearButton?: boolean;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"rangeMappings":"","mappings":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["../src/components/Dropdown/index.ts"],"sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxContext.Provider value={contextValues.listbox}>\n          {/*eslint-disable-next-line deprecation/deprecation*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.button>\n              {state.button.children}\n              {state.expandIcon && <state.expandIcon />}\n            </state.button>\n            {state.clearButton && <state.clearButton />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line deprecation/deprecation*/}\n          </ComboboxContext.Provider>\n        </ListboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["renderDropdown_unstable","state","contextValues","assertSlots","_jsx","root","ActiveDescendantContextProvider","value","activeDescendant","ListboxContext","Provider","listbox","_jsxs","ComboboxContext","combobox","button","children","expandIcon","clearButton","inlinePopup","Portal","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;4BAbb;6BAEuB;gCAEK;2BACoB;iCAChB;gCAED;AAKxB,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,0CAAAA,EAAAA;YAAgCC,OAAOL,cAAcM,gBAAgB;sBACpE,WAAA,GAAAJ,IAAAA,eAAA,EAACK,8BAAAA,CAAeC,QAAQ,EAAA;gBAACH,OAAOL,cAAcS,OAAO;0BAEnD,WAAA,GAAAC,IAAAA,gBAAA,EAACC,gCAAAA,CAAgBH,QAAQ,EAAA;oBAACH,OAAOL,cAAcY,QAAQ;;sCACrDF,IAAAA,gBAAA,EAACX,MAAMc,MAAM,EAAA;;gCACVd,MAAMc,MAAM,CAACC,QAAQ;gCACrBf,MAAMgB,UAAU,IAAA,WAAA,GAAIb,IAAAA,eAAA,EAACH,MAAMgB,UAAU,EAAA,CAAA;;;wBAEvChB,MAAMiB,WAAW,IAAA,WAAA,GAAId,IAAAA,eAAA,EAACH,MAAMiB,WAAW,EAAA,CAAA;wBACvCjB,MAAMU,OAAO,IACXV,CAAAA,MAAMkB,WAAW,GAAA,WAAA,GAChBf,IAAAA,eAAA,EAACH,MAAMU,OAAO,EAAA,CAAA,KAAA,WAAA,GAEdP,IAAAA,eAAA,EAACgB,mBAAAA,EAAAA;4BAAOC,WAAWpB,MAAMoB,SAAS;sCAChC,WAAA,GAAAjB,IAAAA,eAAA,EAACH,MAAMU,OAAO,EAAA,CAAA;;;;;;;AAShC"}
+{"version":3,"sources":["../src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxContext.Provider value={contextValues.listbox}>\n          {/*eslint-disable-next-line deprecation/deprecation*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.button>\n              {state.button.children}\n              {state.expandIcon && <state.expandIcon />}\n            </state.button>\n            {state.clearButton && <state.clearButton />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line deprecation/deprecation*/}\n          </ComboboxContext.Provider>\n        </ListboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["renderDropdown_unstable","state","contextValues","assertSlots","_jsx","root","ActiveDescendantContextProvider","value","activeDescendant","ListboxContext","Provider","listbox","_jsxs","ComboboxContext","combobox","button","children","expandIcon","clearButton","inlinePopup","Portal","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;4BAbb;6BAEuB;gCAEK;2BACoB;iCAChB;gCAED;AAKxB,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,0CAAAA,EAAAA;YAAgCC,OAAOL,cAAcM,gBAAgB;sBACpE,WAAA,GAAAJ,IAAAA,eAAA,EAACK,8BAAAA,CAAeC,QAAQ,EAAA;gBAACH,OAAOL,cAAcS,OAAO;0BAEnD,WAAA,GAAAC,IAAAA,gBAAA,EAACC,gCAAAA,CAAgBH,QAAQ,EAAA;oBAACH,OAAOL,cAAcY,QAAQ;;sCACrDF,IAAAA,gBAAA,EAACX,MAAMc,MAAM,EAAA;;gCACVd,MAAMc,MAAM,CAACC,QAAQ;gCACrBf,MAAMgB,UAAU,IAAA,WAAA,GAAIb,IAAAA,eAAA,EAACH,MAAMgB,UAAU,EAAA,CAAA;;;wBAEvChB,MAAMiB,WAAW,IAAA,WAAA,GAAId,IAAAA,eAAA,EAACH,MAAMiB,WAAW,EAAA,CAAA;wBACvCjB,MAAMU,OAAO,IACXV,CAAAA,MAAMkB,WAAW,GAAA,WAAA,GAChBf,IAAAA,eAAA,EAACH,MAAMU,OAAO,EAAA,CAAA,KAAA,WAAA,GAEdP,IAAAA,eAAA,EAACgB,mBAAAA,EAAAA;4BAAOC,WAAWpB,MAAMoB,SAAS;sCAChC,WAAA,GAAAjB,IAAAA,eAAA,EAACH,MAAMU,OAAO,EAAA,CAAA;;;;;;;AAShC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useButtonTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UseButtonTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * @internal\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useButtonTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n  'use no memo';\n\n  const {\n    state: { open, setOpen, getOptionById },\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const moveToNextMatchingOption = (\n    matcher: (optionText: string) => boolean,\n    opt: { startFromNext: boolean } = { startFromNext: false },\n  ) => {\n    const { startFromNext } = opt;\n    const activeOptionId = activeDescendantController.active();\n\n    const nextInOrder = activeDescendantController.find(\n      id => {\n        const option = getOptionById(id);\n        return !!option && matcher(option.text);\n      },\n      { startFrom: startFromNext ? activeDescendantController.next({ passive: true }) : activeOptionId },\n    );\n\n    if (nextInOrder) {\n      return nextInOrder;\n    }\n\n    // Cycle back to first match\n    return activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n  };\n\n  const moveToNextMatchingOptionWithSameCharacterHandling = () => {\n    if (\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n        },\n        {\n          // Slowly pressing the same key will cycle through options\n          startFromNext: searchString.current.length === 1,\n        },\n      )\n    ) {\n      return;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (\n      allCharactersSame(searchString.current) &&\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n        },\n        {\n          // if the search is all the same letter, cycle through options starting with that letter\n          startFromNext: true,\n        },\n      )\n    ) {\n      return;\n    }\n\n    activeDescendantController.blur();\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      if (open) {\n        moveToNextMatchingOptionWithSameCharacterHandling();\n      }\n\n      // update state\n      !open && setOpen(ev, true);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'button',\n    activeDescendantController,\n  });\n  trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n\n  return trigger;\n}\n\n/**\n * @returns - whether every character in the string is the same\n */\nfunction allCharactersSame(str: string) {\n  for (let i = 1; i < str.length; i++) {\n    if (str[i] !== str[i - 1]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n"],"names":["useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","React","useRef","setKeyTimeout","clearKeyTimeout","useTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","getDropdownActionFromKey","key","toLowerCase","trigger","useTriggerSlot","elementType","onKeyDown","mergeCallbacks","str","i"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBgBA;;;eAAAA;;;;iEAnBO;gCACoB;gCAGS;oCACX;AAclC,SAASA,qBACdC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC;IAEA,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EACvCC,YAAY,EACZC,0BAA0B,EAC3B,GAAGN;IAEJ,0CAA0C;IAC1C,MAAMO,eAAeC,OAAMC,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGC,IAAAA,0BAAAA;IAEzC,MAAMC,2BAA2B,CAC/BC,SACAC,MAAkC;QAAEC,eAAe;IAAM,CAAC;QAE1D,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBX,2BAA2BY,MAAM;QAExD,MAAMC,cAAcb,2BAA2Bc,IAAI,CACjDC,CAAAA;YACE,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC,GACA;YAAEC,WAAWR,gBAAgBV,2BAA2BmB,IAAI,CAAC;gBAAEC,SAAS;YAAK,KAAKT;QAAe;QAGnG,IAAIE,aAAa;YACf,OAAOA;QACT;QAEA,4BAA4B;QAC5B,OAAOb,2BAA2Bc,IAAI,CAACC,CAAAA;YACrC,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC;IACF;IAEA,MAAMI,oDAAoD;QACxD,IACEd,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,MAAM;QAC1E,GACA;YACE,0DAA0D;YAC1Df,eAAeT,aAAawB,OAAO,CAACC,MAAM,KAAK;QACjD,IAEF;YACA;QACF;QAEA,yFAAyF;QACzF,IACEC,kBAAkB1B,aAAawB,OAAO,KACtClB,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,CAAC,EAAE,MAAM;QAC7E,GACA;YACE,wFAAwF;YACxFf,eAAe;QACjB,IAEF;YACA;QACF;QAEAV,2BAA2B4B,IAAI;IACjC;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BzB;QAEA,kDAAkD;QAClD,IAAI0B,IAAAA,4CAAAA,EAAyBD,QAAQ,QAAQ;YAC3C,uBAAuB;YACvB7B,aAAawB,OAAO,IAAIK,GAAGE,GAAG,CAACC,WAAW;YAC1C7B,cAAc;gBACZH,aAAawB,OAAO,GAAG;YACzB,GAAG;YAEH,IAAI7B,MAAM;gBACRyB;YACF;YAEA,eAAe;YACf,CAACzB,QAAQC,QAAQiC,IAAI;QACvB;IACF;IAEA,MAAMI,UAAUC,IAAAA,8BAAAA,EAAe3C,kBAAkBC,KAAK;QACpDE,OAAOD,QAAQC,KAAK;QACpBI;QACAqC,aAAa;QACbpC;IACF;IACAkC,QAAQG,SAAS,GAAGC,IAAAA,8BAAAA,EAAeT,kBAAkBK,QAAQG,SAAS;IAEtE,OAAOH;AACT;AAEA;;CAEC,GACD,SAASP,kBAAkBY,GAAW;IACpC,IAAK,IAAIC,IAAI,GAAGA,IAAID,IAAIb,MAAM,EAAEc,IAAK;QACnC,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACzB,OAAO;QACT;IACF;IAEA,OAAO;AACT"}
+{"version":3,"sources":["../src/components/Dropdown/useButtonTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UseButtonTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * @internal\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useButtonTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n  'use no memo';\n\n  const {\n    state: { open, setOpen, getOptionById },\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const moveToNextMatchingOption = (\n    matcher: (optionText: string) => boolean,\n    opt: { startFromNext: boolean } = { startFromNext: false },\n  ) => {\n    const { startFromNext } = opt;\n    const activeOptionId = activeDescendantController.active();\n\n    const nextInOrder = activeDescendantController.find(\n      id => {\n        const option = getOptionById(id);\n        return !!option && matcher(option.text);\n      },\n      { startFrom: startFromNext ? activeDescendantController.next({ passive: true }) : activeOptionId },\n    );\n\n    if (nextInOrder) {\n      return nextInOrder;\n    }\n\n    // Cycle back to first match\n    return activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n  };\n\n  const moveToNextMatchingOptionWithSameCharacterHandling = () => {\n    if (\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n        },\n        {\n          // Slowly pressing the same key will cycle through options\n          startFromNext: searchString.current.length === 1,\n        },\n      )\n    ) {\n      return;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (\n      allCharactersSame(searchString.current) &&\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n        },\n        {\n          // if the search is all the same letter, cycle through options starting with that letter\n          startFromNext: true,\n        },\n      )\n    ) {\n      return;\n    }\n\n    activeDescendantController.blur();\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      if (open) {\n        moveToNextMatchingOptionWithSameCharacterHandling();\n      }\n\n      // update state\n      !open && setOpen(ev, true);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'button',\n    activeDescendantController,\n  });\n  trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n\n  return trigger;\n}\n\n/**\n * @returns - whether every character in the string is the same\n */\nfunction allCharactersSame(str: string) {\n  for (let i = 1; i < str.length; i++) {\n    if (str[i] !== str[i - 1]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n"],"names":["useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","React","useRef","setKeyTimeout","clearKeyTimeout","useTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","getDropdownActionFromKey","key","toLowerCase","trigger","useTriggerSlot","elementType","onKeyDown","mergeCallbacks","str","i"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBgBA;;;eAAAA;;;;iEAnBO;gCACoB;gCAGS;oCACX;AAclC,SAASA,qBACdC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC;IAEA,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EACvCC,YAAY,EACZC,0BAA0B,EAC3B,GAAGN;IAEJ,0CAA0C;IAC1C,MAAMO,eAAeC,OAAMC,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGC,IAAAA,0BAAAA;IAEzC,MAAMC,2BAA2B,CAC/BC,SACAC,MAAkC;QAAEC,eAAe;IAAM,CAAC;QAE1D,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBX,2BAA2BY,MAAM;QAExD,MAAMC,cAAcb,2BAA2Bc,IAAI,CACjDC,CAAAA;YACE,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC,GACA;YAAEC,WAAWR,gBAAgBV,2BAA2BmB,IAAI,CAAC;gBAAEC,SAAS;YAAK,KAAKT;QAAe;QAGnG,IAAIE,aAAa;YACf,OAAOA;QACT;QAEA,4BAA4B;QAC5B,OAAOb,2BAA2Bc,IAAI,CAACC,CAAAA;YACrC,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC;IACF;IAEA,MAAMI,oDAAoD;QACxD,IACEd,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,MAAM;QAC1E,GACA;YACE,0DAA0D;YAC1Df,eAAeT,aAAawB,OAAO,CAACC,MAAM,KAAK;QACjD,IAEF;YACA;QACF;QAEA,yFAAyF;QACzF,IACEC,kBAAkB1B,aAAawB,OAAO,KACtClB,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,CAAC,EAAE,MAAM;QAC7E,GACA;YACE,wFAAwF;YACxFf,eAAe;QACjB,IAEF;YACA;QACF;QAEAV,2BAA2B4B,IAAI;IACjC;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BzB;QAEA,kDAAkD;QAClD,IAAI0B,IAAAA,4CAAAA,EAAyBD,QAAQ,QAAQ;YAC3C,uBAAuB;YACvB7B,aAAawB,OAAO,IAAIK,GAAGE,GAAG,CAACC,WAAW;YAC1C7B,cAAc;gBACZH,aAAawB,OAAO,GAAG;YACzB,GAAG;YAEH,IAAI7B,MAAM;gBACRyB;YACF;YAEA,eAAe;YACf,CAACzB,QAAQC,QAAQiC,IAAI;QACvB;IACF;IAEA,MAAMI,UAAUC,IAAAA,8BAAAA,EAAe3C,kBAAkBC,KAAK;QACpDE,OAAOD,QAAQC,KAAK;QACpBI;QACAqC,aAAa;QACbpC;IACF;IACAkC,QAAQG,SAAS,GAAGC,IAAAA,8BAAAA,EAAeT,kBAAkBK,QAAQG,SAAS;IAEtE,OAAOH;AACT;AAEA;;CAEC,GACD,SAASP,kBAAkBY,GAAW;IACpC,IAAK,IAAIC,IAAI,GAAGA,IAAID,IAAIb,MAAM,EAAEc,IAAK;QACnC,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACzB,OAAO;QACT;IACF;IAEA,OAAO;AACT"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.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  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const baseState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      // tabster navigation breaks if the button is disabled and tabIndex is 0\n      tabIndex: triggerNativeProps.disabled ? undefined : 0,\n      children: baseState.value || props.placeholder,\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearButton: slot.optional(props.clearButton, {\n      defaultProps: {\n        'aria-label': 'Clear selection',\n        children: <DismissIcon />,\n        // Safari doesn't allow to focus an element with this\n        // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n        tabIndex: showClearButton ? 0 : undefined,\n        type: 'button',\n      },\n      elementType: 'button',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    showClearButton,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const onClearButtonClick = useEventCallback(\n    mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n      clearSelection(ev);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.clearButton) {\n    state.clearButton.onClick = onClearButtonClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearButton = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["useDropdown_unstable","props","ref","state","useFieldControlProps_unstable","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","freeform","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","defaultProps","children","targetDocument","useFluent","useOnClickOutside","element","callback","event","refs","disabled","trigger","useButtonTriggerSlot","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","slot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.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  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const baseState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      // tabster navigation breaks if the button is disabled and tabIndex is 0\n      tabIndex: triggerNativeProps.disabled ? undefined : 0,\n      children: baseState.value || props.placeholder,\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearButton: slot.optional(props.clearButton, {\n      defaultProps: {\n        'aria-label': 'Clear selection',\n        children: <DismissIcon />,\n        // Safari doesn't allow to focus an element with this\n        // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n        tabIndex: showClearButton ? 0 : undefined,\n        type: 'button',\n      },\n      elementType: 'button',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    showClearButton,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const onClearButtonClick = useEventCallback(\n    mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n      clearSelection(ev);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.clearButton) {\n    state.clearButton.onClick = onClearButtonClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearButton = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["useDropdown_unstable","props","ref","state","useFieldControlProps_unstable","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","freeform","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","defaultProps","children","targetDocument","useFluent","useOnClickOutside","element","callback","event","refs","disabled","trigger","useButtonTriggerSlot","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","slot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js

@@ -635,4 +635,4 @@ const useDropdownStyles_unstable = (state)=>{
         state.clearButton.className = (0, _react.mergeClasses)(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);
     }
     return state;
-}; //# sourceMappingURL=useDropdownStyles.styles.js.map
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["Listbox","React","forwardRef","props","ref","state","useListbox_unstable","contextValues","useListboxContextValues","useListboxStyles_unstable","useCustomStyleHook_unstable","renderListbox_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;4BACa;+BACG;wCACG;yCAEF;qCAEI;AAKrC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IACzC,MAAMG,gBAAgBC,IAAAA,gDAAAA,EAAwBH;IAE9CI,IAAAA,iDAAAA,EAA0BJ;IAE1BK,IAAAA,gDAAAA,EAA4B,6BAA6BL;IAEzD,OAAOM,IAAAA,qCAAAA,EAAuBN,OAAOE;AACvC;AAEAP,QAAQY,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["Listbox","React","forwardRef","props","ref","state","useListbox_unstable","contextValues","useListboxContextValues","useListboxStyles_unstable","useCustomStyleHook_unstable","renderListbox_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;4BACa;+BACG;wCACG;yCAEF;qCAEI;AAKrC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IACzC,MAAMG,gBAAgBC,IAAAA,gDAAAA,EAAwBH;IAE9CI,IAAAA,iDAAAA,EAA0BJ;IAE1BK,IAAAA,gDAAAA,EAA4B,6BAA6BL;IAEzD,OAAOM,IAAAA,qCAAAA,EAAuBN,OAAOE;AACvC;AAEAP,QAAQY,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ActiveDescendantChangeEvent,\n  ActiveDescendantContextValue,\n  ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /** The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> &\n  SelectionProps & {\n    /**\n     * Disable auto-focusing on the first item when mounting.\n     *\n     * @default false\n     */\n    disableAutoFocus?: boolean;\n  };\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.active()\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.focus(id)\n     */\n    setActiveOption(option?: OptionValue): void;\n\n    // Whether the Listbox renders within a Combobox, Dropdown, or picker, or as a standalone widget\n    standalone: boolean;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n\n    onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["../src/components/Listbox/Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ActiveDescendantChangeEvent,\n  ActiveDescendantContextValue,\n  ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /** The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> &\n  SelectionProps & {\n    /**\n     * Disable auto-focusing on the first item when mounting.\n     *\n     * @default false\n     */\n    disableAutoFocus?: boolean;\n  };\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.active()\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.focus(id)\n     */\n    setActiveOption(option?: OptionValue): void;\n\n    // Whether the Listbox renders within a Combobox, Dropdown, or picker, or as a standalone widget\n    standalone: boolean;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n\n    onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["../src/components/Listbox/index.ts"],"sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  assertSlots<ListboxSlots>(state);\n\n  return (\n    <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n      <ListboxContext.Provider value={contextValues.listbox}>\n        <state.root />\n      </ListboxContext.Provider>\n    </ActiveDescendantContextProvider>\n  );\n};\n"],"names":["renderListbox_unstable","state","contextValues","assertSlots","_jsx","ActiveDescendantContextProvider","value","activeDescendant","ListboxContext","Provider","listbox","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;2BACoB;gCAEjB;AAKxB,MAAMA,yBAAyB,CAACC,OAAqBC;IAC1DC,IAAAA,2BAAAA,EAA0BF;IAE1B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,0CAAAA,EAAAA;QAAgCC,OAAOJ,cAAcK,gBAAgB;kBACpE,WAAA,GAAAH,IAAAA,eAAA,EAACI,8BAAAA,CAAeC,QAAQ,EAAA;YAACH,OAAOJ,cAAcQ,OAAO;sBACnD,WAAA,GAAAN,IAAAA,eAAA,EAACH,MAAMU,IAAI,EAAA,CAAA;;;AAInB"}
+{"version":3,"sources":["../src/components/Listbox/renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  assertSlots<ListboxSlots>(state);\n\n  return (\n    <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n      <ListboxContext.Provider value={contextValues.listbox}>\n        <state.root />\n      </ListboxContext.Provider>\n    </ActiveDescendantContextProvider>\n  );\n};\n"],"names":["renderListbox_unstable","state","contextValues","assertSlots","_jsx","ActiveDescendantContextProvider","value","activeDescendant","ListboxContext","Provider","listbox","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;2BACoB;gCAEjB;AAKxB,MAAMA,yBAAyB,CAACC,OAAqBC;IAC1DC,IAAAA,2BAAAA,EAA0BF;IAE1B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,0CAAAA,EAAAA;QAAgCC,OAAOJ,cAAcK,gBAAgB;kBACpE,WAAA,GAAAH,IAAAA,eAAA,EAACI,8BAAAA,CAAeC,QAAQ,EAAA;YAACH,OAAOJ,cAAcQ,OAAO;sBACnD,WAAA,GAAAN,IAAAA,eAAA,EAACH,MAAMU,IAAI,EAAA,CAAA;;;AAInB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n  ActiveDescendantChangeEvent,\n  useActiveDescendant,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: () => null,\n};\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  'use no memo';\n\n  const { multiselect, disableAutoFocus = false } = props;\n  const optionCollection = useOptionCollection();\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n  const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n  const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n  const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n  const getOptionsMatchingValue = hasListboxContext\n    ? contextGetOptionsMatchingValue\n    : optionCollection.getOptionsMatchingValue;\n\n  const listenerRef = React.useMemo(() => {\n    let element: HTMLDivElement | null = null;\n\n    const listener = (untypedEvent: Event) => {\n      // Typescript doesn't support custom event types on handler\n      const event = untypedEvent as ActiveDescendantChangeEvent;\n      onActiveDescendantChange?.(event);\n    };\n\n    return (el: HTMLDivElement | null) => {\n      if (!el) {\n        element?.removeEventListener('activedescendantchange', listener);\n        return;\n      }\n\n      element = el;\n      element.addEventListener('activedescendantchange', listener);\n    };\n  }, [onActiveDescendantChange]);\n\n  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n  useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n  const activeDescendantContext = useActiveDescendantContext();\n  const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n  const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const activeOptionId = activeDescendantController.active();\n    const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n    switch (action) {\n      case 'First':\n      case 'Last':\n      case 'Next':\n      case 'Previous':\n      case 'PageDown':\n      case 'PageUp':\n      case 'CloseSelect':\n      case 'Select':\n        event.preventDefault();\n        break;\n    }\n\n    switch (action) {\n      case 'Next':\n        if (activeOption) {\n          activeDescendantController.next();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'Previous':\n        if (activeOption) {\n          activeDescendantController.prev();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'PageUp':\n      case 'First':\n        activeDescendantController.first();\n        break;\n      case 'PageDown':\n      case 'Last':\n        activeDescendantController.last();\n        break;\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n    }\n  };\n\n  // get state from parent combobox, if it exists\n  const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n  const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasListboxContext\n    ? {\n        selectedOptions: contextSelectedOptions,\n        selectOption: contextSelectOption,\n        ...UNSAFE_noLongerUsed,\n      }\n    : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed,\n      };\n\n  React.useEffect(() => {\n    // if the listbox has a parent context, that parent context should handle the activedescendant\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    // disable focus-visible attributes until focus is received\n    activeDescendantController.hideFocusVisibleAttributes();\n\n    if (!disableAutoFocus) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n\n      // otherwise start at the first option\n      else {\n        activeDescendantController.first();\n      }\n    }\n\n    return () => {\n      activeDescendantController.blur();\n    };\n\n    // this should only be run once in the lifecycle of the Listbox\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const onFocus = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.showFocusVisibleAttributes();\n\n    if (isNavigatingWithKeyboard) {\n      activeDescendantController.scrollActiveIntoView();\n    }\n  }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n  const onBlur = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.hideFocusVisibleAttributes();\n  }, [activeDescendantController, hasParentActiveDescendantContext]);\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n        role: multiselect ? 'menu' : 'listbox',\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    standalone: !hasListboxContext,\n    multiselect,\n    clearSelection,\n    activeDescendantController,\n    onActiveDescendantChange,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n  return state;\n};\n"],"names":["useListbox_unstable","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","props","ref","multiselect","disableAutoFocus","optionCollection","useOptionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","hasListboxContext","useHasParentContext","ListboxContext","onActiveDescendantChange","useListboxContext_unstable","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","React","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","useOnKeyboardNavigationChange","activeDescendantContext","useActiveDescendantContext","hasParentActiveDescendantContext","useHasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","useSelection","onKeyDown","action","getDropdownActionFromKey","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","tabIndex","elementType","standalone","useEventCallback","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Listbox/useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n  ActiveDescendantChangeEvent,\n  useActiveDescendant,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: () => null,\n};\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  'use no memo';\n\n  const { multiselect, disableAutoFocus = false } = props;\n  const optionCollection = useOptionCollection();\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n  const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n  const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n  const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n  const getOptionsMatchingValue = hasListboxContext\n    ? contextGetOptionsMatchingValue\n    : optionCollection.getOptionsMatchingValue;\n\n  const listenerRef = React.useMemo(() => {\n    let element: HTMLDivElement | null = null;\n\n    const listener = (untypedEvent: Event) => {\n      // Typescript doesn't support custom event types on handler\n      const event = untypedEvent as ActiveDescendantChangeEvent;\n      onActiveDescendantChange?.(event);\n    };\n\n    return (el: HTMLDivElement | null) => {\n      if (!el) {\n        element?.removeEventListener('activedescendantchange', listener);\n        return;\n      }\n\n      element = el;\n      element.addEventListener('activedescendantchange', listener);\n    };\n  }, [onActiveDescendantChange]);\n\n  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n  useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n  const activeDescendantContext = useActiveDescendantContext();\n  const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n  const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const activeOptionId = activeDescendantController.active();\n    const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n    switch (action) {\n      case 'First':\n      case 'Last':\n      case 'Next':\n      case 'Previous':\n      case 'PageDown':\n      case 'PageUp':\n      case 'CloseSelect':\n      case 'Select':\n        event.preventDefault();\n        break;\n    }\n\n    switch (action) {\n      case 'Next':\n        if (activeOption) {\n          activeDescendantController.next();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'Previous':\n        if (activeOption) {\n          activeDescendantController.prev();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'PageUp':\n      case 'First':\n        activeDescendantController.first();\n        break;\n      case 'PageDown':\n      case 'Last':\n        activeDescendantController.last();\n        break;\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n    }\n  };\n\n  // get state from parent combobox, if it exists\n  const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n  const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasListboxContext\n    ? {\n        selectedOptions: contextSelectedOptions,\n        selectOption: contextSelectOption,\n        ...UNSAFE_noLongerUsed,\n      }\n    : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed,\n      };\n\n  React.useEffect(() => {\n    // if the listbox has a parent context, that parent context should handle the activedescendant\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    // disable focus-visible attributes until focus is received\n    activeDescendantController.hideFocusVisibleAttributes();\n\n    if (!disableAutoFocus) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n\n      // otherwise start at the first option\n      else {\n        activeDescendantController.first();\n      }\n    }\n\n    return () => {\n      activeDescendantController.blur();\n    };\n\n    // this should only be run once in the lifecycle of the Listbox\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const onFocus = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.showFocusVisibleAttributes();\n\n    if (isNavigatingWithKeyboard) {\n      activeDescendantController.scrollActiveIntoView();\n    }\n  }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n  const onBlur = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.hideFocusVisibleAttributes();\n  }, [activeDescendantController, hasParentActiveDescendantContext]);\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n        role: multiselect ? 'menu' : 'listbox',\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    standalone: !hasListboxContext,\n    multiselect,\n    clearSelection,\n    activeDescendantController,\n    onActiveDescendantChange,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n  return state;\n};\n"],"names":["useListbox_unstable","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","props","ref","multiselect","disableAutoFocus","optionCollection","useOptionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","hasListboxContext","useHasParentContext","ListboxContext","onActiveDescendantChange","useListboxContext_unstable","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","React","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","useOnKeyboardNavigationChange","activeDescendantContext","useActiveDescendantContext","hasParentActiveDescendantContext","useHasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","useSelection","onKeyDown","action","getDropdownActionFromKey","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","tabIndex","elementType","standalone","useEventCallback","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Listbox/useListboxStyles.styles.js

@@ -69,4 +69,4 @@ const useListboxStyles_unstable = (state)=>{
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(listboxClassNames.root, styles.root, state.root.className);
     return state;
-}; //# sourceMappingURL=useListboxStyles.styles.js.map
+};