@fluentui/react-tag-picker 9.7.3 → 9.7.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +40 -2
- package/dist/index.d.ts +7 -8
- package/lib/components/TagPicker/TagPicker.types.js.map +1 -1
- package/lib/components/TagPicker/renderTagPicker.js +1 -1
- package/lib/components/TagPicker/renderTagPicker.js.map +1 -1
- package/lib/components/TagPickerOptionGroup/renderTagPickerOptionGroup.js.map +1 -1
- package/lib/utils/useTagPickerFilter.js.map +1 -1
- package/lib-commonjs/components/TagPicker/TagPicker.types.js.map +1 -1
- package/lib-commonjs/components/TagPicker/renderTagPicker.js +1 -1
- package/lib-commonjs/components/TagPicker/renderTagPicker.js.map +1 -1
- package/lib-commonjs/components/TagPickerOptionGroup/renderTagPickerOptionGroup.js.map +1 -1
- package/lib-commonjs/utils/useTagPickerFilter.js.map +1 -1
- package/package.json +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,50 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tag-picker
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 21 Aug 2025 12:20:25 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.7.5)
|
|
8
|
+
|
|
9
|
+
Thu, 21 Aug 2025 12:20:25 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.7.4..@fluentui/react-tag-picker_v9.7.5)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
17
|
+
- Bump @fluentui/react-portal to v9.8.1 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
19
|
+
- Bump @fluentui/react-aria to v9.16.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
20
|
+
- Bump @fluentui/react-combobox to v9.16.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tags to v9.7.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
22
|
+
- Bump @fluentui/react-context-selector to v9.2.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
23
|
+
- Bump @fluentui/react-positioning to v9.20.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
24
|
+
- Bump @fluentui/react-field to v9.4.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
25
|
+
|
|
26
|
+
## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.7.4)
|
|
27
|
+
|
|
28
|
+
Thu, 07 Aug 2025 10:03:28 GMT
|
|
29
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.7.3..@fluentui/react-tag-picker_v9.7.4)
|
|
30
|
+
|
|
31
|
+
### Patches
|
|
32
|
+
|
|
33
|
+
- fix: migrate to R19 compatible JSX.* namespace types ([PR #34923](https://github.com/microsoft/fluentui/pull/34923) by martinhochel@microsoft.com)
|
|
34
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
35
|
+
- Bump @fluentui/react-utilities to v9.23.2 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
36
|
+
- Bump @fluentui/react-portal to v9.8.0 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
37
|
+
- Bump @fluentui/react-tabster to v9.26.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
38
|
+
- Bump @fluentui/react-aria to v9.16.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
39
|
+
- Bump @fluentui/react-combobox to v9.16.4 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
40
|
+
- Bump @fluentui/react-tags to v9.7.4 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
41
|
+
- Bump @fluentui/react-context-selector to v9.2.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
42
|
+
- Bump @fluentui/react-positioning to v9.20.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
43
|
+
- Bump @fluentui/react-field to v9.4.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
44
|
+
|
|
7
45
|
## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.7.3)
|
|
8
46
|
|
|
9
|
-
Wed, 30 Jul 2025 16:
|
|
47
|
+
Wed, 30 Jul 2025 16:55:36 GMT
|
|
10
48
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.7.2..@fluentui/react-tag-picker_v9.7.3)
|
|
11
49
|
|
|
12
50
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
|
|
3
1
|
import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
|
|
4
2
|
import { ComboboxBaseState } from '@fluentui/react-combobox';
|
|
5
3
|
import { ComboboxProps } from '@fluentui/react-combobox';
|
|
@@ -13,6 +11,7 @@ import type { EventData } from '@fluentui/react-utilities';
|
|
|
13
11
|
import type { EventHandler } from '@fluentui/react-utilities';
|
|
14
12
|
import type { ExtractSlotProps } from '@fluentui/react-utilities';
|
|
15
13
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
14
|
+
import type { JSXElement } from '@fluentui/react-utilities';
|
|
16
15
|
import type { Listbox } from '@fluentui/react-combobox';
|
|
17
16
|
import type { ListboxContextValue } from '@fluentui/react-combobox';
|
|
18
17
|
import { OptionGroupProps } from '@fluentui/react-combobox';
|
|
@@ -30,7 +29,7 @@ import type { TagGroupState } from '@fluentui/react-tags';
|
|
|
30
29
|
/**
|
|
31
30
|
* Render the final JSX of Picker
|
|
32
31
|
*/
|
|
33
|
-
export declare const renderTagPicker_unstable: (state: TagPickerState, contexts: TagPickerContextValues) =>
|
|
32
|
+
export declare const renderTagPicker_unstable: (state: TagPickerState, contexts: TagPickerContextValues) => JSXElement;
|
|
34
33
|
|
|
35
34
|
/**
|
|
36
35
|
* Render the final JSX of PickerButton
|
|
@@ -62,7 +61,7 @@ export declare const renderTagPickerOption_unstable: (state: TagPickerOptionStat
|
|
|
62
61
|
/**
|
|
63
62
|
* Render the final JSX of TagPickerOptionGroup
|
|
64
63
|
*/
|
|
65
|
-
export declare const renderTagPickerOptionGroup: (state: TagPickerOptionGroupState) =>
|
|
64
|
+
export declare const renderTagPickerOptionGroup: (state: TagPickerOptionGroupState) => JSXElement;
|
|
66
65
|
|
|
67
66
|
/**
|
|
68
67
|
* TagPicker component -
|
|
@@ -314,7 +313,7 @@ export declare type TagPickerProps = ComponentProps<TagPickerSlots> & Pick<Combo
|
|
|
314
313
|
/**
|
|
315
314
|
* Can contain two children including a trigger and a popover
|
|
316
315
|
*/
|
|
317
|
-
children: [
|
|
316
|
+
children: [JSXElement, JSXElement | undefined | false] | JSXElement;
|
|
318
317
|
/**
|
|
319
318
|
* TagPickers are rendered out of DOM order on `document.body` by default,
|
|
320
319
|
* use this to render the popover in DOM order
|
|
@@ -381,7 +380,7 @@ export declare const useTagPickerControl_unstable: (props: TagPickerControlProps
|
|
|
381
380
|
*/
|
|
382
381
|
export declare const useTagPickerControlStyles_unstable: (state: TagPickerControlState) => TagPickerControlState;
|
|
383
382
|
|
|
384
|
-
export declare function useTagPickerFilter({ filter: filterOverride, noOptionsElement, renderOption, query, options, }: UseTagPickerFilterConfig):
|
|
383
|
+
export declare function useTagPickerFilter({ filter: filterOverride, noOptionsElement, renderOption, query, options, }: UseTagPickerFilterConfig): JSXElement[];
|
|
385
384
|
|
|
386
385
|
declare type UseTagPickerFilterConfig = {
|
|
387
386
|
query: string;
|
|
@@ -392,9 +391,9 @@ declare type UseTagPickerFilterConfig = {
|
|
|
392
391
|
*/
|
|
393
392
|
filter?: (option: string, index: number) => boolean;
|
|
394
393
|
/** Provides an element to be displayed when there are no options. */
|
|
395
|
-
noOptionsElement:
|
|
394
|
+
noOptionsElement: JSXElement;
|
|
396
395
|
/** Provides a custom render for the option. */
|
|
397
|
-
renderOption?: (option: string) =>
|
|
396
|
+
renderOption?: (option: string) => JSXElement;
|
|
398
397
|
};
|
|
399
398
|
|
|
400
399
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPicker/TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxProps, ComboboxState, ListboxContextValue } from '@fluentui/react-combobox';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\n\nexport type TagPickerSlots = {};\n\nexport type TagPickerSize = 'medium' | 'large' | 'extra-large';\n\n/**\n * Event data for the `onOptionSelect` event.\n *\n * * value - The value of the selected option that triggered the event\n * * selectedOptions - The list of selected options\n */\nexport type TagPickerOnOptionSelectData = {\n value: string;\n selectedOptions: string[];\n} & (EventData<'click', React.MouseEvent<HTMLDivElement>> | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>);\n\nexport type TagPickerOnOpenChangeData = { open: boolean } & (\n | EventData<'click', React.MouseEvent<HTMLDivElement>>\n | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>\n);\n\n/**\n * Picker Props\n */\nexport type TagPickerProps = ComponentProps<TagPickerSlots> &\n Pick<\n ComboboxProps,\n 'positioning' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open'\n > &\n Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {\n /**\n * By default, when a single children is provided, the TagPicker will assume that the children\n * is a popover. By setting this prop to true, the children will be treated as a trigger instead.\n *\n * @default false\n */\n noPopover?: boolean;\n onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;\n onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;\n\n /**\n * Can contain two children including a trigger and a popover\n */\n
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPicker/TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, JSXElement } from '@fluentui/react-utilities';\nimport type { ComboboxProps, ComboboxState, ListboxContextValue } from '@fluentui/react-combobox';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\n\nexport type TagPickerSlots = {};\n\nexport type TagPickerSize = 'medium' | 'large' | 'extra-large';\n\n/**\n * Event data for the `onOptionSelect` event.\n *\n * * value - The value of the selected option that triggered the event\n * * selectedOptions - The list of selected options\n */\nexport type TagPickerOnOptionSelectData = {\n value: string;\n selectedOptions: string[];\n} & (EventData<'click', React.MouseEvent<HTMLDivElement>> | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>);\n\nexport type TagPickerOnOpenChangeData = { open: boolean } & (\n | EventData<'click', React.MouseEvent<HTMLDivElement>>\n | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>\n);\n\n/**\n * Picker Props\n */\nexport type TagPickerProps = ComponentProps<TagPickerSlots> &\n Pick<\n ComboboxProps,\n 'positioning' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open'\n > &\n Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {\n /**\n * By default, when a single children is provided, the TagPicker will assume that the children\n * is a popover. By setting this prop to true, the children will be treated as a trigger instead.\n *\n * @default false\n */\n noPopover?: boolean;\n onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;\n onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;\n\n /**\n * Can contain two children including a trigger and a popover\n */\n children: [JSXElement, JSXElement | undefined | false] | JSXElement;\n /**\n * TagPickers are rendered out of DOM order on `document.body` by default,\n * use this to render the popover in DOM order\n *\n * @default false\n */\n inline?: boolean;\n };\n\n/**\n * State used in rendering Picker\n */\nexport type TagPickerState = ComponentState<TagPickerSlots> &\n Pick<\n ComboboxState,\n | 'open'\n | 'activeDescendantController'\n | 'mountNode'\n | 'onOptionClick'\n | 'registerOption'\n | 'selectedOptions'\n | 'selectOption'\n | 'value'\n | 'setValue'\n | 'setOpen'\n | 'setHasFocus'\n | 'appearance'\n | 'clearSelection'\n | 'getOptionById'\n | 'getOptionsMatchingValue'\n | 'disabled'\n > &\n Pick<\n TagPickerContextValue,\n | 'triggerRef'\n | 'secondaryActionRef'\n | 'popoverId'\n | 'popoverRef'\n | 'targetRef'\n | 'tagPickerGroupRef'\n | 'size'\n | 'noPopover'\n > & {\n trigger: React.ReactNode;\n popover?: React.ReactNode;\n inline: boolean;\n };\n\nexport type TagPickerContextValues = {\n picker: TagPickerContextValue;\n activeDescendant: ActiveDescendantContextValue;\n listbox: ListboxContextValue;\n};\n"],"names":[],"mappings":"AAiGA,WAIE"}
|
|
@@ -2,8 +2,8 @@ import * as React from 'react';
|
|
|
2
2
|
import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
|
|
3
3
|
import { ListboxProvider } from '@fluentui/react-combobox';
|
|
4
4
|
import { Portal } from '@fluentui/react-portal';
|
|
5
|
-
import { TagPickerContextProvider } from '../../contexts/TagPickerContext';
|
|
6
5
|
import { assertSlots } from '@fluentui/react-utilities';
|
|
6
|
+
import { TagPickerContextProvider } from '../../contexts/TagPickerContext';
|
|
7
7
|
/**
|
|
8
8
|
* Render the final JSX of Picker
|
|
9
9
|
*/ export const renderTagPicker_unstable = (state, contexts)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPicker/renderTagPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerState, TagPickerContextValues, TagPickerSlots } from './TagPicker.types';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ListboxProvider } from '@fluentui/react-combobox';\nimport { Portal } from '@fluentui/react-portal';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPicker/renderTagPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerState, TagPickerContextValues, TagPickerSlots } from './TagPicker.types';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ListboxProvider } from '@fluentui/react-combobox';\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TagPickerContextProvider } from '../../contexts/TagPickerContext';\n\n/**\n * Render the final JSX of Picker\n */\n\nexport const renderTagPicker_unstable = (state: TagPickerState, contexts: TagPickerContextValues): JSXElement => {\n assertSlots<TagPickerSlots>(state);\n return (\n <TagPickerContextProvider value={contexts.picker}>\n <ActiveDescendantContextProvider value={contexts.activeDescendant}>\n <ListboxProvider value={contexts.listbox}>\n {state.trigger}\n {state.inline ? state.popover : <Portal mountNode={state.mountNode}>{state.popover}</Portal>}\n </ListboxProvider>\n </ActiveDescendantContextProvider>\n </TagPickerContextProvider>\n );\n};\n"],"names":["React","ActiveDescendantContextProvider","ListboxProvider","Portal","assertSlots","TagPickerContextProvider","renderTagPicker_unstable","state","contexts","value","picker","activeDescendant","listbox","trigger","inline","popover","mountNode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,+BAA+B,QAAQ,uBAAuB;AACvE,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,wBAAwB,QAAQ,kCAAkC;AAE3E;;CAEC,GAED,OAAO,MAAMC,2BAA2B,CAACC,OAAuBC;IAC9DJ,YAA4BG;IAC5B,qBACE,oBAACF;QAAyBI,OAAOD,SAASE,MAAM;qBAC9C,oBAACT;QAAgCQ,OAAOD,SAASG,gBAAgB;qBAC/D,oBAACT;QAAgBO,OAAOD,SAASI,OAAO;OACrCL,MAAMM,OAAO,EACbN,MAAMO,MAAM,GAAGP,MAAMQ,OAAO,iBAAG,oBAACZ;QAAOa,WAAWT,MAAMS,SAAS;OAAGT,MAAMQ,OAAO;AAK5F,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOptionGroup/renderTagPickerOptionGroup.tsx"],"sourcesContent":["import type { TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { renderOptionGroup_unstable } from '@fluentui/react-combobox';\n\n/**\n * Render the final JSX of TagPickerOptionGroup\n */\nexport const renderTagPickerOptionGroup: (
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOptionGroup/renderTagPickerOptionGroup.tsx"],"sourcesContent":["import type { TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { renderOptionGroup_unstable } from '@fluentui/react-combobox';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TagPickerOptionGroup\n */\nexport const renderTagPickerOptionGroup: (state: TagPickerOptionGroupState) => JSXElement = renderOptionGroup_unstable;\n"],"names":["renderOptionGroup_unstable","renderTagPickerOptionGroup"],"mappings":"AACA,SAASA,0BAA0B,QAAQ,2BAA2B;AAGtE;;CAEC,GACD,OAAO,MAAMC,6BAA+ED,2BAA2B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useTagPickerFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TagPickerOption } from '../TagPickerOption';\n\ntype UseTagPickerFilterConfig = {\n query: string;\n options: string[];\n /**\n * Provides a custom filter for the option.\n * By default the filter will check if the option includes the query.\n */\n filter?: (option: string, index: number) => boolean;\n\n /** Provides an element to be displayed when there are no options. */\n noOptionsElement:
|
|
1
|
+
{"version":3,"sources":["../src/utils/useTagPickerFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TagPickerOption } from '../TagPickerOption';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\ntype UseTagPickerFilterConfig = {\n query: string;\n options: string[];\n /**\n * Provides a custom filter for the option.\n * By default the filter will check if the option includes the query.\n */\n filter?: (option: string, index: number) => boolean;\n\n /** Provides an element to be displayed when there are no options. */\n noOptionsElement: JSXElement;\n\n /** Provides a custom render for the option. */\n renderOption?: (option: string) => JSXElement;\n};\n\nfunction defaultRenderOption(option: string) {\n return (\n <TagPickerOption value={option} key={option}>\n {option}\n </TagPickerOption>\n );\n}\n\nexport function useTagPickerFilter({\n filter: filterOverride,\n noOptionsElement,\n renderOption = defaultRenderOption,\n query,\n options,\n}: UseTagPickerFilterConfig) {\n const defaultFilter = React.useCallback(\n (option: string) => {\n const trimmedQuery = query.trim();\n if (trimmedQuery === '') {\n return true;\n }\n return option.toLowerCase().includes(trimmedQuery.toLowerCase());\n },\n [query],\n );\n const filter = filterOverride ?? defaultFilter;\n const filteredOptions = React.useMemo(\n () =>\n options.reduce<JSXElement[]>((accumulator, option, index) => {\n if (filter(option, index)) {\n accumulator.push(renderOption(option));\n }\n return accumulator;\n }, []),\n [options, renderOption, filter],\n );\n\n return filteredOptions.length === 0\n ? [noOptionsElement.key ? noOptionsElement : React.cloneElement(noOptionsElement, { key: 'no-options' })]\n : filteredOptions;\n}\n"],"names":["React","TagPickerOption","defaultRenderOption","option","value","key","useTagPickerFilter","filter","filterOverride","noOptionsElement","renderOption","query","options","defaultFilter","useCallback","trimmedQuery","trim","toLowerCase","includes","filteredOptions","useMemo","reduce","accumulator","index","push","length","cloneElement"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,qBAAqB;AAmBrD,SAASC,oBAAoBC,MAAc;IACzC,qBACE,oBAACF;QAAgBG,OAAOD;QAAQE,KAAKF;OAClCA;AAGP;AAEA,OAAO,SAASG,mBAAmB,EACjCC,QAAQC,cAAc,EACtBC,gBAAgB,EAChBC,eAAeR,mBAAmB,EAClCS,KAAK,EACLC,OAAO,EACkB;IACzB,MAAMC,gBAAgBb,MAAMc,WAAW,CACrC,CAACX;QACC,MAAMY,eAAeJ,MAAMK,IAAI;QAC/B,IAAID,iBAAiB,IAAI;YACvB,OAAO;QACT;QACA,OAAOZ,OAAOc,WAAW,GAAGC,QAAQ,CAACH,aAAaE,WAAW;IAC/D,GACA;QAACN;KAAM;IAET,MAAMJ,SAASC,2BAAAA,4BAAAA,iBAAkBK;IACjC,MAAMM,kBAAkBnB,MAAMoB,OAAO,CACnC,IACER,QAAQS,MAAM,CAAe,CAACC,aAAanB,QAAQoB;YACjD,IAAIhB,OAAOJ,QAAQoB,QAAQ;gBACzBD,YAAYE,IAAI,CAACd,aAAaP;YAChC;YACA,OAAOmB;QACT,GAAG,EAAE,GACP;QAACV;QAASF;QAAcH;KAAO;IAGjC,OAAOY,gBAAgBM,MAAM,KAAK,IAC9B;QAAChB,iBAAiBJ,GAAG,GAAGI,iCAAmBT,MAAM0B,YAAY,CAACjB,kBAAkB;YAAEJ,KAAK;QAAa;KAAG,GACvGc;AACN"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPicker/TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxProps, ComboboxState, ListboxContextValue } from '@fluentui/react-combobox';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\n\nexport type TagPickerSlots = {};\n\nexport type TagPickerSize = 'medium' | 'large' | 'extra-large';\n\n/**\n * Event data for the `onOptionSelect` event.\n *\n * * value - The value of the selected option that triggered the event\n * * selectedOptions - The list of selected options\n */\nexport type TagPickerOnOptionSelectData = {\n value: string;\n selectedOptions: string[];\n} & (EventData<'click', React.MouseEvent<HTMLDivElement>> | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>);\n\nexport type TagPickerOnOpenChangeData = { open: boolean } & (\n | EventData<'click', React.MouseEvent<HTMLDivElement>>\n | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>\n);\n\n/**\n * Picker Props\n */\nexport type TagPickerProps = ComponentProps<TagPickerSlots> &\n Pick<\n ComboboxProps,\n 'positioning' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open'\n > &\n Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {\n /**\n * By default, when a single children is provided, the TagPicker will assume that the children\n * is a popover. By setting this prop to true, the children will be treated as a trigger instead.\n *\n * @default false\n */\n noPopover?: boolean;\n onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;\n onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;\n\n /**\n * Can contain two children including a trigger and a popover\n */\n
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPicker/TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, JSXElement } from '@fluentui/react-utilities';\nimport type { ComboboxProps, ComboboxState, ListboxContextValue } from '@fluentui/react-combobox';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\n\nexport type TagPickerSlots = {};\n\nexport type TagPickerSize = 'medium' | 'large' | 'extra-large';\n\n/**\n * Event data for the `onOptionSelect` event.\n *\n * * value - The value of the selected option that triggered the event\n * * selectedOptions - The list of selected options\n */\nexport type TagPickerOnOptionSelectData = {\n value: string;\n selectedOptions: string[];\n} & (EventData<'click', React.MouseEvent<HTMLDivElement>> | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>);\n\nexport type TagPickerOnOpenChangeData = { open: boolean } & (\n | EventData<'click', React.MouseEvent<HTMLDivElement>>\n | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>\n);\n\n/**\n * Picker Props\n */\nexport type TagPickerProps = ComponentProps<TagPickerSlots> &\n Pick<\n ComboboxProps,\n 'positioning' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open'\n > &\n Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {\n /**\n * By default, when a single children is provided, the TagPicker will assume that the children\n * is a popover. By setting this prop to true, the children will be treated as a trigger instead.\n *\n * @default false\n */\n noPopover?: boolean;\n onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;\n onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;\n\n /**\n * Can contain two children including a trigger and a popover\n */\n children: [JSXElement, JSXElement | undefined | false] | JSXElement;\n /**\n * TagPickers are rendered out of DOM order on `document.body` by default,\n * use this to render the popover in DOM order\n *\n * @default false\n */\n inline?: boolean;\n };\n\n/**\n * State used in rendering Picker\n */\nexport type TagPickerState = ComponentState<TagPickerSlots> &\n Pick<\n ComboboxState,\n | 'open'\n | 'activeDescendantController'\n | 'mountNode'\n | 'onOptionClick'\n | 'registerOption'\n | 'selectedOptions'\n | 'selectOption'\n | 'value'\n | 'setValue'\n | 'setOpen'\n | 'setHasFocus'\n | 'appearance'\n | 'clearSelection'\n | 'getOptionById'\n | 'getOptionsMatchingValue'\n | 'disabled'\n > &\n Pick<\n TagPickerContextValue,\n | 'triggerRef'\n | 'secondaryActionRef'\n | 'popoverId'\n | 'popoverRef'\n | 'targetRef'\n | 'tagPickerGroupRef'\n | 'size'\n | 'noPopover'\n > & {\n trigger: React.ReactNode;\n popover?: React.ReactNode;\n inline: boolean;\n };\n\nexport type TagPickerContextValues = {\n picker: TagPickerContextValue;\n activeDescendant: ActiveDescendantContextValue;\n listbox: ListboxContextValue;\n};\n"],"names":[],"mappings":""}
|
|
@@ -13,8 +13,8 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
13
13
|
const _reactaria = require("@fluentui/react-aria");
|
|
14
14
|
const _reactcombobox = require("@fluentui/react-combobox");
|
|
15
15
|
const _reactportal = require("@fluentui/react-portal");
|
|
16
|
-
const _TagPickerContext = require("../../contexts/TagPickerContext");
|
|
17
16
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
17
|
+
const _TagPickerContext = require("../../contexts/TagPickerContext");
|
|
18
18
|
const renderTagPicker_unstable = (state, contexts)=>{
|
|
19
19
|
(0, _reactutilities.assertSlots)(state);
|
|
20
20
|
return /*#__PURE__*/ _react.createElement(_TagPickerContext.TagPickerContextProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPicker/renderTagPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerState, TagPickerContextValues, TagPickerSlots } from './TagPicker.types';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ListboxProvider } from '@fluentui/react-combobox';\nimport { Portal } from '@fluentui/react-portal';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPicker/renderTagPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerState, TagPickerContextValues, TagPickerSlots } from './TagPicker.types';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ListboxProvider } from '@fluentui/react-combobox';\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TagPickerContextProvider } from '../../contexts/TagPickerContext';\n\n/**\n * Render the final JSX of Picker\n */\n\nexport const renderTagPicker_unstable = (state: TagPickerState, contexts: TagPickerContextValues): JSXElement => {\n assertSlots<TagPickerSlots>(state);\n return (\n <TagPickerContextProvider value={contexts.picker}>\n <ActiveDescendantContextProvider value={contexts.activeDescendant}>\n <ListboxProvider value={contexts.listbox}>\n {state.trigger}\n {state.inline ? state.popover : <Portal mountNode={state.mountNode}>{state.popover}</Portal>}\n </ListboxProvider>\n </ActiveDescendantContextProvider>\n </TagPickerContextProvider>\n );\n};\n"],"names":["React","ActiveDescendantContextProvider","ListboxProvider","Portal","assertSlots","TagPickerContextProvider","renderTagPicker_unstable","state","contexts","value","picker","activeDescendant","listbox","trigger","inline","popover","mountNode"],"mappings":";;;;+BAaaM;;;;;;;iEAbU,QAAQ;2BAEiB,uBAAuB;+BACvC,2BAA2B;6BACpC,yBAAyB;gCACpB,4BAA4B;kCAEf,kCAAkC;AAMpE,iCAAiC,CAACC,OAAuBC;QAC9DJ,2BAAAA,EAA4BG;IAC5B,OAAA,WAAA,GACE,OAAA,aAAA,CAACF,0CAAAA,EAAAA;QAAyBI,OAAOD,SAASE,MAAM;qBAC9C,OAAA,aAAA,CAACT,0CAAAA,EAAAA;QAAgCQ,OAAOD,SAASG,gBAAgB;qBAC/D,OAAA,aAAA,CAACT,8BAAAA,EAAAA;QAAgBO,OAAOD,SAASI,OAAO;OACrCL,MAAMM,OAAO,EACbN,MAAMO,MAAM,GAAGP,MAAMQ,OAAO,GAAA,WAAA,GAAG,OAAA,aAAA,CAACZ,mBAAAA,EAAAA;QAAOa,WAAWT,MAAMS,SAAS;OAAGT,MAAMQ,OAAO;AAK5F,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOptionGroup/renderTagPickerOptionGroup.tsx"],"sourcesContent":["import type { TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { renderOptionGroup_unstable } from '@fluentui/react-combobox';\n\n/**\n * Render the final JSX of TagPickerOptionGroup\n */\nexport const renderTagPickerOptionGroup: (
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOptionGroup/renderTagPickerOptionGroup.tsx"],"sourcesContent":["import type { TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { renderOptionGroup_unstable } from '@fluentui/react-combobox';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TagPickerOptionGroup\n */\nexport const renderTagPickerOptionGroup: (state: TagPickerOptionGroupState) => JSXElement = renderOptionGroup_unstable;\n"],"names":["renderOptionGroup_unstable","renderTagPickerOptionGroup"],"mappings":";;;;;;;;;;+BAC2C,2BAA2B;AAM/D,MAAMC,6BAA+ED,yCAAAA,CAA2B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useTagPickerFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TagPickerOption } from '../TagPickerOption';\n\ntype UseTagPickerFilterConfig = {\n query: string;\n options: string[];\n /**\n * Provides a custom filter for the option.\n * By default the filter will check if the option includes the query.\n */\n filter?: (option: string, index: number) => boolean;\n\n /** Provides an element to be displayed when there are no options. */\n noOptionsElement:
|
|
1
|
+
{"version":3,"sources":["../src/utils/useTagPickerFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TagPickerOption } from '../TagPickerOption';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\ntype UseTagPickerFilterConfig = {\n query: string;\n options: string[];\n /**\n * Provides a custom filter for the option.\n * By default the filter will check if the option includes the query.\n */\n filter?: (option: string, index: number) => boolean;\n\n /** Provides an element to be displayed when there are no options. */\n noOptionsElement: JSXElement;\n\n /** Provides a custom render for the option. */\n renderOption?: (option: string) => JSXElement;\n};\n\nfunction defaultRenderOption(option: string) {\n return (\n <TagPickerOption value={option} key={option}>\n {option}\n </TagPickerOption>\n );\n}\n\nexport function useTagPickerFilter({\n filter: filterOverride,\n noOptionsElement,\n renderOption = defaultRenderOption,\n query,\n options,\n}: UseTagPickerFilterConfig) {\n const defaultFilter = React.useCallback(\n (option: string) => {\n const trimmedQuery = query.trim();\n if (trimmedQuery === '') {\n return true;\n }\n return option.toLowerCase().includes(trimmedQuery.toLowerCase());\n },\n [query],\n );\n const filter = filterOverride ?? defaultFilter;\n const filteredOptions = React.useMemo(\n () =>\n options.reduce<JSXElement[]>((accumulator, option, index) => {\n if (filter(option, index)) {\n accumulator.push(renderOption(option));\n }\n return accumulator;\n }, []),\n [options, renderOption, filter],\n );\n\n return filteredOptions.length === 0\n ? [noOptionsElement.key ? noOptionsElement : React.cloneElement(noOptionsElement, { key: 'no-options' })]\n : filteredOptions;\n}\n"],"names":["React","TagPickerOption","defaultRenderOption","option","value","key","useTagPickerFilter","filter","filterOverride","noOptionsElement","renderOption","query","options","defaultFilter","useCallback","trimmedQuery","trim","toLowerCase","includes","filteredOptions","useMemo","reduce","accumulator","index","push","length","cloneElement"],"mappings":";;;;+BA4BgBM;;;;;;;iEA5BO,QAAQ;iCACC,qBAAqB;AAmBrD,SAASJ,oBAAoBC,MAAc;IACzC,OAAA,WAAA,GACE,OAAA,aAAA,CAACF,gCAAAA,EAAAA;QAAgBG,OAAOD;QAAQE,KAAKF;OAClCA;AAGP;AAEO,4BAA4B,EACjCI,QAAQC,cAAc,EACtBC,gBAAgB,EAChBC,eAAeR,mBAAmB,EAClCS,KAAK,EACLC,OAAO,EACkB;IACzB,MAAMC,gBAAgBb,OAAMc,WAAW,CACrC,CAACX;QACC,MAAMY,eAAeJ,MAAMK,IAAI;QAC/B,IAAID,iBAAiB,IAAI;YACvB,OAAO;QACT;QACA,OAAOZ,OAAOc,WAAW,GAAGC,QAAQ,CAACH,aAAaE,WAAW;IAC/D,GACA;QAACN;KAAM;IAET,MAAMJ,SAASC,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,iBAAkBK;IACjC,MAAMM,kBAAkBnB,OAAMoB,OAAO,CACnC,IACER,QAAQS,MAAM,CAAe,CAACC,aAAanB,QAAQoB;YACjD,IAAIhB,OAAOJ,QAAQoB,QAAQ;gBACzBD,YAAYE,IAAI,CAACd,aAAaP;YAChC;YACA,OAAOmB;QACT,GAAG,EAAE,GACP;QAACV;QAASF;QAAcH;KAAO;IAGjC,OAAOY,gBAAgBM,MAAM,KAAK,IAC9B;QAAChB,iBAAiBJ,GAAG,GAAGI,mBAAAA,WAAAA,GAAmBT,OAAM0B,YAAY,CAACjB,kBAAkB;YAAEJ,KAAK;QAAa;KAAG,GACvGc;AACN"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tag-picker",
|
|
3
|
-
"version": "9.7.
|
|
3
|
+
"version": "9.7.5",
|
|
4
4
|
"description": "FluentUI TagPicker component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,20 +28,20 @@
|
|
|
28
28
|
"@fluentui/scripts-cypress": "*"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@fluentui/react-jsx-runtime": "^9.1.
|
|
32
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
31
|
+
"@fluentui/react-jsx-runtime": "^9.1.6",
|
|
32
|
+
"@fluentui/react-shared-contexts": "^9.25.0",
|
|
33
33
|
"@fluentui/react-theme": "^9.2.0",
|
|
34
|
-
"@fluentui/react-utilities": "^9.
|
|
35
|
-
"@fluentui/react-portal": "^9.
|
|
36
|
-
"@fluentui/react-tabster": "^9.26.
|
|
37
|
-
"@fluentui/react-aria": "^9.16.
|
|
34
|
+
"@fluentui/react-utilities": "^9.24.0",
|
|
35
|
+
"@fluentui/react-portal": "^9.8.1",
|
|
36
|
+
"@fluentui/react-tabster": "^9.26.4",
|
|
37
|
+
"@fluentui/react-aria": "^9.16.4",
|
|
38
38
|
"@fluentui/react-icons": "^2.0.245",
|
|
39
|
-
"@fluentui/react-combobox": "^9.16.
|
|
40
|
-
"@fluentui/react-tags": "^9.7.
|
|
41
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
42
|
-
"@fluentui/react-positioning": "^9.20.
|
|
39
|
+
"@fluentui/react-combobox": "^9.16.5",
|
|
40
|
+
"@fluentui/react-tags": "^9.7.5",
|
|
41
|
+
"@fluentui/react-context-selector": "^9.2.6",
|
|
42
|
+
"@fluentui/react-positioning": "^9.20.4",
|
|
43
43
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
44
|
-
"@fluentui/react-field": "^9.4.
|
|
44
|
+
"@fluentui/react-field": "^9.4.4",
|
|
45
45
|
"@griffel/react": "^1.5.22",
|
|
46
46
|
"@swc/helpers": "^0.5.1"
|
|
47
47
|
},
|