npm - @fluentui/react-combobox - Versions diffs - 9.9.5 → 9.10.0 - Mend

@fluentui/react-combobox 9.9.5 → 9.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,25 +1,55 @@
 # Change Log - @fluentui/react-combobox
-This log was last generated on Tue, 02 Apr 2024 09:41:20 GMT and should not be manually modified.
+This log was last generated on Wed, 17 Apr 2024 21:47:18 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.10.0)
+Wed, 17 Apr 2024 21:47:18 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.9.6..@fluentui/react-combobox_v9.10.0)
+### Minor changes
+- feature: export internal hooks into API ([PR #30975](https://github.com/microsoft/fluentui/pull/30975) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.10.4 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-field to v9.1.61 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-portal to v9.4.20 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+### Patches
+- chore: Update react-icons to 2.0.235 ([PR #31011](https://github.com/microsoft/fluentui/pull/31011) by ololubek@microsoft.com)
+- fix: Inline Listbox should render on top of relatively positioned elements. ([PR #31022](https://github.com/microsoft/fluentui/pull/31022) by estebanmu@microsoft.com)
+- bugfix: removes freeform prop that was wrongly introduced by PR #30947  ([PR #30963](https://github.com/microsoft/fluentui/pull/30963) by bernardo.sunderhus@gmail.com)
+- fix: End key should move activeOption ([PR #30864](https://github.com/microsoft/fluentui/pull/30864) by sarah.higley@microsoft.com)
+- chore: fix useListBoxSlot signature to accept more triggerRef types ([PR #31038](https://github.com/microsoft/fluentui/pull/31038) by bernardo.sunderhus@gmail.com)
+## [9.9.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.9.6)
+Thu, 04 Apr 2024 12:08:07 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.9.5..@fluentui/react-combobox_v9.9.6)
+### Patches
+- chore: move freeform and disabled to ComboboxBase types ([PR #30947](https://github.com/microsoft/fluentui/pull/30947) by bernardo.sunderhus@gmail.com)
 ## [9.9.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.9.5)
-Tue, 02 Apr 2024 09:41:20 GMT
+Tue, 02 Apr 2024 09:48:01 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.9.4..@fluentui/react-combobox_v9.9.5)
 ### Patches
-- Bump @fluentui/react-aria to v9.10.3 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-context-selector to v9.1.57 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-field to v9.1.60 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-portal to v9.4.19 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-positioning to v9.14.3 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-tabster to v9.19.6 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-utilities to v9.18.6 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
+- Bump @fluentui/react-aria to v9.10.3 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.57 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-field to v9.1.60 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-portal to v9.4.19 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-positioning to v9.14.3 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
 ## [9.9.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.9.4)

package/dist/index.d.ts CHANGED Viewed

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
-import type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
+import { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PortalProps } from '@fluentui/react-portal';
@@ -14,6 +15,7 @@ import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotComponentType } from '@fluentui/react-utilities';
 /**
  * Combobox component: a selection control that allows users to choose from a set of possible options
@@ -39,7 +41,7 @@ declare type ComboboxBaseOpenEvents = React_2.MouseEvent<HTMLElement> | React_2.
  * ComboboxBase Props
  * Shared types between Combobox and Dropdown components
  */
-declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'> & {
+export declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'> & {
     /**
      * Controls the colors and borders of the combobox trigger.
      * @default 'outline'
@@ -96,7 +98,7 @@ declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'>
 /**
  * State used in rendering Combobox
  */
-declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
+export declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
     /**
      * @deprecated - no longer used internally
      */
@@ -128,6 +130,8 @@ declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' |
     setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;
     setValue(newValue: string | undefined): void;
     onOptionClick: (e: React_2.MouseEvent<HTMLElement>) => void;
+    disabled: boolean;
+    freeform: boolean;
 };
 export declare const comboboxClassNames: SlotClassNames<ComboboxSlots>;
@@ -212,7 +216,7 @@ export declare type DropdownSlots = {
 /**
  * State used in rendering Dropdown
  */
-export declare type DropdownState = ComponentState<DropdownSlots> & ComboboxBaseState & {
+export declare type DropdownState = ComponentState<DropdownSlots> & Omit<ComboboxBaseState, 'freeform'> & {
     placeholderVisible: boolean;
     showClearButton?: boolean;
     activeDescendantController: ActiveDescendantImperativeRef;
@@ -446,6 +450,20 @@ declare type SelectionState = {
     selectOption: (event: SelectionEvents, option: OptionValue) => void;
 };
+/**
+ * @internal
+ * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,
+ * with the semantics and event handlers needed for the Combobox and Dropdown components.
+ * The element type of the ref should always match the element type used in the trigger shorthand.
+ */
+export declare function useButtonTriggerSlot(triggerFromProps: NonNullable<Slot<'button'>>, ref: React_2.Ref<HTMLButtonElement>, options: UseButtonTriggerSlotOptions): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;
+declare type UseButtonTriggerSlotOptions = {
+    state: UseTriggerSlotState;
+    defaultProps: unknown;
+    activeDescendantController: ActiveDescendantImperativeRef;
+};
 /**
  * Create the state required to render Combobox.
  *
@@ -457,7 +475,19 @@ declare type SelectionState = {
  */
 export declare const useCombobox_unstable: (props: ComboboxProps, ref: React_2.Ref<HTMLInputElement>) => ComboboxState;
-export declare function useComboboxContextValues(state: ComboboxBaseState & Pick<ComboboxState, 'activeDescendantController'>): ComboboxBaseContextValues;
+/**
+ * @internal
+ * State shared between Combobox and Dropdown components
+ */
+export declare const useComboboxBaseState: (props: ComboboxBaseProps & {
+    children?: React_2.ReactNode;
+    editable?: boolean;
+    disabled?: boolean;
+    freeform?: boolean;
+    activeDescendantController: ActiveDescendantImperativeRef;
+}) => ComboboxBaseState;
+export declare function useComboboxContextValues(state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>): ComboboxBaseContextValues;
 /**
  * @internal
@@ -488,6 +518,8 @@ declare type UseComboboxFilterConfig<T extends {
  */
 export declare const useComboboxStyles_unstable: (state: ComboboxState) => ComboboxState;
+declare type UsedComboboxState = UseTriggerSlotState & Pick<ComboboxBaseState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionById'>;
 /**
  * Create the state required to render Dropdown.
  *
@@ -504,6 +536,21 @@ export declare const useDropdown_unstable: (props: DropdownProps, ref: React_2.R
  */
 export declare const useDropdownStyles_unstable: (state: DropdownState) => DropdownState;
+/**
+ * @internal
+ * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,
+ * with the semantics and event handlers needed for the Combobox and Dropdown components.
+ * The element type of the ref should always match the element type used in the trigger shorthand.
+ */
+export declare function useInputTriggerSlot(triggerFromProps: NonNullable<Slot<'input'>>, ref: React_2.Ref<HTMLInputElement>, options: UseInputTriggerSlotOptions): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;
+declare type UseInputTriggerSlotOptions = {
+    state: UsedComboboxState;
+    freeform: boolean | undefined;
+    defaultProps?: Partial<ComboboxProps>;
+    activeDescendantController: ActiveDescendantImperativeRef;
+};
 /**
  * Create the state required to render Listbox.
  *
@@ -519,6 +566,20 @@ export declare const useListboxContext_unstable: <T>(selector: ContextSelector<L
 export declare function useListboxContextValues(state: ListboxState): ListboxContextValues;
+/**
+ * @internal
+ * @returns  listbox slot with desired behaviour and props
+ */
+export declare function useListboxSlot(listboxSlotFromProp: Slot<typeof Listbox> | undefined, ref: React_2.Ref<HTMLDivElement>, options: UseListboxSlotOptions): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined;
+declare type UseListboxSlotOptions = {
+    state: UseListboxSlotState;
+    triggerRef: React_2.RefObject<HTMLInputElement> | React_2.RefObject<HTMLButtonElement> | React_2.RefObject<HTMLButtonElement | HTMLInputElement>;
+    defaultProps?: Partial<ListboxProps>;
+};
+declare type UseListboxSlotState = Pick<ComboboxBaseState, 'multiselect'>;
 /**
  * Apply styling to the Listbox slots based on the state
  */
@@ -556,4 +617,6 @@ export declare const useOptionGroupStyles_unstable: (state: OptionGroupState) =>
  */
 export declare const useOptionStyles_unstable: (state: OptionState) => OptionState;
+declare type UseTriggerSlotState = Pick<ComboboxBaseState, 'open' | 'getOptionById' | 'selectOption' | 'setOpen' | 'multiselect' | 'setHasFocus'>;
 export { }

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

	@@ -1 +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 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 ~~/\n * Whether the ComboBox allows~~ freeform ~~user input, rather than restricting to the provided options.\n /\n freeform~~?: boolean;\n\n /\n * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n /\n children?: React.ReactNode;\n };\n\n/\n State used in rendering Combobox\n /\nexport type ComboboxState = ComponentState<ComboboxSlots> &\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;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
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 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;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Combobox/useCombobox.js CHANGED Viewed

@@ -33,9 +33,9 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         editable: true,
         activeDescendantController
     });
-    const { clearable, clearSelection, multiselect, open, selectedOptions, selectOption, setOpen, setValue, value, hasFocus } = baseState;
+    const { clearable, clearSelection, multiselect, open, selectedOptions, value, hasFocus } = baseState;
     const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
-    const { disabled, freeform, inlinePopup } = props;
+    const { freeform, inlinePopup } = props;
     const comboId = useId('combobox-');
     const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
         props,
@@ -45,20 +45,6 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
             'size'
         ]
     });
-    // reset any typed value when an option is selected
-    baseState.selectOption = (ev, option)=>{
-        setValue(undefined);
-        selectOption(ev, option);
-    };
-    baseState.setOpen = (ev, newState)=>{
-        if (disabled) {
-            return;
-        }
-        if (!newState && !freeform) {
-            setValue(undefined);
-        }
-        setOpen(ev, newState);
-    };
     const triggerRef = React.useRef(null);
     const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {
         state: baseState,

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

	@@ -1 +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} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { 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 // 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 {\n clearable,\n clearSelection,\n multiselect,\n open,\n selectedOptions,\n selectOption,\n setOpen,\n setValue,\n value,\n hasFocus,\n } = baseState;\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n const { disabled, 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 // reset any typed value when an option is selected\n baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n setValue(undefined);\n selectOption(ev, option);\n };\n\n baseState.setOpen = (ev, newState: boolean) => {\n if (disabled) {\n return;\n }\n\n if (!newState && !freeform) {\n setValue(undefined);\n }\n\n setOpen(ev, newState);\n };\n\n 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 },\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-expanded': open,\n children: <ChevronDownIcon />,\n role: 'button',\n },\n elementType: 'span',\n }),\n showClearIcon,\n activeDescendantController,\n ...baseState,\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":["React","useActiveDescendant","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","optionClassNames","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disabled","freeform","inlinePopup","comboId","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
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} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { 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 // 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, multiselect, open, selectedOptions, value, hasFocus } = baseState;\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n const { 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 },\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-expanded': open,\n children: <ChevronDownIcon />,\n role: 'button',\n },\n elementType: 'span',\n }),\n showClearIcon,\n activeDescendantController,\n ...baseState,\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":["React","useActiveDescendant","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","optionClassNames","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","value","hasFocus","comboboxPopupRef","comboboxTargetRef","freeform","inlinePopup","comboId","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","undefined","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","setOpen","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}

package/lib/components/Combobox/useComboboxStyles.styles.js CHANGED Viewed

@@ -73,6 +73,9 @@ const useStyles = /*#__PURE__*/__styles({
   listboxCollapsed: {
     mc9l5x: "fjseox"
   },
+  inlineListbox: {
+    Bj3rh1h: "f19g0ac"
+  },
   small: {
     Bqenvij: "frvgh55",
     z189sj: ["fdw0yi8", "fk8j09s"]
@@ -173,7 +176,7 @@ const useStyles = /*#__PURE__*/__styles({
     n51gp8: ["f14g86mu", "f1rvyvqg"]
   }
 }, {
-  d: [".f122n59{align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".frvgh55{height:24px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  d: [".f122n59{align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f19g0ac{z-index:1;}", ".frvgh55{height:24px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
   w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
@@ -312,7 +315,7 @@ export const useComboboxStyles_unstable = state => {
   state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
   state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
   if (state.listbox) {
-    state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
+    state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
   }
   if (state.expandIcon) {
     state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);

package/lib/components/Combobox/useComboboxStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","Bqenvij","z189sj","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useInputStyles","qb2dma","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","hidden","visuallyHidden","Bh84pgu","B6of3ja","t21cq0","jrapky","Frg6f3","B68tc82","Bmxbyg5","a9b677","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n clearIcon: 'fui-Combobox__clearIcon',\n listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px'\n};\n/*\n Styles for Combobox\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalXXS,\n display: 'inline-grid',\n gridTemplateColumns: '1fr auto',\n justifyContent: 'space-between',\n minWidth: '250px',\n position: 'relative',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n }\n },\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // size variants\n small: {\n height: fieldHeights.small,\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n height: fieldHeights.medium,\n paddingRight: tokens.spacingHorizontalMNudge\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n height: fieldHeights.large,\n paddingRight: tokens.spacingHorizontalM\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0)\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n }\n});\nconst useInputStyles = makeStyles({\n input: {\n alignSelf: 'stretch',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n '&:focus': {\n outlineStyle: 'none'\n },\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n }\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n large: {\n ...typographyStyles.body2,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block'\n }\n },\n hidden: {\n display: 'none'\n },\n visuallyHidden: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n ...shorthands.margin('-1px'),\n ...shorthands.overflow('hidden'),\n ...shorthands.padding('0px'),\n width: '1px',\n position: 'absolute'\n },\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n }\n});\n/\n Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n const { appearance, open, size, showClearIcon } = state;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const disabled = state.input.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const inputStyles = useInputStyles();\n state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);\n }\n if (state.clearIcon) {\n state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);\n }\n return state;\n};\n"],"mappings":"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"}
1	+ {"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bqenvij","z189sj","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useInputStyles","qb2dma","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","hidden","visuallyHidden","Bh84pgu","B6of3ja","t21cq0","jrapky","Frg6f3","B68tc82","Bmxbyg5","a9b677","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n clearIcon: 'fui-Combobox__clearIcon',\n listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px'\n};\n/*\n Styles for Combobox\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalXXS,\n display: 'inline-grid',\n gridTemplateColumns: '1fr auto',\n justifyContent: 'space-between',\n minWidth: '250px',\n position: 'relative',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n }\n },\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n inlineListbox: {\n zIndex: 1\n },\n // size variants\n small: {\n height: fieldHeights.small,\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n height: fieldHeights.medium,\n paddingRight: tokens.spacingHorizontalMNudge\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n height: fieldHeights.large,\n paddingRight: tokens.spacingHorizontalM\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0)\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n }\n});\nconst useInputStyles = makeStyles({\n input: {\n alignSelf: 'stretch',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n '&:focus': {\n outlineStyle: 'none'\n },\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n }\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n large: {\n ...typographyStyles.body2,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block'\n }\n },\n hidden: {\n display: 'none'\n },\n visuallyHidden: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n ...shorthands.margin('-1px'),\n ...shorthands.overflow('hidden'),\n ...shorthands.padding('0px'),\n width: '1px',\n position: 'absolute'\n },\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n }\n});\n/\n Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n const { appearance, open, size, showClearIcon } = state;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const disabled = state.input.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const inputStyles = useInputStyles();\n state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);\n }\n if (state.clearIcon) {\n state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,SAAS,QAAQ,4BAA4B;AACtD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,UAAU,EAAE,0BAA0B;EACtCC,SAAS,EAAE,yBAAyB;EACpCC,OAAO,EAAE;AACb,CAAC;AACD;AACA,MAAMC,YAAY,GAAG;EACjBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGd,QAAA;EAAAK,IAAA;IAAAU,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA9C,OAAA;IAAA+C,MAAA;IAAAxC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAsC,OAAA;IAAArC,OAAA;EAAA;EAAAsC,gBAAA;IAAApC,MAAA;EAAA;EAAAqC,aAAA;IAAAC,OAAA;EAAA;EAAAjD,KAAA;IAAAkD,OAAA;IAAAC,MAAA;EAAA;EAAAlD,MAAA;IAAAiD,OAAA;IAAAC,MAAA;EAAA;EAAAjD,KAAA;IAAAQ,MAAA;IAAAwC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,kBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAtB,MAAA;IAAAG,OAAA;IAAAI,MAAA;IAAAI,OAAA;IAAA3D,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA;IAAA6C,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAZ,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAW,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAF,MAAA;EAAA;EAAAG,QAAA;IAAAC,OAAA;IAAA9B,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAmB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAgIrB,CAAC;AACF,MAAMC,cAAc,gBAAGxG,QAAA;EAAAM,KAAA;IAAAmG,MAAA;IAAAzC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAsC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAnG,KAAA;IAAAgG,OAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAApD,MAAA;IAAAqD,OAAA;IAAAC,MAAA;EAAA;EAAAxG,MAAA;IAAA+F,OAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAApD,MAAA;IAAAqD,OAAA;IAAAC,MAAA;EAAA;EAAAvG,KAAA;IAAA8F,OAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAApD,MAAA;IAAAqD,OAAA;IAAAC,MAAA;EAAA;EAAAvB,QAAA;IAAAa,MAAA;IAAA1C,MAAA;IAAA8B,OAAA;IAAAe,MAAA;EAAA;AAAA;EAAAV,CAAA;EAAAkB,CAAA;AAAA,CAoCtB,CAAC;AACF,MAAMC,aAAa,gBAAGtH,QAAA;EAAAuH,IAAA;IAAAnG,OAAA;IAAAsF,MAAA;IAAAZ,OAAA;IAAAxE,MAAA;IAAAyF,OAAA;IAAAS,OAAA;EAAA;EAAAC,MAAA;IAAAnG,MAAA;EAAA;EAAAoG,cAAA;IAAAC,OAAA;IAAA9D,OAAA;IAAA+D,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAf,MAAA;IAAApD,MAAA;IAAAqD,OAAA;IAAAC,MAAA;IAAAc,MAAA;IAAAxG,MAAA;EAAA;EAAAf,KAAA;IAAAoG,OAAA;IAAAgB,MAAA;EAAA;EAAAnH,MAAA;IAAAmG,OAAA;IAAAgB,MAAA;EAAA;EAAAlH,KAAA;IAAAkG,OAAA;IAAAgB,MAAA;EAAA;EAAAlC,QAAA;IAAAa,MAAA;IAAAZ,OAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CA0CrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMgC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAc,CAAC,GAAGJ,KAAK;EACvD,MAAM7C,OAAO,GAAI,GAAE6C,KAAK,CAAC9H,KAAK,CAAC,cAAc,CAAE,EAAC,KAAK,MAAM;EAC3D,MAAMuF,QAAQ,GAAGuC,KAAK,CAAC9H,KAAK,CAACuF,QAAQ;EACrC,MAAM4C,MAAM,GAAG3H,SAAS,CAAC,CAAC;EAC1B,MAAM4H,UAAU,GAAGpB,aAAa,CAAC,CAAC;EAClC,MAAMqB,WAAW,GAAGnC,cAAc,CAAC,CAAC;EACpC4B,KAAK,CAAC/H,IAAI,CAACuI,SAAS,GAAG3I,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAEoI,MAAM,CAACpI,IAAI,EAAEoI,MAAM,CAACJ,UAAU,CAAC,EAAEI,MAAM,CAACF,IAAI,CAAC,EAAE,CAAC1C,QAAQ,IAAIwC,UAAU,KAAK,SAAS,IAAII,MAAM,CAAC5D,kBAAkB,EAAEU,OAAO,IAAI8C,UAAU,KAAK,WAAW,IAAII,MAAM,CAAClD,OAAO,EAAEA,OAAO,IAAI8C,UAAU,KAAK,WAAW,IAAII,MAAM,CAAC7C,gBAAgB,EAAEC,QAAQ,IAAI4C,MAAM,CAAC5C,QAAQ,EAAEuC,KAAK,CAAC/H,IAAI,CAACuI,SAAS,CAAC;EAC7VR,KAAK,CAAC9H,KAAK,CAACsI,SAAS,GAAG3I,YAAY,CAACG,kBAAkB,CAACE,KAAK,EAAEqI,WAAW,CAACrI,KAAK,EAAEqI,WAAW,CAACJ,IAAI,CAAC,EAAE1C,QAAQ,IAAI8C,WAAW,CAAC9C,QAAQ,EAAEuC,KAAK,CAAC9H,KAAK,CAACsI,SAAS,CAAC;EAC7J,IAAIR,KAAK,CAAC3H,OAAO,EAAE;IACf2H,KAAK,CAAC3H,OAAO,CAACmI,SAAS,GAAG3I,YAAY,CAACG,kBAAkB,CAACK,OAAO,EAAEgI,MAAM,CAAChI,OAAO,EAAE2H,KAAK,CAACS,WAAW,IAAIJ,MAAM,CAAC9E,aAAa,EAAE,CAAC2E,IAAI,IAAIG,MAAM,CAAC/E,gBAAgB,EAAE0E,KAAK,CAAC3H,OAAO,CAACmI,SAAS,CAAC;EAC5L;EACA,IAAIR,KAAK,CAAC7H,UAAU,EAAE;IAClB6H,KAAK,CAAC7H,UAAU,CAACqI,SAAS,GAAG3I,YAAY,CAACG,kBAAkB,CAACG,UAAU,EAAEmI,UAAU,CAACnB,IAAI,EAAEmB,UAAU,CAACH,IAAI,CAAC,EAAE1C,QAAQ,IAAI6C,UAAU,CAAC7C,QAAQ,EAAE2C,aAAa,IAAIE,UAAU,CAAChB,cAAc,EAAEU,KAAK,CAAC7H,UAAU,CAACqI,SAAS,CAAC;EACxN;EACA,IAAIR,KAAK,CAAC5H,SAAS,EAAE;IACjB4H,KAAK,CAAC5H,SAAS,CAACoI,SAAS,GAAG3I,YAAY,CAACG,kBAAkB,CAACI,SAAS,EAAEkI,UAAU,CAACnB,IAAI,EAAEmB,UAAU,CAACH,IAAI,CAAC,EAAE1C,QAAQ,IAAI6C,UAAU,CAAC7C,QAAQ,EAAE,CAAC2C,aAAa,IAAIE,UAAU,CAACjB,MAAM,EAAEW,KAAK,CAAC5H,SAAS,CAACoI,SAAS,CAAC;EAC9M;EACA,OAAOR,KAAK;AAChB,CAAC"}

package/lib/components/Combobox/useInputTriggerSlot.js CHANGED Viewed

@@ -10,14 +10,14 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
  * The element type of the ref should always match the element type used in the trigger shorthand.
  */ export function useInputTriggerSlot(triggerFromProps, ref, options) {
     const { state: { open, value, selectOption, setValue, multiselect, selectedOptions, clearSelection, getOptionById, setOpen }, freeform, defaultProps, activeDescendantController } = options;
-    const onBlur = (ev)=>{
+    const onBlur = (event)=>{
         // handle selection and updating value if freeform is false
         if (!open && !freeform) {
             const activeOptionId = activeDescendantController.active();
             const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
             // select matching option, if the value fully matches
             if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
-                selectOption(ev, activeOption);
+                selectOption(event, activeOption);
             }
             // reset typed value when the input loses focus while collapsed, unless freeform is true
             setValue(undefined);
@@ -41,15 +41,15 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
         return getOptionById(match);
     };
     // update value and active option based on input
-    const onChange = (ev)=>{
-        const inputValue = ev.target.value;
+    const onChange = (event)=>{
+        const inputValue = event.target.value;
         // update uncontrolled value
         setValue(inputValue);
         // handle updating active option based on input
         const matchingOption = getOptionFromInput(inputValue);
         // clear selection for single-select if the input value no longer matches the selection
         if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {
-            clearSelection(ev);
+            clearSelection(event);
         }
     };
     const trigger = useTriggerSlot(triggerFromProps, ref, {
@@ -70,33 +70,33 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
     /**
    * Freeform combobox should not select
    */ const defaultOnKeyDown = trigger.onKeyDown;
-    const onKeyDown = useEventCallback((ev)=>{
-        if (!open && getDropdownActionFromKey(ev) === 'Type') {
-            setOpen(ev, true);
+    const onKeyDown = useEventCallback((event)=>{
+        if (!open && getDropdownActionFromKey(event) === 'Type') {
+            setOpen(event, true);
         }
         // clear activedescendant when moving the text insertion cursor
-        if (ev.key === ArrowLeft || ev.key === ArrowRight) {
+        if (event.key === ArrowLeft || event.key === ArrowRight) {
             setHideActiveDescendant(true);
         } else {
             setHideActiveDescendant(false);
         }
         // update typing state to true if the user is typing
-        const action = getDropdownActionFromKey(ev, {
+        const action = getDropdownActionFromKey(event, {
             open,
             multiselect
         });
         if (action === 'Type') {
             isTyping.current = true;
-        } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
+        } else if (action === 'Open' && event.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
             isTyping.current = false;
         }
         // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
-        if ((isTyping.current || !open) && ev.key === ' ') {
+        if ((isTyping.current || !open) && event.key === ' ') {
             var _triggerFromProps_onKeyDown;
-            triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, ev);
+            triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, event);
             return;
         }
-        defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(ev);
+        defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(event);
     });
     trigger.onKeyDown = onKeyDown;
     if (hideActiveDescendant) {

package/lib/components/Combobox/useInputTriggerSlot.js.map CHANGED Viewed

	@@ -1 +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 { ~~useTriggerSlot,~~ UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { ~~ComboboxProps,~~ ~~ComboboxState~~ } from '~~./Combobox~~.types';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n Pick<~~ComboboxState~~, '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 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 = (ev: 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(ev, activeOption);\n }\n\n // reset typed value when the input loses focus while collapsed, unless freeform is true\n setValue(undefined);\n }\n };\n\n 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 = (ev: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = ev.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(ev);\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((ev: React.KeyboardEvent<HTMLInputElement>) => {\n if (!open && getDropdownActionFromKey(ev) === 'Type') {\n setOpen(ev, true);\n }\n\n // clear activedescendant when moving the text insertion cursor\n if (ev.key === ArrowLeft \|\| ev.key === ArrowRight) {\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(ev, { 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' && ev.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) && ev.key === ' ') {\n triggerFromProps?.onKeyDown?.(ev);\n return;\n }\n\n defaultOnKeyDown?.(ev);\n });\n\n trigger.onKeyDown = onKeyDown;\n\n if (hideActiveDescendant) {\n trigger['aria-activedescendant'] = undefined;\n }\n\n return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","selectOption","setValue","multiselect","selectedOptions","clearSelection","getOptionById","setOpen","freeform","defaultProps","activeDescendantController","onBlur","ev","activeOptionId","active","activeOption","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","blur","matcher","optionText","indexOf","match","find","id","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,4BAA4B;AAE7E,SAASC,SAAS,EAAEC,UAAU,QAAQ,0BAA0B;~~AAChE~~,~~SAASC~~,cAAc,~~QAA6B~~,6BAA6B;AAGjF,SAASC,wBAAwB,QAAQ,iCAAiC;AAY1E;;;;;CAKC,GACD,OAAO,SAASC,oBACdC,gBAA4C,EAC5CC,GAAgC,EAChCC,OAAmC;IAEnC,MAAM,EACJC,OAAO,EACLC,IAAI,EACJC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,WAAW,EACXC,eAAe,EACfC,cAAc,EACdC,aAAa,EACbC,OAAO,EACR,EACDC,QAAQ,EACRC,YAAY,EACZC,0BAA0B,EAC3B,GAAGb;IAEJ,MAAMc,SAAS,CAACC;QACd,2DAA2D;QAC3D,IAAI,CAACb,QAAQ,CAACS,UAAU;YACtB,MAAMK,iBAAiBH,2BAA2BI,MAAM;YACxD,MAAMC,eAAeF,iBAAiBP,cAAcO,kBAAkB;YACtE,qDAAqD;YACrD,IAAIb,SAASe,gBAAgBf,MAAMgB,IAAI,GAAGC,WAAW,QAAOF,yBAAAA,mCAAAA,aAAcG,IAAI,CAACD,WAAW,KAAI;gBAC5FhB,aAAaW,~~IAAIG~~;~~YACnB~~;YAEA,wFAAwF;YACxFb,SAASiB;QACX;IACF;IAEA,MAAMC,qBAAqB,CAACC;QAC1B,MAAMC,eAAeD,uBAAAA,iCAAAA,WAAYL,IAAI,GAAGC,WAAW;QAEnD,IAAI,CAACK,gBAAgBA,aAAaC,MAAM,KAAK,GAAG;YAC9Cb,2BAA2Bc,IAAI;YAC/B;QACF;QAEA,MAAMC,UAAU,CAACC,aAAuBA,WAAWT,WAAW,GAAGU,OAAO,CAACL,kBAAkB;QAC3F,MAAMM,QAAQlB,2BAA2BmB,IAAI,CAACC,CAAAA;YAC5C,MAAMC,SAASzB,cAAcwB;YAC7B,OAAO,CAAC,CAACC,UAAUN,QAAQM,OAAOb,IAAI;QACxC;QAEA,IAAI,CAACU,OAAO;YACVlB,2BAA2Bc,IAAI;YAC/B,OAAOL;QACT;QAEA,OAAOb,cAAcsB;IACvB;IAEA,gDAAgD;IAChD,MAAMI,WAAW,CAACpB;QAChB,MAAMS,aAAaT,~~GAAGqB~~,MAAM,CAACjC,KAAK;~~QAClC~~,4BAA4B;QAC5BE,SAASmB;QAET,+CAA+C;QAC/C,MAAMa,iBAAiBd,mBAAmBC;QAE1C,uFAAuF;QACvF,IAAI,CAAClB,eAAeC,gBAAgBmB,MAAM,KAAK,KAAMF,CAAAA,WAAWE,MAAM,GAAG,KAAK,CAACW,cAAa,GAAI;YAC9F7B,eAAeO;QACjB;IACF;IAEA,MAAMuB,UAAU3C,eAAeG,kBAAkBC,KAAK;QACpDE,OAAOD,QAAQC,KAAK;QACpBW;QACA2B,aAAa;QACb1B;IACF;IAEAyB,QAAQH,QAAQ,GAAG5C,eAAe+C,QAAQH,QAAQ,EAAEA;IACpDG,QAAQxB,MAAM,GAAGvB,eAAe+C,QAAQxB,MAAM,EAAEA;IAEhD,uGAAuG;IACvG,0GAA0G;IAC1G,kFAAkF;IAClF,MAAM,CAAC0B,sBAAsBC,wBAAwB,GAAGnD,MAAMoD,QAAQ,CAAC;IACvE,wGAAwG;IACxG,+FAA+F;IAC/F,MAAMC,WAAWrD,MAAMsD,MAAM,CAAC;IAE9B;;GAEC,GACD,MAAMC,mBAAmBP,QAAQQ,SAAS;IAC1C,MAAMA,YAAYtD,iBAAiB,CAACuB;QAClC,IAAI,CAACb,QAAQN,yBAAyBmB,~~QAAQ~~,QAAQ;~~YACpDL~~,QAAQK,~~IAAI~~;~~QACd~~;QAEA,+DAA+D;QAC/D,IAAIA,~~GAAGgC~~,GAAG,KAAKtD,aAAasB,~~GAAGgC~~,GAAG,KAAKrD,YAAY;~~YACjD~~+C,wBAAwB;QAC1B,OAAO;YACLA,wBAAwB;QAC1B;QAEA,oDAAoD;QACpD,MAAMO,SAASpD,yBAAyBmB,~~IAAI~~;YAAEb;YAAMI;QAAY;~~QAChE~~,IAAI0C,WAAW,QAAQ;YACrBL,SAASM,OAAO,GAAG;QACrB,OAGK,IACH,AAACD,WAAW,UAAUjC,~~GAAGgC~~,GAAG,KAAK,~~OACjCC~~,WAAW,UACXA,WAAW,cACXA,WAAW,WACXA,WAAW,UACXA,WAAW,YACXA,WAAW,YACX;YACAL,SAASM,OAAO,GAAG;QACrB;QAEA,wGAAwG;QACxG,IAAI,AAACN,CAAAA,SAASM,OAAO,IAAI,CAAC/C,IAAG,KAAMa,~~GAAGgC~~,GAAG,KAAK,KAAK;~~gBACjDjD~~;YAAAA,6BAAAA,wCAAAA,8BAAAA,iBAAkBgD,SAAS,cAA3BhD,kDAAAA,iCAAAA,kBAA8BiB;YAC9B;QACF;QAEA8B,6BAAAA,uCAAAA,iBAAmB9B;IACrB;IAEAuB,QAAQQ,SAAS,GAAGA;IAEpB,IAAIN,sBAAsB;QACxBF,OAAO,CAAC,wBAAwB,GAAGhB;IACrC;IAEA,OAAOgB;AACT"}
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 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":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","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","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}