@fluentui/react-combobox 9.4.9 → 9.5.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.
- package/CHANGELOG.json +57 -3
- package/CHANGELOG.md +26 -4
- package/dist/index.d.ts +3 -2
- package/lib/components/Combobox/renderCombobox.js +3 -1
- package/lib/components/Combobox/renderCombobox.js.map +1 -1
- package/lib/components/Dropdown/renderDropdown.js +3 -1
- package/lib/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib/utils/ComboboxBase.types.js.map +1 -1
- package/lib/utils/useComboboxBaseState.js +2 -1
- package/lib/utils/useComboboxBaseState.js.map +1 -1
- package/lib-commonjs/components/Combobox/renderCombobox.js +3 -1
- package/lib-commonjs/components/Combobox/renderCombobox.js.map +1 -1
- package/lib-commonjs/components/Dropdown/renderDropdown.js +3 -1
- package/lib-commonjs/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib-commonjs/utils/useComboboxBaseState.js +2 -1
- package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,61 @@
|
|
|
2
2
|
"name": "@fluentui/react-combobox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue,
|
|
5
|
+
"date": "Tue, 01 Aug 2023 10:14:27 GMT",
|
|
6
|
+
"tag": "@fluentui/react-combobox_v9.5.0",
|
|
7
|
+
"version": "9.5.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"minor": [
|
|
10
|
+
{
|
|
11
|
+
"author": "gcox@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-combobox",
|
|
13
|
+
"commit": "50392ee3cdec1975dff5e496da6241d37acb11b2",
|
|
14
|
+
"comment": "Added portal slot to Combobox and Dropdown"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-combobox",
|
|
19
|
+
"comment": "Bump @fluentui/react-field to v9.1.14",
|
|
20
|
+
"commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-combobox",
|
|
25
|
+
"comment": "Bump @fluentui/react-portal to v9.3.4",
|
|
26
|
+
"commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-combobox",
|
|
31
|
+
"comment": "Bump @fluentui/react-positioning to v9.9.1",
|
|
32
|
+
"commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-combobox",
|
|
37
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
|
|
38
|
+
"commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"date": "Thu, 27 Jul 2023 10:34:14 GMT",
|
|
45
|
+
"tag": "@fluentui/react-combobox_v9.4.10",
|
|
46
|
+
"version": "9.4.10",
|
|
47
|
+
"comments": {
|
|
48
|
+
"patch": [
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-combobox",
|
|
52
|
+
"comment": "Bump @fluentui/react-positioning to v9.9.0",
|
|
53
|
+
"commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"date": "Tue, 25 Jul 2023 13:29:18 GMT",
|
|
6
60
|
"tag": "@fluentui/react-combobox_v9.4.9",
|
|
7
61
|
"version": "9.4.9",
|
|
8
62
|
"comments": {
|
|
@@ -17,13 +71,13 @@
|
|
|
17
71
|
"author": "beachball",
|
|
18
72
|
"package": "@fluentui/react-combobox",
|
|
19
73
|
"comment": "Bump @fluentui/react-field to v9.1.13",
|
|
20
|
-
"commit": "
|
|
74
|
+
"commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
|
|
21
75
|
},
|
|
22
76
|
{
|
|
23
77
|
"author": "beachball",
|
|
24
78
|
"package": "@fluentui/react-combobox",
|
|
25
79
|
"comment": "Bump @fluentui/react-portal to v9.3.3",
|
|
26
|
-
"commit": "
|
|
80
|
+
"commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
|
|
27
81
|
}
|
|
28
82
|
]
|
|
29
83
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,41 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-combobox
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 01 Aug 2023 10:14:27 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.0)
|
|
8
|
+
|
|
9
|
+
Tue, 01 Aug 2023 10:14:27 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.4.10..@fluentui/react-combobox_v9.5.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- Added portal slot to Combobox and Dropdown ([PR #28661](https://github.com/microsoft/fluentui/pull/28661) by gcox@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
|
|
16
|
+
- Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
|
|
17
|
+
- Bump @fluentui/react-positioning to v9.9.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
|
|
18
|
+
- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.4.10)
|
|
21
|
+
|
|
22
|
+
Thu, 27 Jul 2023 10:34:14 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.4.9..@fluentui/react-combobox_v9.4.10)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- Bump @fluentui/react-positioning to v9.9.0 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.4.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.4.9)
|
|
8
30
|
|
|
9
|
-
Tue, 25 Jul 2023 13:
|
|
31
|
+
Tue, 25 Jul 2023 13:29:18 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.4.8..@fluentui/react-combobox_v9.4.9)
|
|
11
33
|
|
|
12
34
|
### Patches
|
|
13
35
|
|
|
14
36
|
- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-field to v9.1.13 ([PR #
|
|
16
|
-
- Bump @fluentui/react-portal to v9.3.3 ([PR #
|
|
37
|
+
- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
|
|
38
|
+
- Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
|
|
17
39
|
|
|
18
40
|
## [9.4.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.4.8)
|
|
19
41
|
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
|
|
|
4
4
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
5
5
|
import { FC } from 'react';
|
|
6
6
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
7
|
+
import { PortalProps } from '@fluentui/react-portal';
|
|
7
8
|
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
|
8
9
|
import { Provider } from 'react';
|
|
9
10
|
import { ProviderProps } from 'react';
|
|
@@ -33,7 +34,7 @@ declare type ComboboxBaseOpenEvents = React_2.MouseEvent<HTMLElement> | React_2.
|
|
|
33
34
|
* ComboboxBase Props
|
|
34
35
|
* Shared types between Combobox and Dropdown components
|
|
35
36
|
*/
|
|
36
|
-
declare type ComboboxBaseProps = SelectionProps & {
|
|
37
|
+
declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'> & {
|
|
37
38
|
/**
|
|
38
39
|
* Controls the colors and borders of the combobox trigger.
|
|
39
40
|
* @default 'outline'
|
|
@@ -86,7 +87,7 @@ declare type ComboboxBaseProps = SelectionProps & {
|
|
|
86
87
|
/**
|
|
87
88
|
* State used in rendering Combobox
|
|
88
89
|
*/
|
|
89
|
-
declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
|
|
90
|
+
declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
|
|
90
91
|
activeOption?: OptionValue;
|
|
91
92
|
focusVisible: boolean;
|
|
92
93
|
hasFocus: boolean;
|
|
@@ -8,5 +8,7 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
|
|
|
8
8
|
const { slots , slotProps } = getSlotsNext(state);
|
|
9
9
|
return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(ComboboxContext.Provider, {
|
|
10
10
|
value: contextValues.combobox
|
|
11
|
-
}, /*#__PURE__*/ createElement(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal,
|
|
11
|
+
}, /*#__PURE__*/ createElement(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal, {
|
|
12
|
+
mountNode: state.mountNode
|
|
13
|
+
}, /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox)))));
|
|
12
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\
|
|
1
|
+
{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\nimport { Portal } from '@fluentui/react-portal';\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n const { slots, slotProps } = getSlotsNext<ComboboxSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <ComboboxContext.Provider value={contextValues.combobox}>\n <slots.input {...slotProps.input} />\n {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.listbox &&\n (state.inlinePopup ? (\n <slots.listbox {...slotProps.listbox} />\n ) : (\n <Portal mountNode={state.mountNode}>\n <slots.listbox {...slotProps.listbox} />\n </Portal>\n ))}\n </ComboboxContext.Provider>\n </slots.root>\n );\n};\n"],"names":["Portal","createElement","getSlotsNext","ComboboxContext","renderCombobox_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GACvB,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA4BG;IAEzD,qBACE,AAhBJ,cAgBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAjBN,cAiBON,gBAAgBO,QAAQ;QAACC,OAAOL,cAAcM,QAAQ;qBACrD,AAlBR,cAkBSL,MAAMM,KAAK,EAAKL,UAAUK,KAAK,GAC/BN,MAAMO,UAAU,kBAAI,AAnB7B,cAmB8BP,MAAMO,UAAU,EAAKN,UAAUM,UAAU,GAC9DP,MAAMQ,OAAO,IACXV,CAAAA,MAAMW,WAAW,iBAChB,AAtBZ,cAsBaT,MAAMQ,OAAO,EAAKP,UAAUO,OAAO,kBAEpC,AAxBZ,cAwBaf;QAAOiB,WAAWZ,MAAMY,SAAS;qBAChC,AAzBd,cAyBeV,MAAMQ,OAAO,EAAKP,UAAUO,OAAO,EAEvC,AAAD;AAIV,EAAE"}
|
|
@@ -8,5 +8,7 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
|
|
|
8
8
|
const { slots , slotProps } = getSlotsNext(state);
|
|
9
9
|
return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(ComboboxContext.Provider, {
|
|
10
10
|
value: contextValues.combobox
|
|
11
|
-
}, /*#__PURE__*/ createElement(slots.button, slotProps.button, slotProps.button.children, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon)), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal,
|
|
11
|
+
}, /*#__PURE__*/ createElement(slots.button, slotProps.button, slotProps.button.children, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon)), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal, {
|
|
12
|
+
mountNode: state.mountNode
|
|
13
|
+
}, /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox)))));
|
|
12
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n const { slots, slotProps } = getSlotsNext<DropdownSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <ComboboxContext.Provider value={contextValues.combobox}>\n <slots.button {...slotProps.button}>\n {slotProps.button.children}\n {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n </slots.button>\n {slots.listbox &&\n (state.inlinePopup ? (\n <slots.listbox {...slotProps.listbox} />\n ) : (\n <Portal>\n <slots.listbox {...slotProps.listbox} />\n </Portal>\n ))}\n </ComboboxContext.Provider>\n </slots.root>\n );\n};\n"],"names":["Portal","createElement","getSlotsNext","ComboboxContext","renderDropdown_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA4BG;IAEzD,qBACE,AAjBJ,cAiBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAlBN,cAkBON,gBAAgBO,QAAQ;QAACC,OAAOL,cAAcM,QAAQ;qBACrD,AAnBR,cAmBSL,MAAMM,MAAM,EAAKL,UAAUK,MAAM,EAC/BL,UAAUK,MAAM,CAACC,QAAQ,EACzBP,MAAMQ,UAAU,kBAAI,AArB/B,cAqBgCR,MAAMQ,UAAU,EAAKP,UAAUO,UAAU,IAEhER,MAAMS,OAAO,IACXX,CAAAA,MAAMY,WAAW,iBAChB,AAzBZ,cAyBaV,MAAMS,OAAO,EAAKR,UAAUQ,OAAO,kBAEpC,AA3BZ,cA2BahB,
|
|
1
|
+
{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n const { slots, slotProps } = getSlotsNext<DropdownSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <ComboboxContext.Provider value={contextValues.combobox}>\n <slots.button {...slotProps.button}>\n {slotProps.button.children}\n {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n </slots.button>\n {slots.listbox &&\n (state.inlinePopup ? (\n <slots.listbox {...slotProps.listbox} />\n ) : (\n <Portal mountNode={state.mountNode}>\n <slots.listbox {...slotProps.listbox} />\n </Portal>\n ))}\n </ComboboxContext.Provider>\n </slots.root>\n );\n};\n"],"names":["Portal","createElement","getSlotsNext","ComboboxContext","renderDropdown_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA4BG;IAEzD,qBACE,AAjBJ,cAiBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAlBN,cAkBON,gBAAgBO,QAAQ;QAACC,OAAOL,cAAcM,QAAQ;qBACrD,AAnBR,cAmBSL,MAAMM,MAAM,EAAKL,UAAUK,MAAM,EAC/BL,UAAUK,MAAM,CAACC,QAAQ,EACzBP,MAAMQ,UAAU,kBAAI,AArB/B,cAqBgCR,MAAMQ,UAAU,EAAKP,UAAUO,UAAU,IAEhER,MAAMS,OAAO,IACXX,CAAAA,MAAMY,WAAW,iBAChB,AAzBZ,cAyBaV,MAAMS,OAAO,EAAKR,UAAUQ,OAAO,kBAEpC,AA3BZ,cA2BahB;QAAOkB,WAAWb,MAAMa,SAAS;qBAChC,AA5Bd,cA4BeX,MAAMS,OAAO,EAAKR,UAAUQ,OAAO,EAEvC,AAAD;AAIV,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps & {\n
|
|
1
|
+
{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * Controls the colors and borders of the combobox trigger.\n * @default 'outline'\n */\n appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n /**\n * The default open state when open is uncontrolled\n */\n defaultOpen?: boolean;\n\n /**\n * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n */\n defaultValue?: string;\n\n /**\n * Render the combobox's popup inline in the DOM.\n * This has accessibility benefits, particularly for touch screen readers.\n */\n inlinePopup?: boolean;\n\n /**\n * Callback when the open/closed state of the dropdown changes\n */\n onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n /**\n * Sets the open/closed state of the dropdown.\n * Use together with onOpenChange to fully control the dropdown's visibility\n */\n open?: boolean;\n\n /**\n * If set, the placeholder will show when no value is selected\n */\n placeholder?: string;\n\n /**\n * Configure the positioning of the combobox dropdown\n *\n * @defaultvalue below\n */\n positioning?: PositioningShorthand;\n\n /**\n * Controls the size of the combobox faceplate\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value displayed by the Combobox.\n * Use this with `onOptionSelect` to directly control the displayed value string\n */\n value?: string;\n };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &\n Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n OptionCollectionState &\n SelectionState & {\n /* Option data for the currently highlighted option (not the selected option) */\n activeOption?: OptionValue;\n\n // Whether the keyboard focus outline style should be visible\n focusVisible: boolean;\n\n // whether the combobox/dropdown currently has focus\n hasFocus: boolean;\n\n /* Whether the next blur event should be ignored, and the combobox/dropdown will not close.*/\n ignoreNextBlur: React.MutableRefObject<boolean>;\n\n setActiveOption(option?: OptionValue): void;\n\n setFocusVisible(focusVisible: boolean): void;\n\n setHasFocus(hasFocus: boolean): void;\n\n setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n setValue(newValue: string | undefined): void;\n };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n | React.MouseEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n combobox: ComboboxContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -5,7 +5,7 @@ import { useSelection } from '../utils/useSelection';
|
|
|
5
5
|
/**
|
|
6
6
|
* State shared between Combobox and Dropdown components
|
|
7
7
|
*/ export const useComboboxBaseState = (props)=>{
|
|
8
|
-
const { appearance ='outline' , children , editable =false , inlinePopup =false , multiselect , onOpenChange , size ='medium' } = props;
|
|
8
|
+
const { appearance ='outline' , children , editable =false , inlinePopup =false , mountNode =undefined , multiselect , onOpenChange , size ='medium' } = props;
|
|
9
9
|
const optionCollection = useOptionCollection();
|
|
10
10
|
const { getOptionAtIndex , getOptionsMatchingValue } = optionCollection;
|
|
11
11
|
const [activeOption, setActiveOption] = React.useState();
|
|
@@ -96,6 +96,7 @@ import { useSelection } from '../utils/useSelection';
|
|
|
96
96
|
hasFocus,
|
|
97
97
|
ignoreNextBlur,
|
|
98
98
|
inlinePopup,
|
|
99
|
+
mountNode,
|
|
99
100
|
open,
|
|
100
101
|
setActiveOption,
|
|
101
102
|
setFocusVisible,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n const {\n appearance = 'outline',\n children,\n editable = false,\n inlinePopup = false,\n multiselect,\n onOpenChange,\n size = 'medium',\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n const selectionState = useSelection(props);\n const { selectedOptions } = selectionState;\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n },\n [onOpenChange, setOpenState],\n );\n\n // update active option based on change in open state or children\n React.useEffect(() => {\n if (open && !activeOption) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n selectedOption && setActiveOption(selectedOption);\n }\n // default to starting at the first option\n else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else if (!open) {\n // reset the active option when closing\n setActiveOption(undefined);\n }\n // this should only be run in response to changes in the open state or children\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, children]);\n\n return {\n ...optionCollection,\n ...selectionState,\n activeOption,\n appearance,\n focusVisible,\n hasFocus,\n ignoreNextBlur,\n inlinePopup,\n open,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n };\n};\n"],"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","
|
|
1
|
+
{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n const {\n appearance = 'outline',\n children,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n const selectionState = useSelection(props);\n const { selectedOptions } = selectionState;\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n },\n [onOpenChange, setOpenState],\n );\n\n // update active option based on change in open state or children\n React.useEffect(() => {\n if (open && !activeOption) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n selectedOption && setActiveOption(selectedOption);\n }\n // default to starting at the first option\n else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else if (!open) {\n // reset the active option when closing\n setActiveOption(undefined);\n }\n // this should only be run in response to changes in the open state or children\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, children]);\n\n return {\n ...optionCollection,\n ...selectionState,\n activeOption,\n appearance,\n focusVisible,\n hasFocus,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n };\n};\n"],"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"mappings":"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"}
|
|
@@ -14,5 +14,7 @@ const renderCombobox_unstable = (state, contextValues)=>{
|
|
|
14
14
|
const { slots , slotProps } = (0, _reactUtilities.getSlotsNext)(state);
|
|
15
15
|
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_comboboxContext.ComboboxContext.Provider, {
|
|
16
16
|
value: contextValues.combobox
|
|
17
|
-
}, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox) : /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactPortal.Portal,
|
|
17
|
+
}, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox) : /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactPortal.Portal, {
|
|
18
|
+
mountNode: state.mountNode
|
|
19
|
+
}, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox)))));
|
|
18
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderCombobox.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { Portal } from '@fluentui/react-portal';\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Combobox\n */ export const renderCombobox_unstable = (state, contextValues)=>{\n const { slots , slotProps } = getSlotsNext(state);\n return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(ComboboxContext.Provider, {\n value: contextValues.combobox\n }, /*#__PURE__*/ createElement(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal,
|
|
1
|
+
{"version":3,"sources":["renderCombobox.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { Portal } from '@fluentui/react-portal';\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Combobox\n */ export const renderCombobox_unstable = (state, contextValues)=>{\n const { slots , slotProps } = getSlotsNext(state);\n return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(ComboboxContext.Provider, {\n value: contextValues.combobox\n }, /*#__PURE__*/ createElement(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal, {\n mountNode: state.mountNode\n }, /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox)))));\n};\n"],"names":["renderCombobox_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","ComboboxContext","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","Portal","mountNode"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMjCA;;aAAAA;;6BAN2D;iCAC9C;gCACD;iCACG;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC,gBAAgB;IAC/D,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,gCAAe,CAACC,QAAQ,EAAE;QACjHC,OAAOR,cAAcS,QAAQ;IACjC,GAAG,WAAW,GAAGL,IAAAA,8BAAa,EAACH,MAAMS,KAAK,EAAER,UAAUQ,KAAK,GAAGT,MAAMU,UAAU,IAAI,WAAW,GAAGP,IAAAA,8BAAa,EAACH,MAAMU,UAAU,EAAET,UAAUS,UAAU,GAAGV,MAAMW,OAAO,IAAKb,CAAAA,MAAMc,WAAW,GAAG,WAAW,GAAGT,IAAAA,8BAAa,EAACH,MAAMW,OAAO,EAAEV,UAAUU,OAAO,IAAI,WAAW,GAAGR,IAAAA,8BAAa,EAACU,mBAAM,EAAE;QAC7RC,WAAWhB,MAAMgB,SAAS;IAC9B,GAAG,WAAW,GAAGX,IAAAA,8BAAa,EAACH,MAAMW,OAAO,EAAEV,UAAUU,OAAO,EAAE,AAAD;AACpE"}
|
|
@@ -14,5 +14,7 @@ const renderDropdown_unstable = (state, contextValues)=>{
|
|
|
14
14
|
const { slots , slotProps } = (0, _reactUtilities.getSlotsNext)(state);
|
|
15
15
|
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_comboboxContext.ComboboxContext.Provider, {
|
|
16
16
|
value: contextValues.combobox
|
|
17
|
-
}, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.button, slotProps.button, slotProps.button.children, slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon)), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox) : /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactPortal.Portal,
|
|
17
|
+
}, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.button, slotProps.button, slotProps.button.children, slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon)), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox) : /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactPortal.Portal, {
|
|
18
|
+
mountNode: state.mountNode
|
|
19
|
+
}, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox)))));
|
|
18
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDropdown.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { Portal } from '@fluentui/react-portal';\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Dropdown\n */ export const renderDropdown_unstable = (state, contextValues)=>{\n const { slots , slotProps } = getSlotsNext(state);\n return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(ComboboxContext.Provider, {\n value: contextValues.combobox\n }, /*#__PURE__*/ createElement(slots.button, slotProps.button, slotProps.button.children, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon)), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal,
|
|
1
|
+
{"version":3,"sources":["renderDropdown.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { Portal } from '@fluentui/react-portal';\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Dropdown\n */ export const renderDropdown_unstable = (state, contextValues)=>{\n const { slots , slotProps } = getSlotsNext(state);\n return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(ComboboxContext.Provider, {\n value: contextValues.combobox\n }, /*#__PURE__*/ createElement(slots.button, slotProps.button, slotProps.button.children, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon)), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal, {\n mountNode: state.mountNode\n }, /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox)))));\n};\n"],"names":["renderDropdown_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","ComboboxContext","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup","Portal","mountNode"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMjCA;;aAAAA;;6BAN2D;iCAC9C;gCACD;iCACG;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC,gBAAgB;IAC/D,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,gCAAe,CAACC,QAAQ,EAAE;QACjHC,OAAOR,cAAcS,QAAQ;IACjC,GAAG,WAAW,GAAGL,IAAAA,8BAAa,EAACH,MAAMS,MAAM,EAAER,UAAUQ,MAAM,EAAER,UAAUQ,MAAM,CAACC,QAAQ,EAAEV,MAAMW,UAAU,IAAI,WAAW,GAAGR,IAAAA,8BAAa,EAACH,MAAMW,UAAU,EAAEV,UAAUU,UAAU,IAAIX,MAAMY,OAAO,IAAKd,CAAAA,MAAMe,WAAW,GAAG,WAAW,GAAGV,IAAAA,8BAAa,EAACH,MAAMY,OAAO,EAAEX,UAAUW,OAAO,IAAI,WAAW,GAAGT,IAAAA,8BAAa,EAACW,mBAAM,EAAE;QAC1TC,WAAWjB,MAAMiB,SAAS;IAC9B,GAAG,WAAW,GAAGZ,IAAAA,8BAAa,EAACH,MAAMY,OAAO,EAAEX,UAAUW,OAAO,EAAE,AAAD;AACpE"}
|
|
@@ -12,7 +12,7 @@ const _reactUtilities = require("@fluentui/react-utilities");
|
|
|
12
12
|
const _useOptionCollection = require("../utils/useOptionCollection");
|
|
13
13
|
const _useSelection = require("../utils/useSelection");
|
|
14
14
|
const useComboboxBaseState = (props)=>{
|
|
15
|
-
const { appearance ='outline' , children , editable =false , inlinePopup =false , multiselect , onOpenChange , size ='medium' } = props;
|
|
15
|
+
const { appearance ='outline' , children , editable =false , inlinePopup =false , mountNode =undefined , multiselect , onOpenChange , size ='medium' } = props;
|
|
16
16
|
const optionCollection = (0, _useOptionCollection.useOptionCollection)();
|
|
17
17
|
const { getOptionAtIndex , getOptionsMatchingValue } = optionCollection;
|
|
18
18
|
const [activeOption, setActiveOption] = _react.useState();
|
|
@@ -103,6 +103,7 @@ const useComboboxBaseState = (props)=>{
|
|
|
103
103
|
hasFocus,
|
|
104
104
|
ignoreNextBlur,
|
|
105
105
|
inlinePopup,
|
|
106
|
+
mountNode,
|
|
106
107
|
open,
|
|
107
108
|
setActiveOption,
|
|
108
109
|
setFocusVisible,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useComboboxBaseState.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { useSelection } from '../utils/useSelection';\n/**\n * State shared between Combobox and Dropdown components\n */ export const useComboboxBaseState = (props)=>{\n const { appearance ='outline' , children , editable =false , inlinePopup =false , multiselect , onOpenChange , size ='medium' } = props;\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex , getOptionsMatchingValue } = optionCollection;\n const [activeOption, setActiveOption] = React.useState();\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n // track focused state to conditionally render collapsed listbox\n const [hasFocus, setHasFocus] = React.useState(false);\n const ignoreNextBlur = React.useRef(false);\n const selectionState = useSelection(props);\n const { selectedOptions } = selectionState;\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined\n });\n const value = React.useMemo(()=>{\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n const selectedOptionsText = getOptionsMatchingValue((optionValue)=>{\n return selectedOptions.includes(optionValue);\n }).map((option)=>option.text);\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n return selectedOptionsText[0];\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n controllableValue,\n editable,\n getOptionsMatchingValue,\n multiselect,\n props.defaultValue,\n selectedOptions\n ]);\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false\n });\n const setOpen = React.useCallback((event, newState)=>{\n onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n open: newState\n });\n setOpenState(newState);\n }, [\n onOpenChange,\n setOpenState\n ]);\n // update active option based on change in open state or children\n React.useEffect(()=>{\n if (open && !activeOption) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();\n selectedOption && setActiveOption(selectedOption);\n } else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else if (!open) {\n // reset the active option when closing\n setActiveOption(undefined);\n }\n // this should only be run in response to changes in the open state or children\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n open,\n children\n ]);\n return {\n ...optionCollection,\n ...selectionState,\n activeOption,\n appearance,\n focusVisible,\n hasFocus,\n ignoreNextBlur,\n inlinePopup,\n open,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value\n };\n};\n"],"names":["useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","useOptionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","React","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","useSelection","selectedOptions","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","
|
|
1
|
+
{"version":3,"sources":["useComboboxBaseState.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { useSelection } from '../utils/useSelection';\n/**\n * State shared between Combobox and Dropdown components\n */ export const useComboboxBaseState = (props)=>{\n const { appearance ='outline' , children , editable =false , inlinePopup =false , mountNode =undefined , multiselect , onOpenChange , size ='medium' } = props;\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex , getOptionsMatchingValue } = optionCollection;\n const [activeOption, setActiveOption] = React.useState();\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n // track focused state to conditionally render collapsed listbox\n const [hasFocus, setHasFocus] = React.useState(false);\n const ignoreNextBlur = React.useRef(false);\n const selectionState = useSelection(props);\n const { selectedOptions } = selectionState;\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined\n });\n const value = React.useMemo(()=>{\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n const selectedOptionsText = getOptionsMatchingValue((optionValue)=>{\n return selectedOptions.includes(optionValue);\n }).map((option)=>option.text);\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n return selectedOptionsText[0];\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n controllableValue,\n editable,\n getOptionsMatchingValue,\n multiselect,\n props.defaultValue,\n selectedOptions\n ]);\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false\n });\n const setOpen = React.useCallback((event, newState)=>{\n onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n open: newState\n });\n setOpenState(newState);\n }, [\n onOpenChange,\n setOpenState\n ]);\n // update active option based on change in open state or children\n React.useEffect(()=>{\n if (open && !activeOption) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();\n selectedOption && setActiveOption(selectedOption);\n } else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else if (!open) {\n // reset the active option when closing\n setActiveOption(undefined);\n }\n // this should only be run in response to changes in the open state or children\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n open,\n children\n ]);\n return {\n ...optionCollection,\n ...selectionState,\n activeOption,\n appearance,\n focusVisible,\n hasFocus,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value\n };\n};\n"],"names":["useComboboxBaseState","props","appearance","children","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","optionCollection","useOptionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","React","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","useSelection","selectedOptions","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-combobox",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.0",
|
|
4
4
|
"description": "Fluent UI React Combobox component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@fluentui/keyboard-keys": "^9.0.3",
|
|
37
37
|
"@fluentui/react-context-selector": "^9.1.26",
|
|
38
|
-
"@fluentui/react-field": "^9.1.
|
|
38
|
+
"@fluentui/react-field": "^9.1.14",
|
|
39
39
|
"@fluentui/react-icons": "^2.0.207",
|
|
40
40
|
"@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
|
|
41
|
-
"@fluentui/react-portal": "^9.3.
|
|
42
|
-
"@fluentui/react-positioning": "^9.
|
|
43
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
41
|
+
"@fluentui/react-portal": "^9.3.4",
|
|
42
|
+
"@fluentui/react-positioning": "^9.9.1",
|
|
43
|
+
"@fluentui/react-shared-contexts": "^9.7.0",
|
|
44
44
|
"@fluentui/react-theme": "^9.1.9",
|
|
45
45
|
"@fluentui/react-utilities": "^9.10.1",
|
|
46
46
|
"@griffel/react": "^1.5.7",
|