@fluentui/react-combobox 9.4.10 → 9.5.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.json CHANGED
@@ -2,7 +2,103 @@
2
2
  "name": "@fluentui/react-combobox",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 27 Jul 2023 10:33:13 GMT",
5
+ "date": "Fri, 04 Aug 2023 08:48:25 GMT",
6
+ "tag": "@fluentui/react-combobox_v9.5.1",
7
+ "version": "9.5.1",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-combobox",
13
+ "comment": "Bump @fluentui/react-context-selector to v9.1.27",
14
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-combobox",
19
+ "comment": "Bump @fluentui/react-field to v9.1.15",
20
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-combobox",
25
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13",
26
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-combobox",
31
+ "comment": "Bump @fluentui/react-portal to v9.3.5",
32
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-combobox",
37
+ "comment": "Bump @fluentui/react-positioning to v9.9.2",
38
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-combobox",
43
+ "comment": "Bump @fluentui/react-shared-contexts to v9.7.1",
44
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-combobox",
49
+ "comment": "Bump @fluentui/react-theme to v9.1.10",
50
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-combobox",
55
+ "comment": "Bump @fluentui/react-utilities to v9.11.0",
56
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
57
+ }
58
+ ]
59
+ }
60
+ },
61
+ {
62
+ "date": "Tue, 01 Aug 2023 10:17:19 GMT",
63
+ "tag": "@fluentui/react-combobox_v9.5.0",
64
+ "version": "9.5.0",
65
+ "comments": {
66
+ "minor": [
67
+ {
68
+ "author": "gcox@microsoft.com",
69
+ "package": "@fluentui/react-combobox",
70
+ "commit": "50392ee3cdec1975dff5e496da6241d37acb11b2",
71
+ "comment": "Added portal slot to Combobox and Dropdown"
72
+ },
73
+ {
74
+ "author": "beachball",
75
+ "package": "@fluentui/react-combobox",
76
+ "comment": "Bump @fluentui/react-field to v9.1.14",
77
+ "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
78
+ },
79
+ {
80
+ "author": "beachball",
81
+ "package": "@fluentui/react-combobox",
82
+ "comment": "Bump @fluentui/react-portal to v9.3.4",
83
+ "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
84
+ },
85
+ {
86
+ "author": "beachball",
87
+ "package": "@fluentui/react-combobox",
88
+ "comment": "Bump @fluentui/react-positioning to v9.9.1",
89
+ "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
90
+ },
91
+ {
92
+ "author": "beachball",
93
+ "package": "@fluentui/react-combobox",
94
+ "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
95
+ "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
96
+ }
97
+ ]
98
+ }
99
+ },
100
+ {
101
+ "date": "Thu, 27 Jul 2023 10:34:14 GMT",
6
102
  "tag": "@fluentui/react-combobox_v9.4.10",
7
103
  "version": "9.4.10",
8
104
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,41 @@
1
1
  # Change Log - @fluentui/react-combobox
2
2
 
3
- This log was last generated on Thu, 27 Jul 2023 10:33:13 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 04 Aug 2023 08:48:25 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.1)
8
+
9
+ Fri, 04 Aug 2023 08:48:25 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.0..@fluentui/react-combobox_v9.5.1)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-context-selector to v9.1.27 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
15
+ - Bump @fluentui/react-field to v9.1.15 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
17
+ - Bump @fluentui/react-portal to v9.3.5 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
18
+ - Bump @fluentui/react-positioning to v9.9.2 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
19
+ - Bump @fluentui/react-shared-contexts to v9.7.1 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
20
+ - Bump @fluentui/react-theme to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
21
+ - Bump @fluentui/react-utilities to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
22
+
23
+ ## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.0)
24
+
25
+ Tue, 01 Aug 2023 10:17:19 GMT
26
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.4.10..@fluentui/react-combobox_v9.5.0)
27
+
28
+ ### Minor changes
29
+
30
+ - Added portal slot to Combobox and Dropdown ([PR #28661](https://github.com/microsoft/fluentui/pull/28661) by gcox@microsoft.com)
31
+ - Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
32
+ - Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
33
+ - Bump @fluentui/react-positioning to v9.9.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
34
+ - Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
35
+
7
36
  ## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.4.10)
8
37
 
9
- Thu, 27 Jul 2023 10:33:13 GMT
38
+ Thu, 27 Jul 2023 10:34:14 GMT
10
39
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.4.9..@fluentui/react-combobox_v9.4.10)
11
40
 
12
41
  ### Patches
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, null, /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox)))));
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 */\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 { 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>\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"],"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,KAAK,EAAKL,UAAUK,KAAK,GAC/BN,MAAMO,UAAU,kBAAI,AApB7B,cAoB8BP,MAAMO,UAAU,EAAKN,UAAUM,UAAU,GAC9DP,MAAMQ,OAAO,IACXV,CAAAA,MAAMW,WAAW,iBAChB,AAvBZ,cAuBaT,MAAMQ,OAAO,EAAKP,UAAUO,OAAO,kBAEpC,AAzBZ,cAyBaf,4BACC,AA1Bd,cA0BeO,MAAMQ,OAAO,EAAKP,UAAUO,OAAO,EAEvC,AAAD;AAIV,EAAE"}
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, null, /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox)))));
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,4BACC,AA5Bd,cA4BeO,MAAMS,OAAO,EAAKR,UAAUQ,OAAO,EAEvC,AAAD;AAIV,EAAE"}
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 /**\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, '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"}
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","undefined","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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"}
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, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox)))));
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, null, /*#__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"],"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,IAAI,EAAE,WAAW,GAAGV,IAAAA,8BAAa,EAACH,MAAMW,OAAO,EAAEV,UAAUU,OAAO,EAAE,AAAD;AACxW"}
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, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox)))));
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, null, /*#__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"],"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,IAAI,EAAE,WAAW,GAAGX,IAAAA,8BAAa,EAACH,MAAMY,OAAO,EAAEX,UAAUW,OAAO,EAAE,AAAD;AACrY"}
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","undefined","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"mappings":";;;;+BAMiBA;;aAAAA;;;6DANM;gCAC6B;qCAChB;8BACP;AAGlB,MAAMA,uBAAuB,CAACC,QAAQ;IAC7C,MAAM,EAAEC,YAAY,UAAS,EAAGC,SAAQ,EAAGC,UAAU,KAAK,CAAA,EAAGC,aAAa,KAAK,CAAA,EAAGC,YAAW,EAAGC,aAAY,EAAGC,MAAM,SAAQ,EAAG,GAAGP;IACnI,MAAMQ,mBAAmBC,IAAAA,wCAAmB;IAC5C,MAAM,EAAEC,iBAAgB,EAAGC,wBAAuB,EAAG,GAAGH;IACxD,MAAM,CAACI,cAAcC,gBAAgB,GAAGC,OAAMC,QAAQ;IACtD,uDAAuD;IACvD,yFAAyF;IACzF,MAAM,CAACC,cAAcC,gBAAgB,GAAGH,OAAMC,QAAQ,CAAC,KAAK;IAC5D,gEAAgE;IAChE,MAAM,CAACG,UAAUC,YAAY,GAAGL,OAAMC,QAAQ,CAAC,KAAK;IACpD,MAAMK,iBAAiBN,OAAMO,MAAM,CAAC,KAAK;IACzC,MAAMC,iBAAiBC,IAAAA,0BAAY,EAACvB;IACpC,MAAM,EAAEwB,gBAAe,EAAG,GAAGF;IAC7B,+EAA+E;IAC/E,MAAMG,eAAeC,IAAAA,6BAAa;IAClC,MAAM,CAACC,mBAAmBC,SAAS,GAAGC,IAAAA,oCAAoB,EAAC;QACvDC,OAAO9B,MAAM+B,KAAK;QAClBC,cAAcC;IAClB;IACA,MAAMF,QAAQjB,OAAMoB,OAAO,CAAC,IAAI;QAC5B,sEAAsE;QACtE,IAAIP,sBAAsBM,WAAW;YACjC,OAAON;QACX,CAAC;QACD,6DAA6D;QAC7D,IAAIF,gBAAgBzB,MAAMmC,YAAY,KAAKF,WAAW;YAClD,OAAOjC,MAAMmC,YAAY;QAC7B,CAAC;QACD,MAAMC,sBAAsBzB,wBAAwB,CAAC0B,cAAc;YAC/D,OAAOb,gBAAgBc,QAAQ,CAACD;QACpC,GAAGE,GAAG,CAAC,CAACC,SAASA,OAAOC,IAAI;QAC5B,IAAIpC,aAAa;YACb,oFAAoF;YACpF,OAAOF,WAAW,KAAKiC,oBAAoBM,IAAI,CAAC,KAAK;QACzD,CAAC;QACD,OAAON,mBAAmB,CAAC,EAAE;IACjC,kDAAkD;IAClD,0EAA0E;IAC1E,4CAA4C;IAC5C,uDAAuD;IACvD,GAAG;QACCT;QACAxB;QACAQ;QACAN;QACAL,MAAMmC,YAAY;QAClBX;KACH;IACD,6DAA6D;IAC7D,MAAM,CAACmB,MAAMC,aAAa,GAAGf,IAAAA,oCAAoB,EAAC;QAC9CC,OAAO9B,MAAM2C,IAAI;QACjBE,cAAc7C,MAAM8C,WAAW;QAC/Bd,cAAc,KAAK;IACvB;IACA,MAAMe,UAAUjC,OAAMkC,WAAW,CAAC,CAACC,OAAOC,WAAW;QACjD5C,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAa2C,OAAO;YAC5EN,MAAMO;QACV,EAAE;QACFN,aAAaM;IACjB,GAAG;QACC5C;QACAsC;KACH;IACD,iEAAiE;IACjE9B,OAAMqC,SAAS,CAAC,IAAI;QAChB,IAAIR,QAAQ,CAAC/B,cAAc;YACvB,sFAAsF;YACtF,IAAI,CAACP,eAAemB,gBAAgB4B,MAAM,GAAG,GAAG;gBAC5C,MAAMC,iBAAiB1C,wBAAwB,CAAC2C,IAAIA,MAAM9B,eAAe,CAAC,EAAE,EAAE+B,GAAG;gBACjFF,kBAAkBxC,gBAAgBwC;YACtC,OAAO;gBACHxC,gBAAgBH,iBAAiB;YACrC,CAAC;QACL,OAAO,IAAI,CAACiC,MAAM;YACd,uCAAuC;YACvC9B,gBAAgBoB;QACpB,CAAC;IACL,+EAA+E;IAC/E,uDAAuD;IACvD,GAAG;QACCU;QACAzC;KACH;IACD,OAAO;QACH,GAAGM,gBAAgB;QACnB,GAAGc,cAAc;QACjBV;QACAX;QACAe;QACAE;QACAE;QACAhB;QACAuC;QACA9B;QACAI;QACAE;QACA4B;QACAnB;QACArB;QACAwB;IACJ;AACJ"}
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.4.10",
3
+ "version": "9.5.1",
4
4
  "description": "Fluent UI React Combobox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -34,15 +34,15 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@fluentui/keyboard-keys": "^9.0.3",
37
- "@fluentui/react-context-selector": "^9.1.26",
38
- "@fluentui/react-field": "^9.1.13",
37
+ "@fluentui/react-context-selector": "^9.1.27",
38
+ "@fluentui/react-field": "^9.1.15",
39
39
  "@fluentui/react-icons": "^2.0.207",
40
- "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
41
- "@fluentui/react-portal": "^9.3.3",
42
- "@fluentui/react-positioning": "^9.9.0",
43
- "@fluentui/react-shared-contexts": "^9.6.0",
44
- "@fluentui/react-theme": "^9.1.9",
45
- "@fluentui/react-utilities": "^9.10.1",
40
+ "@fluentui/react-jsx-runtime": "9.0.0-alpha.13",
41
+ "@fluentui/react-portal": "^9.3.5",
42
+ "@fluentui/react-positioning": "^9.9.2",
43
+ "@fluentui/react-shared-contexts": "^9.7.1",
44
+ "@fluentui/react-theme": "^9.1.10",
45
+ "@fluentui/react-utilities": "^9.11.0",
46
46
  "@griffel/react": "^1.5.7",
47
47
  "@swc/helpers": "^0.4.14"
48
48
  },