@fluentui/react-combobox 9.6.1 → 9.7.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.md +19 -2
- package/dist/index.d.ts +21 -0
- package/lib/hooks/useComboboxFilter.js +45 -0
- package/lib/hooks/useComboboxFilter.js.map +1 -0
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib-commonjs/hooks/useComboboxFilter.js +56 -0
- package/lib-commonjs/hooks/useComboboxFilter.js.map +1 -0
- package/lib-commonjs/index.js +4 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,29 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-combobox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 18 Jan 2024 14:19:08 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.7.0)
|
|
8
|
+
|
|
9
|
+
Thu, 18 Jan 2024 14:19:08 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.6.1..@fluentui/react-combobox_v9.7.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: add `useComboboxFilter()` hook ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-context-selector to v9.1.49 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
|
|
16
|
+
- Bump @fluentui/react-field to v9.1.50 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.27 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
|
|
18
|
+
- Bump @fluentui/react-portal to v9.4.10 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
|
|
19
|
+
- Bump @fluentui/react-positioning to v9.12.4 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
|
|
20
|
+
- Bump @fluentui/react-shared-contexts to v9.14.0 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v9.17.3 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v9.16.1 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
|
|
23
|
+
|
|
7
24
|
## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.6.1)
|
|
8
25
|
|
|
9
|
-
Wed, 17 Jan 2024 16:
|
|
26
|
+
Wed, 17 Jan 2024 16:18:49 GMT
|
|
10
27
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.6.0..@fluentui/react-combobox_v9.6.1)
|
|
11
28
|
|
|
12
29
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -396,6 +396,27 @@ export declare const useCombobox_unstable: (props: ComboboxProps, ref: React_2.R
|
|
|
396
396
|
|
|
397
397
|
export declare function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues;
|
|
398
398
|
|
|
399
|
+
export declare function useComboboxFilter<T extends {
|
|
400
|
+
children: React_2.ReactNode;
|
|
401
|
+
value: string;
|
|
402
|
+
} | string>(query: string, options: T[], config: UseComboboxFilterConfig<T>): JSX.Element[];
|
|
403
|
+
|
|
404
|
+
declare type UseComboboxFilterConfig<T extends {
|
|
405
|
+
children: React_2.ReactNode;
|
|
406
|
+
value: string;
|
|
407
|
+
} | string> = {
|
|
408
|
+
/** Provides a custom filter for the option. */
|
|
409
|
+
filter?: (optionText: string, query: string) => boolean;
|
|
410
|
+
/** Provides a custom message to display when there are no options. */
|
|
411
|
+
noOptionsMessage?: React_2.ReactNode;
|
|
412
|
+
/** Provides a way to map an option object to a React key. By default, "value" is used. */
|
|
413
|
+
optionToReactKey?: (option: T) => string;
|
|
414
|
+
/** Provides a way to map an option object to a text used for search. By default, "value" is used. */
|
|
415
|
+
optionToText?: (option: T) => string;
|
|
416
|
+
/** Provides a custom render for the option. */
|
|
417
|
+
renderOption?: (option: T) => JSX.Element;
|
|
418
|
+
};
|
|
419
|
+
|
|
399
420
|
/**
|
|
400
421
|
* Apply styling to the Combobox slots based on the state
|
|
401
422
|
*/
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Option } from '../Option';
|
|
3
|
+
function defaultFilter(optionText, query) {
|
|
4
|
+
if (query === '') {
|
|
5
|
+
return true;
|
|
6
|
+
}
|
|
7
|
+
return optionText.toLowerCase().includes(query.toLowerCase());
|
|
8
|
+
}
|
|
9
|
+
function defaultToString(option) {
|
|
10
|
+
return typeof option === 'string' ? option : option.value;
|
|
11
|
+
}
|
|
12
|
+
export function useComboboxFilter(query, options, config) {
|
|
13
|
+
const { filter = defaultFilter, noOptionsMessage = "We couldn't find any matches.", optionToReactKey = defaultToString, optionToText = defaultToString, renderOption = (option)=>{
|
|
14
|
+
if (typeof option === 'string') {
|
|
15
|
+
return /*#__PURE__*/ React.createElement(Option, {
|
|
16
|
+
key: option
|
|
17
|
+
}, option);
|
|
18
|
+
}
|
|
19
|
+
return /*#__PURE__*/ React.createElement(Option, {
|
|
20
|
+
...option,
|
|
21
|
+
key: optionToReactKey(option),
|
|
22
|
+
text: optionToText(option),
|
|
23
|
+
value: option.value
|
|
24
|
+
}, option.children);
|
|
25
|
+
} } = config;
|
|
26
|
+
const filteredOptions = React.useMemo(()=>{
|
|
27
|
+
const searchValue = query.trim();
|
|
28
|
+
return options.filter((option)=>filter(optionToText(option), searchValue));
|
|
29
|
+
}, [
|
|
30
|
+
options,
|
|
31
|
+
optionToText,
|
|
32
|
+
filter,
|
|
33
|
+
query
|
|
34
|
+
]);
|
|
35
|
+
if (filteredOptions.length === 0) {
|
|
36
|
+
return [
|
|
37
|
+
/*#__PURE__*/ React.createElement(Option, {
|
|
38
|
+
"aria-disabled": "true",
|
|
39
|
+
key: "no-results",
|
|
40
|
+
text: ""
|
|
41
|
+
}, noOptionsMessage)
|
|
42
|
+
];
|
|
43
|
+
}
|
|
44
|
+
return filteredOptions.map((option)=>renderOption(option));
|
|
45
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useComboboxFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Option } from '../Option';\n\ntype UseComboboxFilterConfig<T extends { children: React.ReactNode; value: string } | string> = {\n /** Provides a custom filter for the option. */\n filter?: (optionText: string, query: string) => boolean;\n\n /** Provides a custom message to display when there are no options. */\n noOptionsMessage?: React.ReactNode;\n\n /** Provides a way to map an option object to a React key. By default, \"value\" is used. */\n optionToReactKey?: (option: T) => string;\n\n /** Provides a way to map an option object to a text used for search. By default, \"value\" is used. */\n optionToText?: (option: T) => string;\n\n /** Provides a custom render for the option. */\n renderOption?: (option: T) => JSX.Element;\n};\n\nfunction defaultFilter(optionText: string, query: string) {\n if (query === '') {\n return true;\n }\n\n return optionText.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction defaultToString(option: string | { value: string }) {\n return typeof option === 'string' ? option : option.value;\n}\n\nexport function useComboboxFilter<T extends { children: React.ReactNode; value: string } | string>(\n query: string,\n options: T[],\n config: UseComboboxFilterConfig<T>,\n) {\n const {\n filter = defaultFilter,\n noOptionsMessage = \"We couldn't find any matches.\",\n optionToReactKey = defaultToString,\n optionToText = defaultToString,\n\n renderOption = (option: T) => {\n if (typeof option === 'string') {\n return <Option key={option}>{option}</Option>;\n }\n\n return (\n <Option {...option} key={optionToReactKey(option)} text={optionToText(option)} value={option.value}>\n {option.children}\n </Option>\n );\n },\n } = config;\n\n const filteredOptions = React.useMemo(() => {\n const searchValue = query.trim();\n\n return options.filter(option => filter(optionToText(option), searchValue));\n }, [options, optionToText, filter, query]);\n\n if (filteredOptions.length === 0) {\n return [\n <Option aria-disabled=\"true\" key=\"no-results\" text=\"\">\n {noOptionsMessage}\n </Option>,\n ];\n }\n\n return filteredOptions.map(option => renderOption(option));\n}\n"],"names":["React","Option","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","useComboboxFilter","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,YAAY;AAmBnC,SAASC,cAAcC,UAAkB,EAAEC,KAAa;IACtD,IAAIA,UAAU,IAAI;QAChB,OAAO;IACT;IAEA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC5D;AAEA,SAASE,gBAAgBC,MAAkC;IACzD,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC3D;AAEA,OAAO,SAASC,kBACdN,KAAa,EACbO,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASX,aAAa,EACtBY,mBAAmB,+BAA+B,EAClDC,mBAAmBR,eAAe,EAClCS,eAAeT,eAAe,EAE9BU,eAAe,CAACT;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,qBAAO,oBAACP;gBAAOiB,KAAKV;eAASA;QAC/B;QAEA,qBACE,oBAACP;YAAQ,GAAGO,MAAM;YAAEU,KAAKH,iBAAiBP;YAASW,MAAMH,aAAaR;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOY,QAAQ;IAGtB,CAAC,EACF,GAAGR;IAEJ,MAAMS,kBAAkBrB,MAAMsB,OAAO,CAAC;QACpC,MAAMC,cAAcnB,MAAMoB,IAAI;QAE9B,OAAOb,QAAQE,MAAM,CAACL,CAAAA,SAAUK,OAAOG,aAAaR,SAASe;IAC/D,GAAG;QAACZ;QAASK;QAAcH;QAAQT;KAAM;IAEzC,IAAIiB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACL,oBAACxB;gBAAOyB,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDL;SAEJ;IACH;IAEA,OAAOO,gBAAgBM,GAAG,CAACnB,CAAAA,SAAUS,aAAaT;AACpD"}
|
package/lib/index.js
CHANGED
|
@@ -7,3 +7,4 @@ export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstab
|
|
|
7
7
|
export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './Combobox';
|
|
8
8
|
export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './Dropdown';
|
|
9
9
|
export { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './OptionGroup';
|
|
10
|
+
export { useComboboxFilter } from './hooks/useComboboxFilter';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n"],"names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,6BAA6B;AAE9D,SAASC,eAAe,QAAQ,4BAA4B;AAE5D,SAASC,wBAAwB,QAAQ,sCAAsC;AAC/E,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY;AAEnB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAElB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AASpB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AASpB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB"}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n"],"names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,6BAA6B;AAE9D,SAASC,eAAe,QAAQ,4BAA4B;AAE5D,SAASC,wBAAwB,QAAQ,sCAAsC;AAC/E,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY;AAEnB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAElB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AASpB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AASpB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAIvB,SAASC,iBAAiB,QAAQ,4BAA4B"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "useComboboxFilter", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return useComboboxFilter;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
+
const _Option = require("../Option");
|
|
14
|
+
function defaultFilter(optionText, query) {
|
|
15
|
+
if (query === '') {
|
|
16
|
+
return true;
|
|
17
|
+
}
|
|
18
|
+
return optionText.toLowerCase().includes(query.toLowerCase());
|
|
19
|
+
}
|
|
20
|
+
function defaultToString(option) {
|
|
21
|
+
return typeof option === 'string' ? option : option.value;
|
|
22
|
+
}
|
|
23
|
+
function useComboboxFilter(query, options, config) {
|
|
24
|
+
const { filter = defaultFilter, noOptionsMessage = "We couldn't find any matches.", optionToReactKey = defaultToString, optionToText = defaultToString, renderOption = (option)=>{
|
|
25
|
+
if (typeof option === 'string') {
|
|
26
|
+
return /*#__PURE__*/ _react.createElement(_Option.Option, {
|
|
27
|
+
key: option
|
|
28
|
+
}, option);
|
|
29
|
+
}
|
|
30
|
+
return /*#__PURE__*/ _react.createElement(_Option.Option, {
|
|
31
|
+
...option,
|
|
32
|
+
key: optionToReactKey(option),
|
|
33
|
+
text: optionToText(option),
|
|
34
|
+
value: option.value
|
|
35
|
+
}, option.children);
|
|
36
|
+
} } = config;
|
|
37
|
+
const filteredOptions = _react.useMemo(()=>{
|
|
38
|
+
const searchValue = query.trim();
|
|
39
|
+
return options.filter((option)=>filter(optionToText(option), searchValue));
|
|
40
|
+
}, [
|
|
41
|
+
options,
|
|
42
|
+
optionToText,
|
|
43
|
+
filter,
|
|
44
|
+
query
|
|
45
|
+
]);
|
|
46
|
+
if (filteredOptions.length === 0) {
|
|
47
|
+
return [
|
|
48
|
+
/*#__PURE__*/ _react.createElement(_Option.Option, {
|
|
49
|
+
"aria-disabled": "true",
|
|
50
|
+
key: "no-results",
|
|
51
|
+
text: ""
|
|
52
|
+
}, noOptionsMessage)
|
|
53
|
+
];
|
|
54
|
+
}
|
|
55
|
+
return filteredOptions.map((option)=>renderOption(option));
|
|
56
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useComboboxFilter.js"],"sourcesContent":["import * as React from 'react';\nimport { Option } from '../Option';\nfunction defaultFilter(optionText, query) {\n if (query === '') {\n return true;\n }\n return optionText.toLowerCase().includes(query.toLowerCase());\n}\nfunction defaultToString(option) {\n return typeof option === 'string' ? option : option.value;\n}\nexport function useComboboxFilter(query, options, config) {\n const { filter = defaultFilter, noOptionsMessage = \"We couldn't find any matches.\", optionToReactKey = defaultToString, optionToText = defaultToString, renderOption = (option)=>{\n if (typeof option === 'string') {\n return /*#__PURE__*/ React.createElement(Option, {\n key: option\n }, option);\n }\n return /*#__PURE__*/ React.createElement(Option, {\n ...option,\n key: optionToReactKey(option),\n text: optionToText(option),\n value: option.value\n }, option.children);\n } } = config;\n const filteredOptions = React.useMemo(()=>{\n const searchValue = query.trim();\n return options.filter((option)=>filter(optionToText(option), searchValue));\n }, [\n options,\n optionToText,\n filter,\n query\n ]);\n if (filteredOptions.length === 0) {\n return [\n /*#__PURE__*/ React.createElement(Option, {\n \"aria-disabled\": \"true\",\n key: \"no-results\",\n text: \"\"\n }, noOptionsMessage)\n ];\n }\n return filteredOptions.map((option)=>renderOption(option));\n}\n"],"names":["useComboboxFilter","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","React","createElement","Option","key","text","children","filteredOptions","useMemo","searchValue","trim","length","map"],"mappings":";;;;+BAWgBA;;;eAAAA;;;;iEAXO;wBACA;AACvB,SAASC,cAAcC,UAAU,EAAEC,KAAK;IACpC,IAAIA,UAAU,IAAI;QACd,OAAO;IACX;IACA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC9D;AACA,SAASE,gBAAgBC,MAAM;IAC3B,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC7D;AACO,SAASR,kBAAkBG,KAAK,EAAEM,OAAO,EAAEC,MAAM;IACpD,MAAM,EAAEC,SAASV,aAAa,EAAEW,mBAAmB,+BAA+B,EAAEC,mBAAmBP,eAAe,EAAEQ,eAAeR,eAAe,EAAES,eAAe,CAACR;QACpK,IAAI,OAAOA,WAAW,UAAU;YAC5B,OAAO,WAAW,GAAGS,OAAMC,aAAa,CAACC,cAAM,EAAE;gBAC7CC,KAAKZ;YACT,GAAGA;QACP;QACA,OAAO,WAAW,GAAGS,OAAMC,aAAa,CAACC,cAAM,EAAE;YAC7C,GAAGX,MAAM;YACTY,KAAKN,iBAAiBN;YACtBa,MAAMN,aAAaP;YACnBC,OAAOD,OAAOC,KAAK;QACvB,GAAGD,OAAOc,QAAQ;IACtB,CAAC,EAAE,GAAGX;IACN,MAAMY,kBAAkBN,OAAMO,OAAO,CAAC;QAClC,MAAMC,cAAcrB,MAAMsB,IAAI;QAC9B,OAAOhB,QAAQE,MAAM,CAAC,CAACJ,SAASI,OAAOG,aAAaP,SAASiB;IACjE,GAAG;QACCf;QACAK;QACAH;QACAR;KACH;IACD,IAAImB,gBAAgBI,MAAM,KAAK,GAAG;QAC9B,OAAO;YACH,WAAW,GAAGV,OAAMC,aAAa,CAACC,cAAM,EAAE;gBACtC,iBAAiB;gBACjBC,KAAK;gBACLC,MAAM;YACV,GAAGR;SACN;IACL;IACA,OAAOU,gBAAgBK,GAAG,CAAC,CAACpB,SAASQ,aAAaR;AACtD"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -95,6 +95,9 @@ _export(exports, {
|
|
|
95
95
|
},
|
|
96
96
|
useOptionGroup_unstable: function() {
|
|
97
97
|
return _OptionGroup.useOptionGroup_unstable;
|
|
98
|
+
},
|
|
99
|
+
useComboboxFilter: function() {
|
|
100
|
+
return _useComboboxFilter.useComboboxFilter;
|
|
98
101
|
}
|
|
99
102
|
});
|
|
100
103
|
const _ComboboxContext = require("./contexts/ComboboxContext");
|
|
@@ -106,3 +109,4 @@ const _Option = require("./Option");
|
|
|
106
109
|
const _Combobox = require("./Combobox");
|
|
107
110
|
const _Dropdown = require("./Dropdown");
|
|
108
111
|
const _OptionGroup = require("./OptionGroup");
|
|
112
|
+
const _useComboboxFilter = require("./hooks/useComboboxFilter");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from './Listbox';\nexport { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable } from './Option';\nexport { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './Combobox';\nexport { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './Dropdown';\nexport { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './OptionGroup';\n"],"names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable"],"mappings":";;;;;;;;;;;IAASA,gBAAgB;eAAhBA,iCAAgB;;IAChBC,eAAe;eAAfA,+BAAe;;IACfC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,uBAAuB;eAAvBA,gDAAuB;;IACvBC,OAAO;eAAPA,gBAAO;;IAAEC,iBAAiB;eAAjBA,0BAAiB;;IAAEC,sBAAsB;eAAtBA,+BAAsB;;IAAEC,yBAAyB;eAAzBA,kCAAyB;;IAAEC,mBAAmB;eAAnBA,4BAAmB;;IAClGC,MAAM;eAANA,cAAM;;IAAEC,gBAAgB;eAAhBA,wBAAgB;;IAAEC,qBAAqB;eAArBA,6BAAqB;;IAAEC,wBAAwB;eAAxBA,gCAAwB;;IAAEC,kBAAkB;eAAlBA,0BAAkB;;IAC7FC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,WAAW;eAAXA,wBAAW;;IAAEC,qBAAqB;eAArBA,kCAAqB;;IAAEC,0BAA0B;eAA1BA,uCAA0B;;IAAEC,6BAA6B;eAA7BA,0CAA6B;;IAAEC,uBAAuB;eAAvBA,oCAAuB;;;
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from './Listbox';\nexport { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable } from './Option';\nexport { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './Combobox';\nexport { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './Dropdown';\nexport { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './OptionGroup';\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n"],"names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter"],"mappings":";;;;;;;;;;;IAASA,gBAAgB;eAAhBA,iCAAgB;;IAChBC,eAAe;eAAfA,+BAAe;;IACfC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,uBAAuB;eAAvBA,gDAAuB;;IACvBC,OAAO;eAAPA,gBAAO;;IAAEC,iBAAiB;eAAjBA,0BAAiB;;IAAEC,sBAAsB;eAAtBA,+BAAsB;;IAAEC,yBAAyB;eAAzBA,kCAAyB;;IAAEC,mBAAmB;eAAnBA,4BAAmB;;IAClGC,MAAM;eAANA,cAAM;;IAAEC,gBAAgB;eAAhBA,wBAAgB;;IAAEC,qBAAqB;eAArBA,6BAAqB;;IAAEC,wBAAwB;eAAxBA,gCAAwB;;IAAEC,kBAAkB;eAAlBA,0BAAkB;;IAC7FC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,WAAW;eAAXA,wBAAW;;IAAEC,qBAAqB;eAArBA,kCAAqB;;IAAEC,0BAA0B;eAA1BA,uCAA0B;;IAAEC,6BAA6B;eAA7BA,0CAA6B;;IAAEC,uBAAuB;eAAvBA,oCAAuB;;IACtHC,iBAAiB;eAAjBA,oCAAiB;;;iCATO;gCACD;0CACS;yCACD;yBAC2E;wBACL;0BACU;0BACA;6BACe;mCACrG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-combobox",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.7.0",
|
|
4
4
|
"description": "Fluent UI React Combobox component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -34,16 +34,16 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
37
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
38
|
-
"@fluentui/react-field": "^9.1.
|
|
37
|
+
"@fluentui/react-context-selector": "^9.1.49",
|
|
38
|
+
"@fluentui/react-field": "^9.1.50",
|
|
39
39
|
"@fluentui/react-icons": "^2.0.224",
|
|
40
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
41
|
-
"@fluentui/react-portal": "^9.4.
|
|
42
|
-
"@fluentui/react-positioning": "^9.12.
|
|
43
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
44
|
-
"@fluentui/react-tabster": "^9.17.
|
|
40
|
+
"@fluentui/react-jsx-runtime": "^9.0.27",
|
|
41
|
+
"@fluentui/react-portal": "^9.4.10",
|
|
42
|
+
"@fluentui/react-positioning": "^9.12.4",
|
|
43
|
+
"@fluentui/react-shared-contexts": "^9.14.0",
|
|
44
|
+
"@fluentui/react-tabster": "^9.17.3",
|
|
45
45
|
"@fluentui/react-theme": "^9.1.16",
|
|
46
|
-
"@fluentui/react-utilities": "^9.16.
|
|
46
|
+
"@fluentui/react-utilities": "^9.16.1",
|
|
47
47
|
"@griffel/react": "^1.5.14",
|
|
48
48
|
"@swc/helpers": "^0.5.1"
|
|
49
49
|
},
|