@fluentui/react-tag-picker 9.7.2 → 9.7.4
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 +32 -2
- package/dist/index.d.ts +7 -6
- 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 +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,42 @@
|
|
|
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, 07 Aug 2025 09:59:09 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.7.4)
|
|
8
|
+
|
|
9
|
+
Thu, 07 Aug 2025 09:59:09 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.7.3..@fluentui/react-tag-picker_v9.7.4)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: migrate to R19 compatible JSX.* namespace types ([PR #34923](https://github.com/microsoft/fluentui/pull/34923) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.23.2 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
17
|
+
- Bump @fluentui/react-portal to v9.8.0 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.26.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
19
|
+
- Bump @fluentui/react-aria to v9.16.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
20
|
+
- Bump @fluentui/react-combobox to v9.16.4 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tags to v9.7.4 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
22
|
+
- Bump @fluentui/react-context-selector to v9.2.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
23
|
+
- Bump @fluentui/react-positioning to v9.20.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
24
|
+
- Bump @fluentui/react-field to v9.4.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
25
|
+
|
|
26
|
+
## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.7.3)
|
|
27
|
+
|
|
28
|
+
Wed, 30 Jul 2025 16:55:36 GMT
|
|
29
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.7.2..@fluentui/react-tag-picker_v9.7.3)
|
|
30
|
+
|
|
31
|
+
### Patches
|
|
32
|
+
|
|
33
|
+
- Bump @fluentui/react-aria to v9.16.2 ([PR #34945](https://github.com/microsoft/fluentui/pull/34945) by beachball)
|
|
34
|
+
- Bump @fluentui/react-combobox to v9.16.3 ([PR #34945](https://github.com/microsoft/fluentui/pull/34945) by beachball)
|
|
35
|
+
- Bump @fluentui/react-tags to v9.7.3 ([PR #34945](https://github.com/microsoft/fluentui/pull/34945) by beachball)
|
|
36
|
+
|
|
7
37
|
## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.7.2)
|
|
8
38
|
|
|
9
|
-
Wed, 30 Jul 2025
|
|
39
|
+
Wed, 30 Jul 2025 13:10:57 GMT
|
|
10
40
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.7.1..@fluentui/react-tag-picker_v9.7.2)
|
|
11
41
|
|
|
12
42
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ import type { EventData } from '@fluentui/react-utilities';
|
|
|
13
13
|
import type { EventHandler } from '@fluentui/react-utilities';
|
|
14
14
|
import type { ExtractSlotProps } from '@fluentui/react-utilities';
|
|
15
15
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
16
|
+
import type { JSXElement } from '@fluentui/react-utilities';
|
|
16
17
|
import type { Listbox } from '@fluentui/react-combobox';
|
|
17
18
|
import type { ListboxContextValue } from '@fluentui/react-combobox';
|
|
18
19
|
import { OptionGroupProps } from '@fluentui/react-combobox';
|
|
@@ -30,7 +31,7 @@ import type { TagGroupState } from '@fluentui/react-tags';
|
|
|
30
31
|
/**
|
|
31
32
|
* Render the final JSX of Picker
|
|
32
33
|
*/
|
|
33
|
-
export declare const renderTagPicker_unstable: (state: TagPickerState, contexts: TagPickerContextValues) =>
|
|
34
|
+
export declare const renderTagPicker_unstable: (state: TagPickerState, contexts: TagPickerContextValues) => JSXElement;
|
|
34
35
|
|
|
35
36
|
/**
|
|
36
37
|
* Render the final JSX of PickerButton
|
|
@@ -62,7 +63,7 @@ export declare const renderTagPickerOption_unstable: (state: TagPickerOptionStat
|
|
|
62
63
|
/**
|
|
63
64
|
* Render the final JSX of TagPickerOptionGroup
|
|
64
65
|
*/
|
|
65
|
-
export declare const renderTagPickerOptionGroup: (state: TagPickerOptionGroupState) =>
|
|
66
|
+
export declare const renderTagPickerOptionGroup: (state: TagPickerOptionGroupState) => JSXElement;
|
|
66
67
|
|
|
67
68
|
/**
|
|
68
69
|
* TagPicker component -
|
|
@@ -314,7 +315,7 @@ export declare type TagPickerProps = ComponentProps<TagPickerSlots> & Pick<Combo
|
|
|
314
315
|
/**
|
|
315
316
|
* Can contain two children including a trigger and a popover
|
|
316
317
|
*/
|
|
317
|
-
children: [
|
|
318
|
+
children: [JSXElement, JSXElement | undefined | false] | JSXElement;
|
|
318
319
|
/**
|
|
319
320
|
* TagPickers are rendered out of DOM order on `document.body` by default,
|
|
320
321
|
* use this to render the popover in DOM order
|
|
@@ -381,7 +382,7 @@ export declare const useTagPickerControl_unstable: (props: TagPickerControlProps
|
|
|
381
382
|
*/
|
|
382
383
|
export declare const useTagPickerControlStyles_unstable: (state: TagPickerControlState) => TagPickerControlState;
|
|
383
384
|
|
|
384
|
-
export declare function useTagPickerFilter({ filter: filterOverride, noOptionsElement, renderOption, query, options, }: UseTagPickerFilterConfig):
|
|
385
|
+
export declare function useTagPickerFilter({ filter: filterOverride, noOptionsElement, renderOption, query, options, }: UseTagPickerFilterConfig): JSXElement[];
|
|
385
386
|
|
|
386
387
|
declare type UseTagPickerFilterConfig = {
|
|
387
388
|
query: string;
|
|
@@ -392,9 +393,9 @@ declare type UseTagPickerFilterConfig = {
|
|
|
392
393
|
*/
|
|
393
394
|
filter?: (option: string, index: number) => boolean;
|
|
394
395
|
/** Provides an element to be displayed when there are no options. */
|
|
395
|
-
noOptionsElement:
|
|
396
|
+
noOptionsElement: JSXElement;
|
|
396
397
|
/** Provides a custom render for the option. */
|
|
397
|
-
renderOption?: (option: string) =>
|
|
398
|
+
renderOption?: (option: string) => JSXElement;
|
|
398
399
|
};
|
|
399
400
|
|
|
400
401
|
/**
|
|
@@ -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.4",
|
|
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.
|
|
31
|
+
"@fluentui/react-jsx-runtime": "^9.1.5",
|
|
32
32
|
"@fluentui/react-shared-contexts": "^9.24.1",
|
|
33
33
|
"@fluentui/react-theme": "^9.2.0",
|
|
34
|
-
"@fluentui/react-utilities": "^9.23.
|
|
35
|
-
"@fluentui/react-portal": "^9.
|
|
36
|
-
"@fluentui/react-tabster": "^9.26.
|
|
37
|
-
"@fluentui/react-aria": "^9.16.
|
|
34
|
+
"@fluentui/react-utilities": "^9.23.2",
|
|
35
|
+
"@fluentui/react-portal": "^9.8.0",
|
|
36
|
+
"@fluentui/react-tabster": "^9.26.3",
|
|
37
|
+
"@fluentui/react-aria": "^9.16.3",
|
|
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.4",
|
|
40
|
+
"@fluentui/react-tags": "^9.7.4",
|
|
41
|
+
"@fluentui/react-context-selector": "^9.2.5",
|
|
42
|
+
"@fluentui/react-positioning": "^9.20.3",
|
|
43
43
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
44
|
-
"@fluentui/react-field": "^9.4.
|
|
44
|
+
"@fluentui/react-field": "^9.4.3",
|
|
45
45
|
"@griffel/react": "^1.5.22",
|
|
46
46
|
"@swc/helpers": "^0.5.1"
|
|
47
47
|
},
|