@fluentui/react-combobox 9.9.6 → 9.10.1
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.
- package/CHANGELOG.md +40 -2
- package/dist/index.d.ts +69 -7
- package/lib/components/Combobox/Combobox.types.js.map +1 -1
- package/lib/components/Combobox/useComboboxStyles.styles.js +5 -2
- package/lib/components/Combobox/useComboboxStyles.styles.js.map +1 -1
- package/lib/components/Combobox/useInputTriggerSlot.js +14 -14
- package/lib/components/Combobox/useInputTriggerSlot.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
- package/lib/components/Dropdown/useDropdown.js +2 -1
- package/lib/components/Dropdown/useDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.styles.js +5 -2
- package/lib/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
- package/lib/contexts/useComboboxContextValues.js.map +1 -1
- package/lib/index.js +5 -0
- package/lib/index.js.map +1 -1
- package/lib/utils/ComboboxBase.types.js.map +1 -1
- package/lib/utils/useComboboxBaseState.js.map +1 -1
- package/lib/utils/useListboxSlot.js.map +1 -1
- package/lib/utils/useTriggerSlot.js +7 -0
- package/lib/utils/useTriggerSlot.js.map +1 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js +5 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Combobox/useInputTriggerSlot.js +14 -14
- package/lib-commonjs/components/Combobox/useInputTriggerSlot.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js +2 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js +5 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
- package/lib-commonjs/index.js +16 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/useTriggerSlot.js +7 -0
- package/lib-commonjs/utils/useTriggerSlot.js.map +1 -1
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,50 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-combobox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 23 Apr 2024 08:12:12 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.10.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.10.1)
|
|
8
|
+
|
|
9
|
+
Tue, 23 Apr 2024 08:12:12 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.10.0..@fluentui/react-combobox_v9.10.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-aria to v9.10.5 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
15
|
+
- Bump @fluentui/react-context-selector to v9.1.58 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
16
|
+
- Bump @fluentui/react-field to v9.1.62 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.36 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
18
|
+
- Bump @fluentui/react-portal to v9.4.21 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
19
|
+
- Bump @fluentui/react-positioning to v9.14.4 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
20
|
+
- Bump @fluentui/react-shared-contexts to v9.17.0 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v9.20.1 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v9.18.7 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
23
|
+
|
|
24
|
+
## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.10.0)
|
|
25
|
+
|
|
26
|
+
Wed, 17 Apr 2024 21:53:49 GMT
|
|
27
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.9.6..@fluentui/react-combobox_v9.10.0)
|
|
28
|
+
|
|
29
|
+
### Minor changes
|
|
30
|
+
|
|
31
|
+
- feature: export internal hooks into API ([PR #30975](https://github.com/microsoft/fluentui/pull/30975) by bernardo.sunderhus@gmail.com)
|
|
32
|
+
- Bump @fluentui/react-aria to v9.10.4 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
33
|
+
- Bump @fluentui/react-field to v9.1.61 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
34
|
+
- Bump @fluentui/react-portal to v9.4.20 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
35
|
+
- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
36
|
+
|
|
37
|
+
### Patches
|
|
38
|
+
|
|
39
|
+
- chore: Update react-icons to 2.0.235 ([PR #31011](https://github.com/microsoft/fluentui/pull/31011) by ololubek@microsoft.com)
|
|
40
|
+
- fix: Inline Listbox should render on top of relatively positioned elements. ([PR #31022](https://github.com/microsoft/fluentui/pull/31022) by estebanmu@microsoft.com)
|
|
41
|
+
- 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)
|
|
42
|
+
- fix: End key should move activeOption ([PR #30864](https://github.com/microsoft/fluentui/pull/30864) by sarah.higley@microsoft.com)
|
|
43
|
+
- chore: fix useListBoxSlot signature to accept more triggerRef types ([PR #31038](https://github.com/microsoft/fluentui/pull/31038) by bernardo.sunderhus@gmail.com)
|
|
44
|
+
|
|
7
45
|
## [9.9.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.9.6)
|
|
8
46
|
|
|
9
|
-
Thu, 04 Apr 2024 12:
|
|
47
|
+
Thu, 04 Apr 2024 12:08:07 GMT
|
|
10
48
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.9.5..@fluentui/react-combobox_v9.9.6)
|
|
11
49
|
|
|
12
50
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
|
|
3
3
|
import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
|
|
4
|
-
import
|
|
4
|
+
import { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
|
|
5
5
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
6
6
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
7
7
|
import { ContextSelector } from '@fluentui/react-context-selector';
|
|
8
|
+
import type { ExtractSlotProps } from '@fluentui/react-utilities';
|
|
8
9
|
import { FC } from 'react';
|
|
9
10
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
10
11
|
import { PortalProps } from '@fluentui/react-portal';
|
|
@@ -14,6 +15,7 @@ import { ProviderProps } from 'react';
|
|
|
14
15
|
import * as React_2 from 'react';
|
|
15
16
|
import type { Slot } from '@fluentui/react-utilities';
|
|
16
17
|
import { SlotClassNames } from '@fluentui/react-utilities';
|
|
18
|
+
import type { SlotComponentType } from '@fluentui/react-utilities';
|
|
17
19
|
|
|
18
20
|
/**
|
|
19
21
|
* 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.
|
|
|
39
41
|
* ComboboxBase Props
|
|
40
42
|
* Shared types between Combobox and Dropdown components
|
|
41
43
|
*/
|
|
42
|
-
declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'> & {
|
|
44
|
+
export declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'> & {
|
|
43
45
|
/**
|
|
44
46
|
* Controls the colors and borders of the combobox trigger.
|
|
45
47
|
* @default 'outline'
|
|
@@ -91,14 +93,12 @@ declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'>
|
|
|
91
93
|
* Use this with `onOptionSelect` to directly control the displayed value string
|
|
92
94
|
*/
|
|
93
95
|
value?: string;
|
|
94
|
-
freeform?: boolean;
|
|
95
|
-
disabled?: boolean;
|
|
96
96
|
};
|
|
97
97
|
|
|
98
98
|
/**
|
|
99
99
|
* State used in rendering Combobox
|
|
100
100
|
*/
|
|
101
|
-
declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'
|
|
101
|
+
export declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
|
|
102
102
|
/**
|
|
103
103
|
* @deprecated - no longer used internally
|
|
104
104
|
*/
|
|
@@ -130,6 +130,8 @@ declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' |
|
|
|
130
130
|
setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;
|
|
131
131
|
setValue(newValue: string | undefined): void;
|
|
132
132
|
onOptionClick: (e: React_2.MouseEvent<HTMLElement>) => void;
|
|
133
|
+
disabled: boolean;
|
|
134
|
+
freeform: boolean;
|
|
133
135
|
};
|
|
134
136
|
|
|
135
137
|
export declare const comboboxClassNames: SlotClassNames<ComboboxSlots>;
|
|
@@ -158,6 +160,7 @@ export declare type ComboboxOpenEvents = ComboboxBaseOpenEvents;
|
|
|
158
160
|
* Combobox Props
|
|
159
161
|
*/
|
|
160
162
|
export declare type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & ComboboxBaseProps & {
|
|
163
|
+
freeform?: boolean;
|
|
161
164
|
children?: React_2.ReactNode;
|
|
162
165
|
};
|
|
163
166
|
|
|
@@ -213,7 +216,7 @@ export declare type DropdownSlots = {
|
|
|
213
216
|
/**
|
|
214
217
|
* State used in rendering Dropdown
|
|
215
218
|
*/
|
|
216
|
-
export declare type DropdownState = ComponentState<DropdownSlots> & ComboboxBaseState & {
|
|
219
|
+
export declare type DropdownState = ComponentState<DropdownSlots> & Omit<ComboboxBaseState, 'freeform'> & {
|
|
217
220
|
placeholderVisible: boolean;
|
|
218
221
|
showClearButton?: boolean;
|
|
219
222
|
activeDescendantController: ActiveDescendantImperativeRef;
|
|
@@ -447,6 +450,20 @@ declare type SelectionState = {
|
|
|
447
450
|
selectOption: (event: SelectionEvents, option: OptionValue) => void;
|
|
448
451
|
};
|
|
449
452
|
|
|
453
|
+
/**
|
|
454
|
+
* @internal
|
|
455
|
+
* useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,
|
|
456
|
+
* with the semantics and event handlers needed for the Combobox and Dropdown components.
|
|
457
|
+
* The element type of the ref should always match the element type used in the trigger shorthand.
|
|
458
|
+
*/
|
|
459
|
+
export declare function useButtonTriggerSlot(triggerFromProps: NonNullable<Slot<'button'>>, ref: React_2.Ref<HTMLButtonElement>, options: UseButtonTriggerSlotOptions): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;
|
|
460
|
+
|
|
461
|
+
declare type UseButtonTriggerSlotOptions = {
|
|
462
|
+
state: UseTriggerSlotState;
|
|
463
|
+
defaultProps: unknown;
|
|
464
|
+
activeDescendantController: ActiveDescendantImperativeRef;
|
|
465
|
+
};
|
|
466
|
+
|
|
450
467
|
/**
|
|
451
468
|
* Create the state required to render Combobox.
|
|
452
469
|
*
|
|
@@ -458,7 +475,19 @@ declare type SelectionState = {
|
|
|
458
475
|
*/
|
|
459
476
|
export declare const useCombobox_unstable: (props: ComboboxProps, ref: React_2.Ref<HTMLInputElement>) => ComboboxState;
|
|
460
477
|
|
|
461
|
-
|
|
478
|
+
/**
|
|
479
|
+
* @internal
|
|
480
|
+
* State shared between Combobox and Dropdown components
|
|
481
|
+
*/
|
|
482
|
+
export declare const useComboboxBaseState: (props: ComboboxBaseProps & {
|
|
483
|
+
children?: React_2.ReactNode;
|
|
484
|
+
editable?: boolean;
|
|
485
|
+
disabled?: boolean;
|
|
486
|
+
freeform?: boolean;
|
|
487
|
+
activeDescendantController: ActiveDescendantImperativeRef;
|
|
488
|
+
}) => ComboboxBaseState;
|
|
489
|
+
|
|
490
|
+
export declare function useComboboxContextValues(state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>): ComboboxBaseContextValues;
|
|
462
491
|
|
|
463
492
|
/**
|
|
464
493
|
* @internal
|
|
@@ -489,6 +518,8 @@ declare type UseComboboxFilterConfig<T extends {
|
|
|
489
518
|
*/
|
|
490
519
|
export declare const useComboboxStyles_unstable: (state: ComboboxState) => ComboboxState;
|
|
491
520
|
|
|
521
|
+
declare type UsedComboboxState = UseTriggerSlotState & Pick<ComboboxBaseState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionById'>;
|
|
522
|
+
|
|
492
523
|
/**
|
|
493
524
|
* Create the state required to render Dropdown.
|
|
494
525
|
*
|
|
@@ -505,6 +536,21 @@ export declare const useDropdown_unstable: (props: DropdownProps, ref: React_2.R
|
|
|
505
536
|
*/
|
|
506
537
|
export declare const useDropdownStyles_unstable: (state: DropdownState) => DropdownState;
|
|
507
538
|
|
|
539
|
+
/**
|
|
540
|
+
* @internal
|
|
541
|
+
* useInputTriggerSlot returns a tuple of trigger/listbox shorthand,
|
|
542
|
+
* with the semantics and event handlers needed for the Combobox and Dropdown components.
|
|
543
|
+
* The element type of the ref should always match the element type used in the trigger shorthand.
|
|
544
|
+
*/
|
|
545
|
+
export declare function useInputTriggerSlot(triggerFromProps: NonNullable<Slot<'input'>>, ref: React_2.Ref<HTMLInputElement>, options: UseInputTriggerSlotOptions): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;
|
|
546
|
+
|
|
547
|
+
declare type UseInputTriggerSlotOptions = {
|
|
548
|
+
state: UsedComboboxState;
|
|
549
|
+
freeform: boolean | undefined;
|
|
550
|
+
defaultProps?: Partial<ComboboxProps>;
|
|
551
|
+
activeDescendantController: ActiveDescendantImperativeRef;
|
|
552
|
+
};
|
|
553
|
+
|
|
508
554
|
/**
|
|
509
555
|
* Create the state required to render Listbox.
|
|
510
556
|
*
|
|
@@ -520,6 +566,20 @@ export declare const useListboxContext_unstable: <T>(selector: ContextSelector<L
|
|
|
520
566
|
|
|
521
567
|
export declare function useListboxContextValues(state: ListboxState): ListboxContextValues;
|
|
522
568
|
|
|
569
|
+
/**
|
|
570
|
+
* @internal
|
|
571
|
+
* @returns listbox slot with desired behaviour and props
|
|
572
|
+
*/
|
|
573
|
+
export declare function useListboxSlot(listboxSlotFromProp: Slot<typeof Listbox> | undefined, ref: React_2.Ref<HTMLDivElement>, options: UseListboxSlotOptions): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined;
|
|
574
|
+
|
|
575
|
+
declare type UseListboxSlotOptions = {
|
|
576
|
+
state: UseListboxSlotState;
|
|
577
|
+
triggerRef: React_2.RefObject<HTMLInputElement> | React_2.RefObject<HTMLButtonElement> | React_2.RefObject<HTMLButtonElement | HTMLInputElement>;
|
|
578
|
+
defaultProps?: Partial<ListboxProps>;
|
|
579
|
+
};
|
|
580
|
+
|
|
581
|
+
declare type UseListboxSlotState = Pick<ComboboxBaseState, 'multiselect'>;
|
|
582
|
+
|
|
523
583
|
/**
|
|
524
584
|
* Apply styling to the Listbox slots based on the state
|
|
525
585
|
*/
|
|
@@ -557,4 +617,6 @@ export declare const useOptionGroupStyles_unstable: (state: OptionGroupState) =>
|
|
|
557
617
|
*/
|
|
558
618
|
export declare const useOptionStyles_unstable: (state: OptionState) => OptionState;
|
|
559
619
|
|
|
620
|
+
declare type UseTriggerSlotState = Pick<ComboboxBaseState, 'open' | 'getOptionById' | 'selectOption' | 'setOpen' | 'multiselect' | 'setHasFocus'>;
|
|
621
|
+
|
|
560
622
|
export { }
|
|
@@ -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 * 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"}
|
|
@@ -73,6 +73,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
73
73
|
listboxCollapsed: {
|
|
74
74
|
mc9l5x: "fjseox"
|
|
75
75
|
},
|
|
76
|
+
inlineListbox: {
|
|
77
|
+
Bj3rh1h: "f19g0ac"
|
|
78
|
+
},
|
|
76
79
|
small: {
|
|
77
80
|
Bqenvij: "frvgh55",
|
|
78
81
|
z189sj: ["fdw0yi8", "fk8j09s"]
|
|
@@ -173,7 +176,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
173
176
|
n51gp8: ["f14g86mu", "f1rvyvqg"]
|
|
174
177
|
}
|
|
175
178
|
}, {
|
|
176
|
-
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);}"],
|
|
179
|
+
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);}"],
|
|
177
180
|
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);}"],
|
|
178
181
|
m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
|
|
179
182
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
@@ -312,7 +315,7 @@ export const useComboboxStyles_unstable = state => {
|
|
|
312
315
|
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);
|
|
313
316
|
state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
|
|
314
317
|
if (state.listbox) {
|
|
315
|
-
state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
|
|
318
|
+
state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
|
|
316
319
|
}
|
|
317
320
|
if (state.expandIcon) {
|
|
318
321
|
state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
|
|
@@ -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"}
|
|
@@ -10,14 +10,14 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
|
|
|
10
10
|
* The element type of the ref should always match the element type used in the trigger shorthand.
|
|
11
11
|
*/ export function useInputTriggerSlot(triggerFromProps, ref, options) {
|
|
12
12
|
const { state: { open, value, selectOption, setValue, multiselect, selectedOptions, clearSelection, getOptionById, setOpen }, freeform, defaultProps, activeDescendantController } = options;
|
|
13
|
-
const onBlur = (
|
|
13
|
+
const onBlur = (event)=>{
|
|
14
14
|
// handle selection and updating value if freeform is false
|
|
15
15
|
if (!open && !freeform) {
|
|
16
16
|
const activeOptionId = activeDescendantController.active();
|
|
17
17
|
const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
|
|
18
18
|
// select matching option, if the value fully matches
|
|
19
19
|
if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
|
|
20
|
-
selectOption(
|
|
20
|
+
selectOption(event, activeOption);
|
|
21
21
|
}
|
|
22
22
|
// reset typed value when the input loses focus while collapsed, unless freeform is true
|
|
23
23
|
setValue(undefined);
|
|
@@ -41,15 +41,15 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
|
|
|
41
41
|
return getOptionById(match);
|
|
42
42
|
};
|
|
43
43
|
// update value and active option based on input
|
|
44
|
-
const onChange = (
|
|
45
|
-
const inputValue =
|
|
44
|
+
const onChange = (event)=>{
|
|
45
|
+
const inputValue = event.target.value;
|
|
46
46
|
// update uncontrolled value
|
|
47
47
|
setValue(inputValue);
|
|
48
48
|
// handle updating active option based on input
|
|
49
49
|
const matchingOption = getOptionFromInput(inputValue);
|
|
50
50
|
// clear selection for single-select if the input value no longer matches the selection
|
|
51
51
|
if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {
|
|
52
|
-
clearSelection(
|
|
52
|
+
clearSelection(event);
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
55
|
const trigger = useTriggerSlot(triggerFromProps, ref, {
|
|
@@ -70,33 +70,33 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
|
|
|
70
70
|
/**
|
|
71
71
|
* Freeform combobox should not select
|
|
72
72
|
*/ const defaultOnKeyDown = trigger.onKeyDown;
|
|
73
|
-
const onKeyDown = useEventCallback((
|
|
74
|
-
if (!open && getDropdownActionFromKey(
|
|
75
|
-
setOpen(
|
|
73
|
+
const onKeyDown = useEventCallback((event)=>{
|
|
74
|
+
if (!open && getDropdownActionFromKey(event) === 'Type') {
|
|
75
|
+
setOpen(event, true);
|
|
76
76
|
}
|
|
77
77
|
// clear activedescendant when moving the text insertion cursor
|
|
78
|
-
if (
|
|
78
|
+
if (event.key === ArrowLeft || event.key === ArrowRight) {
|
|
79
79
|
setHideActiveDescendant(true);
|
|
80
80
|
} else {
|
|
81
81
|
setHideActiveDescendant(false);
|
|
82
82
|
}
|
|
83
83
|
// update typing state to true if the user is typing
|
|
84
|
-
const action = getDropdownActionFromKey(
|
|
84
|
+
const action = getDropdownActionFromKey(event, {
|
|
85
85
|
open,
|
|
86
86
|
multiselect
|
|
87
87
|
});
|
|
88
88
|
if (action === 'Type') {
|
|
89
89
|
isTyping.current = true;
|
|
90
|
-
} else if (action === 'Open' &&
|
|
90
|
+
} else if (action === 'Open' && event.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
|
|
91
91
|
isTyping.current = false;
|
|
92
92
|
}
|
|
93
93
|
// allow space to insert a character if freeform & the last action was typing, or if the popup is closed
|
|
94
|
-
if ((isTyping.current || !open) &&
|
|
94
|
+
if ((isTyping.current || !open) && event.key === ' ') {
|
|
95
95
|
var _triggerFromProps_onKeyDown;
|
|
96
|
-
triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps,
|
|
96
|
+
triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, event);
|
|
97
97
|
return;
|
|
98
98
|
}
|
|
99
|
-
defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(
|
|
99
|
+
defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(event);
|
|
100
100
|
});
|
|
101
101
|
trigger.onKeyDown = onKeyDown;
|
|
102
102
|
if (hideActiveDescendant) {
|
|
@@ -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 {
|
|
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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"}
|
|
@@ -1 +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 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 ComboboxBaseState & {\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;\n"],"names":[],"mappings":"AAAA,WAiDgE"}
|
|
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 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;\n"],"names":[],"mappings":"AAAA,WAiDgE"}
|
|
@@ -29,7 +29,8 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
|
|
|
29
29
|
});
|
|
30
30
|
const baseState = useComboboxBaseState({
|
|
31
31
|
...props,
|
|
32
|
-
activeDescendantController
|
|
32
|
+
activeDescendantController,
|
|
33
|
+
freeform: false
|
|
33
34
|
});
|
|
34
35
|
const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;
|
|
35
36
|
const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
|
|
@@ -1 +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 {\n getPartitionedNativeProps,\n mergeCallbacks,\n useMergedRefs,\n slot,\n useEventCallback,\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';\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 // 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 });\n const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = 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 trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n state: baseState,\n defaultProps: {\n type: 'button',\n tabIndex: 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 tabIndex: 0,\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":["React","useFieldControlProps_unstable","useActiveDescendant","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","optionClassNames","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","trigger","button","type","tabIndex","value","placeholder","id","undefined","rootSlot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,sBAAsBC,eAAe,EAAEC,kBAAkBC,WAAW,QAAQ,wBAAwB;AAC7G,SACEC,yBAAyB,EACzBC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,OAAO,QAAQ,qBAAqB;AAE7C,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,mCAAmC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;QAoFxCC;IAnFjB,+CAA+C;IAC/CF,QAAQlB,8BAA8BkB,OAAO;QAAEG,kBAAkB;QAAMC,cAAc;IAAK;IAC1F,MAAM,EACJC,YAAYC,0BAA0B,EACtCC,eAAe,EACfC,YAAYC,0BAA0B,EACvC,GAAG1B,oBAAuD;QACzD2B,aAAaC,CAAAA,KAAMA,GAAGC,SAAS,CAACC,QAAQ,CAACf,iBAAiBgB,IAAI;IAChE;IAEA,MAAMC,YAAYtB,qBAAqB;QAAE,GAAGO,KAAK;QAAES;
|
|
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 {\n getPartitionedNativeProps,\n mergeCallbacks,\n useMergedRefs,\n slot,\n useEventCallback,\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';\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 // 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 } = 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 trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n state: baseState,\n defaultProps: {\n type: 'button',\n tabIndex: 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 tabIndex: 0,\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":["React","useFieldControlProps_unstable","useActiveDescendant","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","optionClassNames","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","freeform","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","trigger","button","type","tabIndex","value","placeholder","id","undefined","rootSlot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
|