@fluentui/react-tag-picker 9.9.0 → 9.10.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 +11 -2
- package/dist/index.d.ts +16 -5
- package/lib/TagPicker.js +1 -1
- package/lib/TagPicker.js.map +1 -1
- package/lib/components/TagPicker/TagPicker.types.js +3 -2
- package/lib/components/TagPicker/TagPicker.types.js.map +1 -1
- package/lib/components/TagPicker/index.js +1 -0
- package/lib/components/TagPicker/index.js.map +1 -1
- package/lib/components/TagPicker/useTagPicker.js +6 -7
- package/lib/components/TagPicker/useTagPicker.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/TagPicker.js +3 -0
- package/lib-commonjs/TagPicker.js.map +1 -1
- package/lib-commonjs/components/TagPicker/TagPicker.types.js +3 -2
- package/lib-commonjs/components/TagPicker/TagPicker.types.js.map +1 -1
- package/lib-commonjs/components/TagPicker/index.js +4 -0
- package/lib-commonjs/components/TagPicker/index.js.map +1 -1
- package/lib-commonjs/components/TagPicker/useTagPicker.js +6 -7
- package/lib-commonjs/components/TagPicker/useTagPicker.js.map +1 -1
- package/lib-commonjs/index.js +3 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tag-picker
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 15 Jul 2026 14:10:09 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.10.0)
|
|
8
|
+
|
|
9
|
+
Wed, 15 Jul 2026 14:10:09 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.9.0..@fluentui/react-tag-picker_v9.10.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: export useTagPickerContextValues and TagPickerControlInternalSlots for headless composition ([PR #36353](https://github.com/microsoft/fluentui/pull/36353) by vgenaev@gmail.com)
|
|
15
|
+
|
|
7
16
|
## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.9.0)
|
|
8
17
|
|
|
9
|
-
Wed, 24 Jun 2026 11:
|
|
18
|
+
Wed, 24 Jun 2026 11:10:00 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.8.8..@fluentui/react-tag-picker_v9.9.0)
|
|
11
20
|
|
|
12
21
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
|
@@ -71,10 +71,19 @@ export declare const renderTagPickerOptionGroup: (state: TagPickerOptionGroupSta
|
|
|
71
71
|
export declare const TagPicker: React_2.FC<TagPickerProps>;
|
|
72
72
|
|
|
73
73
|
/**
|
|
74
|
-
* TagPicker Base Props - omits the
|
|
75
|
-
* {@link TagPickerProps} re-introduces it via
|
|
74
|
+
* TagPicker Base Props - omits the presentation-related props that the base hook does not handle:
|
|
75
|
+
* the floating-ui `positioning` prop (the styled {@link TagPickerProps} re-introduces it via
|
|
76
|
+
* `usePositioning`) as well as `size`, `appearance` and `inline` (layered on by the styled
|
|
77
|
+
* {@link useTagPicker_unstable} hook).
|
|
76
78
|
*/
|
|
77
|
-
export declare type TagPickerBaseProps = DistributiveOmit<TagPickerProps, 'positioning'>;
|
|
79
|
+
export declare type TagPickerBaseProps = DistributiveOmit<TagPickerProps, 'positioning' | 'size' | 'appearance' | 'inline'>;
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* TagPicker Base State - the state produced by the base hook, which does not interact with the
|
|
83
|
+
* `size`, `appearance` and `inline` props. These are layered on by the styled
|
|
84
|
+
* {@link useTagPicker_unstable} hook.
|
|
85
|
+
*/
|
|
86
|
+
export declare type TagPickerBaseState = Omit<TagPickerState, 'size' | 'appearance' | 'inline'>;
|
|
78
87
|
|
|
79
88
|
/**
|
|
80
89
|
* TagPickerButton component -
|
|
@@ -148,7 +157,7 @@ declare type TagPickerControlCSSProperties = React_2.CSSProperties & {
|
|
|
148
157
|
'--fui-TagPickerControl-aside-width'?: string | number;
|
|
149
158
|
};
|
|
150
159
|
|
|
151
|
-
declare type TagPickerControlInternalSlots = {
|
|
160
|
+
export declare type TagPickerControlInternalSlots = {
|
|
152
161
|
aside?: NonNullable<Slot<'span'>>;
|
|
153
162
|
};
|
|
154
163
|
|
|
@@ -390,7 +399,7 @@ export declare const useTagPicker_unstable: (props: TagPickerProps) => TagPicker
|
|
|
390
399
|
* Create the base state required to render TagPicker, without floating-ui positioning.
|
|
391
400
|
* @param props - props from this instance of TagPicker (without `positioning`)
|
|
392
401
|
*/
|
|
393
|
-
export declare const useTagPickerBase_unstable: (props: TagPickerBaseProps) =>
|
|
402
|
+
export declare const useTagPickerBase_unstable: (props: TagPickerBaseProps) => TagPickerBaseState;
|
|
394
403
|
|
|
395
404
|
/**
|
|
396
405
|
* Create the state required to render TagPickerButton.
|
|
@@ -418,6 +427,8 @@ export declare const useTagPickerButtonStyles_unstable: (state: TagPickerButtonS
|
|
|
418
427
|
|
|
419
428
|
export declare const useTagPickerContext_unstable: <T>(selector: ContextSelector<TagPickerContextValue, T>) => T;
|
|
420
429
|
|
|
430
|
+
export declare function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues;
|
|
431
|
+
|
|
421
432
|
/**
|
|
422
433
|
* Create the state required to render PickerControl.
|
|
423
434
|
*
|
package/lib/TagPicker.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable, useTagPickerBase_unstable } from './components/TagPicker/index';
|
|
1
|
+
export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable, useTagPickerBase_unstable, useTagPickerContextValues } from './components/TagPicker/index';
|
package/lib/TagPicker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/TagPicker.ts"],"sourcesContent":["export type {\n TagPickerBaseProps,\n TagPickerContextValues,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerSize,\n TagPickerSlots,\n TagPickerState,\n} from './components/TagPicker/index';\nexport {\n TagPicker,\n renderTagPicker_unstable,\n useTagPicker_unstable,\n useTagPickerBase_unstable,\n} from './components/TagPicker/index';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/TagPicker.ts"],"sourcesContent":["export type {\n TagPickerBaseProps,\n TagPickerBaseState,\n TagPickerContextValues,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerSize,\n TagPickerSlots,\n TagPickerState,\n} from './components/TagPicker/index';\nexport {\n TagPicker,\n renderTagPicker_unstable,\n useTagPicker_unstable,\n useTagPickerBase_unstable,\n useTagPickerContextValues,\n} from './components/TagPicker/index';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable","useTagPickerContextValues"],"mappings":"AAWA,SACEA,SAAS,EACTC,wBAAwB,EACxBC,qBAAqB,EACrBC,yBAAyB,EACzBC,yBAAyB,QACpB,+BAA+B"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* TagPicker Base
|
|
3
|
-
*
|
|
2
|
+
* TagPicker Base State - the state produced by the base hook, which does not interact with the
|
|
3
|
+
* `size`, `appearance` and `inline` props. These are layered on by the styled
|
|
4
|
+
* {@link useTagPicker_unstable} hook.
|
|
4
5
|
*/ export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPicker/TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n ComponentProps,\n ComponentState,\n DistributiveOmit,\n EventData,\n EventHandler,\n JSXElement,\n} 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'\n | 'disabled'\n | 'defaultOpen'\n | 'selectedOptions'\n | 'defaultSelectedOptions'\n | 'open'\n | 'disableAutoFocus'\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\n/**\n * TagPicker Base Props - omits the floating-ui `positioning` prop
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPicker/TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n ComponentProps,\n ComponentState,\n DistributiveOmit,\n EventData,\n EventHandler,\n JSXElement,\n} 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'\n | 'disabled'\n | 'defaultOpen'\n | 'selectedOptions'\n | 'defaultSelectedOptions'\n | 'open'\n | 'disableAutoFocus'\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\n/**\n * TagPicker Base Props - omits the presentation-related props that the base hook does not handle:\n * the floating-ui `positioning` prop (the styled {@link TagPickerProps} re-introduces it via\n * `usePositioning`) as well as `size`, `appearance` and `inline` (layered on by the styled\n * {@link useTagPicker_unstable} hook).\n */\nexport type TagPickerBaseProps = DistributiveOmit<TagPickerProps, 'positioning' | 'size' | 'appearance' | 'inline'>;\n\n/**\n * TagPicker Base State - the state produced by the base hook, which does not interact with the\n * `size`, `appearance` and `inline` props. These are layered on by the styled\n * {@link useTagPicker_unstable} hook.\n */\nexport type TagPickerBaseState = Omit<TagPickerState, 'size' | 'appearance' | 'inline'>;\n"],"names":[],"mappings":"AA4HA;;;;CAIC,GACD,WAAwF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPicker/index.ts"],"sourcesContent":["export { TagPicker } from './TagPicker';\nexport type {\n TagPickerBaseProps,\n TagPickerContextValues,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerSize,\n TagPickerSlots,\n TagPickerState,\n} from './TagPicker.types';\nexport { renderTagPicker_unstable } from './renderTagPicker';\nexport { useTagPicker_unstable, useTagPickerBase_unstable } from './useTagPicker';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPicker/index.ts"],"sourcesContent":["export { TagPicker } from './TagPicker';\nexport type {\n TagPickerBaseProps,\n TagPickerBaseState,\n TagPickerContextValues,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerSize,\n TagPickerSlots,\n TagPickerState,\n} from './TagPicker.types';\nexport { renderTagPicker_unstable } from './renderTagPicker';\nexport { useTagPicker_unstable, useTagPickerBase_unstable } from './useTagPicker';\nexport { useTagPickerContextValues } from './useTagPickerContextValues';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable","useTagPickerContextValues"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAYxC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,iBAAiB;AAClF,SAASC,yBAAyB,QAAQ,8BAA8B"}
|
|
@@ -22,7 +22,7 @@ const fallbackPositions = [
|
|
|
22
22
|
const secondaryActionRef = React.useRef(null);
|
|
23
23
|
const tagPickerGroupRef = React.useRef(null);
|
|
24
24
|
const passiveTargetRef = React.useRef(null);
|
|
25
|
-
const {
|
|
25
|
+
const { noPopover = false, disableAutoFocus } = props;
|
|
26
26
|
const { controller: activeDescendantController, activeParentRef, listboxRef } = useActiveDescendant({
|
|
27
27
|
matchOption: (el)=>el.classList.contains(optionClassNames.root)
|
|
28
28
|
});
|
|
@@ -48,8 +48,7 @@ const fallbackPositions = [
|
|
|
48
48
|
activeDescendantController,
|
|
49
49
|
disableAutoFocus,
|
|
50
50
|
editable: true,
|
|
51
|
-
multiselect: true
|
|
52
|
-
size: 'medium'
|
|
51
|
+
multiselect: true
|
|
53
52
|
});
|
|
54
53
|
const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);
|
|
55
54
|
return {
|
|
@@ -65,15 +64,12 @@ const fallbackPositions = [
|
|
|
65
64
|
secondaryActionRef,
|
|
66
65
|
tagPickerGroupRef,
|
|
67
66
|
targetRef: passiveTargetRef,
|
|
68
|
-
size,
|
|
69
|
-
inline,
|
|
70
67
|
open: comboboxState.open,
|
|
71
68
|
mountNode: comboboxState.mountNode,
|
|
72
69
|
onOptionClick: useEventCallback((event)=>{
|
|
73
70
|
comboboxState.onOptionClick(event);
|
|
74
71
|
comboboxState.setOpen(event, false);
|
|
75
72
|
}),
|
|
76
|
-
appearance: comboboxState.appearance,
|
|
77
73
|
clearSelection: comboboxState.clearSelection,
|
|
78
74
|
getOptionById: comboboxState.getOptionById,
|
|
79
75
|
getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,
|
|
@@ -108,7 +104,7 @@ const fallbackPositions = [
|
|
|
108
104
|
*
|
|
109
105
|
* @param props - props from this instance of Picker
|
|
110
106
|
*/ export const useTagPicker_unstable = (props)=>{
|
|
111
|
-
const { positioning } = props;
|
|
107
|
+
const { positioning, size = 'medium', appearance = 'outline', inline = false } = props;
|
|
112
108
|
const { targetRef, containerRef } = usePositioning({
|
|
113
109
|
position: 'below',
|
|
114
110
|
align: 'start',
|
|
@@ -123,6 +119,9 @@ const fallbackPositions = [
|
|
|
123
119
|
const baseState = useTagPickerBase_unstable(props);
|
|
124
120
|
return {
|
|
125
121
|
...baseState,
|
|
122
|
+
size,
|
|
123
|
+
appearance,
|
|
124
|
+
inline,
|
|
126
125
|
targetRef,
|
|
127
126
|
popoverRef: useMergedRefs(baseState.popoverRef, containerRef)
|
|
128
127
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPicker/useTagPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { elementContains, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n TagPickerBaseProps,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerState,\n} from './TagPicker.types';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n/**\n * Create the base state required to render TagPicker, without floating-ui positioning.\n * @param props - props from this instance of TagPicker (without `positioning`)\n */\nexport const useTagPickerBase_unstable = (props: TagPickerBaseProps): TagPickerState => {\n const popoverId = useId('picker-listbox');\n const triggerInnerRef = React.useRef<HTMLInputElement | HTMLButtonElement>(null);\n const secondaryActionRef = React.useRef<HTMLSpanElement>(null);\n const tagPickerGroupRef = React.useRef<HTMLDivElement>(null);\n const passiveTargetRef = React.useRef<HTMLDivElement>(null);\n const { size = 'medium', inline = false, noPopover = false, disableAutoFocus } = props;\n\n const {\n controller: activeDescendantController,\n activeParentRef,\n listboxRef,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n\n const comboboxState = useComboboxBaseState({\n ...props,\n onOptionSelect: useEventCallback((event, data) =>\n props.onOptionSelect?.(event, {\n selectedOptions: data.selectedOptions,\n value: data.optionValue,\n type: event.type,\n event,\n } as TagPickerOnOptionSelectData),\n ),\n onOpenChange: useEventCallback((event, data) =>\n props.onOpenChange?.(event, {\n ...data,\n type: event.type,\n event,\n } as TagPickerOnOpenChangeData),\n ),\n activeDescendantController,\n disableAutoFocus,\n editable: true,\n multiselect: true,\n size: 'medium',\n });\n\n const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);\n return {\n activeDescendantController,\n components: {},\n trigger,\n popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n popoverId,\n noPopover,\n disabled: comboboxState.disabled,\n triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n popoverRef: useMergedRefs(listboxRef),\n secondaryActionRef,\n tagPickerGroupRef,\n targetRef: passiveTargetRef,\n size,\n inline,\n open: comboboxState.open,\n mountNode: comboboxState.mountNode,\n onOptionClick: useEventCallback(event => {\n comboboxState.onOptionClick(event);\n comboboxState.setOpen(event, false);\n }),\n appearance: comboboxState.appearance,\n clearSelection: comboboxState.clearSelection,\n getOptionById: comboboxState.getOptionById,\n getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,\n registerOption: comboboxState.registerOption,\n selectedOptions: comboboxState.selectedOptions,\n selectOption: useEventCallback((event, data) => {\n // if the option is already selected, invoke onOptionSelect callback with current selected values\n // the combobox state would unselect the option, which is not the behavior expected\n if (\n comboboxState.selectedOptions.includes(data.value) &&\n !elementContains(tagPickerGroupRef.current, event.target as Node)\n ) {\n props.onOptionSelect?.(event, {\n selectedOptions: comboboxState.selectedOptions,\n value: data.value,\n type: event.type,\n event,\n } as TagPickerOnOptionSelectData);\n return;\n }\n comboboxState.selectOption(event, data);\n }),\n setHasFocus: comboboxState.setHasFocus,\n setOpen: comboboxState.setOpen,\n setValue: comboboxState.setValue,\n value: comboboxState.value,\n };\n};\n\n/**\n * Create the state required to render Picker.\n *\n * The returned state can be modified with hooks such as usePickerStyles_unstable,\n * before being passed to renderPicker_unstable.\n *\n * @param props - props from this instance of Picker\n */\nexport const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => {\n const { positioning } = props;\n\n const { targetRef, containerRef } = usePositioning({\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions,\n matchTargetSize: 'width' as const,\n ...resolvePositioningShorthand(positioning),\n });\n\n const baseState = useTagPickerBase_unstable(props);\n\n return {\n ...baseState,\n targetRef,\n popoverRef: useMergedRefs(baseState.popoverRef, containerRef),\n };\n};\n\nconst childrenToTriggerAndPopover = (children: React.ReactNode, noPopover: boolean) => {\n const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('TagPicker must contain at least one child');\n }\n\n if (childrenArray.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('TagPicker must contain at most two children');\n }\n }\n\n if (noPopover) {\n return { trigger: childrenArray[0] };\n }\n\n let trigger: React.ReactElement | undefined = undefined;\n let popover: React.ReactElement | undefined = undefined;\n\n if (childrenArray.length === 2) {\n trigger = childrenArray[0];\n popover = childrenArray[1];\n } else if (childrenArray.length === 1) {\n popover = childrenArray[0];\n }\n\n return { trigger, popover };\n};\n"],"names":["React","elementContains","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPickerBase_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","passiveTargetRef","size","inline","noPopover","disableAutoFocus","controller","activeDescendantController","activeParentRef","listboxRef","matchOption","el","classList","contains","root","comboboxState","onOptionSelect","event","data","selectedOptions","value","optionValue","type","onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","popoverRef","targetRef","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","includes","current","target","setHasFocus","setValue","useTagPicker_unstable","positioning","containerRef","position","align","offset","crossAxis","mainAxis","matchTargetSize","baseState","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPicker/useTagPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { elementContains, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n TagPickerBaseProps,\n TagPickerBaseState,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerState,\n} from './TagPicker.types';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n/**\n * Create the base state required to render TagPicker, without floating-ui positioning.\n * @param props - props from this instance of TagPicker (without `positioning`)\n */\nexport const useTagPickerBase_unstable = (props: TagPickerBaseProps): TagPickerBaseState => {\n const popoverId = useId('picker-listbox');\n const triggerInnerRef = React.useRef<HTMLInputElement | HTMLButtonElement>(null);\n const secondaryActionRef = React.useRef<HTMLSpanElement>(null);\n const tagPickerGroupRef = React.useRef<HTMLDivElement>(null);\n const passiveTargetRef = React.useRef<HTMLDivElement>(null);\n const { noPopover = false, disableAutoFocus } = props;\n\n const {\n controller: activeDescendantController,\n activeParentRef,\n listboxRef,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n\n const comboboxState = useComboboxBaseState({\n ...props,\n onOptionSelect: useEventCallback((event, data) =>\n props.onOptionSelect?.(event, {\n selectedOptions: data.selectedOptions,\n value: data.optionValue,\n type: event.type,\n event,\n } as TagPickerOnOptionSelectData),\n ),\n onOpenChange: useEventCallback((event, data) =>\n props.onOpenChange?.(event, {\n ...data,\n type: event.type,\n event,\n } as TagPickerOnOpenChangeData),\n ),\n activeDescendantController,\n disableAutoFocus,\n editable: true,\n multiselect: true,\n });\n\n const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);\n return {\n activeDescendantController,\n components: {},\n trigger,\n popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n popoverId,\n noPopover,\n disabled: comboboxState.disabled,\n triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n popoverRef: useMergedRefs(listboxRef),\n secondaryActionRef,\n tagPickerGroupRef,\n targetRef: passiveTargetRef,\n open: comboboxState.open,\n mountNode: comboboxState.mountNode,\n onOptionClick: useEventCallback(event => {\n comboboxState.onOptionClick(event);\n comboboxState.setOpen(event, false);\n }),\n clearSelection: comboboxState.clearSelection,\n getOptionById: comboboxState.getOptionById,\n getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,\n registerOption: comboboxState.registerOption,\n selectedOptions: comboboxState.selectedOptions,\n selectOption: useEventCallback((event, data) => {\n // if the option is already selected, invoke onOptionSelect callback with current selected values\n // the combobox state would unselect the option, which is not the behavior expected\n if (\n comboboxState.selectedOptions.includes(data.value) &&\n !elementContains(tagPickerGroupRef.current, event.target as Node)\n ) {\n props.onOptionSelect?.(event, {\n selectedOptions: comboboxState.selectedOptions,\n value: data.value,\n type: event.type,\n event,\n } as TagPickerOnOptionSelectData);\n return;\n }\n comboboxState.selectOption(event, data);\n }),\n setHasFocus: comboboxState.setHasFocus,\n setOpen: comboboxState.setOpen,\n setValue: comboboxState.setValue,\n value: comboboxState.value,\n };\n};\n\n/**\n * Create the state required to render Picker.\n *\n * The returned state can be modified with hooks such as usePickerStyles_unstable,\n * before being passed to renderPicker_unstable.\n *\n * @param props - props from this instance of Picker\n */\nexport const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => {\n const { positioning, size = 'medium', appearance = 'outline', inline = false } = props;\n\n const { targetRef, containerRef } = usePositioning({\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions,\n matchTargetSize: 'width' as const,\n ...resolvePositioningShorthand(positioning),\n });\n\n const baseState = useTagPickerBase_unstable(props);\n\n return {\n ...baseState,\n size,\n appearance,\n inline,\n targetRef,\n popoverRef: useMergedRefs(baseState.popoverRef, containerRef),\n };\n};\n\nconst childrenToTriggerAndPopover = (children: React.ReactNode, noPopover: boolean) => {\n const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('TagPicker must contain at least one child');\n }\n\n if (childrenArray.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('TagPicker must contain at most two children');\n }\n }\n\n if (noPopover) {\n return { trigger: childrenArray[0] };\n }\n\n let trigger: React.ReactElement | undefined = undefined;\n let popover: React.ReactElement | undefined = undefined;\n\n if (childrenArray.length === 2) {\n trigger = childrenArray[0];\n popover = childrenArray[1];\n } else if (childrenArray.length === 1) {\n popover = childrenArray[0];\n }\n\n return { trigger, popover };\n};\n"],"names":["React","elementContains","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPickerBase_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","passiveTargetRef","noPopover","disableAutoFocus","controller","activeDescendantController","activeParentRef","listboxRef","matchOption","el","classList","contains","root","comboboxState","onOptionSelect","event","data","selectedOptions","value","optionValue","type","onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","popoverRef","targetRef","mountNode","onOptionClick","setOpen","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","includes","current","target","setHasFocus","setValue","useTagPicker_unstable","positioning","size","appearance","inline","containerRef","position","align","offset","crossAxis","mainAxis","matchTargetSize","baseState","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable, useTagPickerBase_unstable } from './TagPicker';
|
|
1
|
+
export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable, useTagPickerBase_unstable, useTagPickerContextValues } from './TagPicker';
|
|
2
2
|
export { TagPickerInput, tagPickerInputClassNames, renderTagPickerInput_unstable, useTagPickerInputStyles_unstable, useTagPickerInput_unstable, useTagPickerInputBase_unstable } from './TagPickerInput';
|
|
3
3
|
export { TagPickerList, tagPickerListClassNames, renderTagPickerList_unstable, useTagPickerListStyles_unstable, useTagPickerList_unstable } from './TagPickerList';
|
|
4
4
|
export { TagPickerButton, tagPickerButtonClassNames, renderTagPickerButton_unstable, useTagPickerButtonStyles_unstable, useTagPickerButton_unstable, useTagPickerButtonBase_unstable } from './TagPickerButton';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n TagPicker,\n renderTagPicker_unstable,\n useTagPicker_unstable,\n useTagPickerBase_unstable,\n useTagPickerContextValues,\n} from './TagPicker';\nexport type {\n TagPickerBaseProps,\n TagPickerBaseState,\n TagPickerContextValues,\n TagPickerProps,\n TagPickerSlots,\n TagPickerState,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerSize,\n} from './TagPicker';\nexport {\n TagPickerInput,\n tagPickerInputClassNames,\n renderTagPickerInput_unstable,\n useTagPickerInputStyles_unstable,\n useTagPickerInput_unstable,\n useTagPickerInputBase_unstable,\n} from './TagPickerInput';\nexport type {\n TagPickerInputBaseProps,\n TagPickerInputBaseState,\n TagPickerInputProps,\n TagPickerInputSlots,\n TagPickerInputState,\n} from './TagPickerInput';\nexport {\n TagPickerList,\n tagPickerListClassNames,\n renderTagPickerList_unstable,\n useTagPickerListStyles_unstable,\n useTagPickerList_unstable,\n} from './TagPickerList';\nexport type { TagPickerListProps, TagPickerListSlots, TagPickerListState } from './TagPickerList';\nexport {\n TagPickerButton,\n tagPickerButtonClassNames,\n renderTagPickerButton_unstable,\n useTagPickerButtonStyles_unstable,\n useTagPickerButton_unstable,\n useTagPickerButtonBase_unstable,\n} from './TagPickerButton';\nexport type {\n TagPickerButtonBaseProps,\n TagPickerButtonBaseState,\n TagPickerButtonProps,\n TagPickerButtonSlots,\n TagPickerButtonState,\n} from './TagPickerButton';\nexport {\n TagPickerControl,\n tagPickerControlClassNames,\n renderTagPickerControl_unstable,\n useTagPickerControlStyles_unstable,\n useTagPickerControl_unstable,\n useTagPickerControlBase_unstable,\n} from './TagPickerControl';\nexport type {\n TagPickerControlBaseState,\n TagPickerControlInternalSlots,\n TagPickerControlProps,\n TagPickerControlSlots,\n TagPickerControlState,\n} from './TagPickerControl';\nexport {\n TagPickerOption,\n tagPickerOptionClassNames,\n renderTagPickerOption_unstable,\n useTagPickerOptionStyles_unstable,\n useTagPickerOption_unstable,\n} from './TagPickerOption';\nexport type { TagPickerOptionProps, TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption';\nexport {\n TagPickerGroup,\n tagPickerGroupClassNames,\n renderTagPickerGroup_unstable,\n useTagPickerGroupStyles_unstable,\n useTagPickerGroup_unstable,\n} from './TagPickerGroup';\nexport type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup';\n\nexport {\n TagPickerOptionGroup,\n tagPickerOptionGroupClassNames,\n renderTagPickerOptionGroup,\n useTagPickerOptionGroupStyles,\n useTagPickerOptionGroup,\n} from './TagPickerOptionGroup';\nexport type {\n TagPickerOptionGroupProps,\n TagPickerOptionGroupSlots,\n TagPickerOptionGroupState,\n} from './TagPickerOptionGroup';\n\nexport { useTagPickerFilter } from './utils/useTagPickerFilter';\n\nexport { TagPickerContextProvider, useTagPickerContext_unstable } from './contexts/TagPickerContext';\nexport type { TagPickerContextValue } from './contexts/TagPickerContext';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable","useTagPickerContextValues","TagPickerInput","tagPickerInputClassNames","renderTagPickerInput_unstable","useTagPickerInputStyles_unstable","useTagPickerInput_unstable","useTagPickerInputBase_unstable","TagPickerList","tagPickerListClassNames","renderTagPickerList_unstable","useTagPickerListStyles_unstable","useTagPickerList_unstable","TagPickerButton","tagPickerButtonClassNames","renderTagPickerButton_unstable","useTagPickerButtonStyles_unstable","useTagPickerButton_unstable","useTagPickerButtonBase_unstable","TagPickerControl","tagPickerControlClassNames","renderTagPickerControl_unstable","useTagPickerControlStyles_unstable","useTagPickerControl_unstable","useTagPickerControlBase_unstable","TagPickerOption","tagPickerOptionClassNames","renderTagPickerOption_unstable","useTagPickerOptionStyles_unstable","useTagPickerOption_unstable","TagPickerGroup","tagPickerGroupClassNames","renderTagPickerGroup_unstable","useTagPickerGroupStyles_unstable","useTagPickerGroup_unstable","TagPickerOptionGroup","tagPickerOptionGroupClassNames","renderTagPickerOptionGroup","useTagPickerOptionGroupStyles","useTagPickerOptionGroup","useTagPickerFilter","TagPickerContextProvider","useTagPickerContext_unstable"],"mappings":"AAAA,SACEA,SAAS,EACTC,wBAAwB,EACxBC,qBAAqB,EACrBC,yBAAyB,EACzBC,yBAAyB,QACpB,cAAc;AAYrB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,EAC1BC,8BAA8B,QACzB,mBAAmB;AAQ1B,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAEzB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,EAC3BC,+BAA+B,QAC1B,oBAAoB;AAQ3B,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,+BAA+B,EAC/BC,kCAAkC,EAClCC,4BAA4B,EAC5BC,gCAAgC,QAC3B,qBAAqB;AAQ5B,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAE3B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,oBAAoB,EACpBC,8BAA8B,EAC9BC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,yBAAyB;AAOhC,SAASC,kBAAkB,QAAQ,6BAA6B;AAEhE,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,8BAA8B"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
useTagPickerBase_unstable: function() {
|
|
19
19
|
return _index.useTagPickerBase_unstable;
|
|
20
20
|
},
|
|
21
|
+
useTagPickerContextValues: function() {
|
|
22
|
+
return _index.useTagPickerContextValues;
|
|
23
|
+
},
|
|
21
24
|
useTagPicker_unstable: function() {
|
|
22
25
|
return _index.useTagPicker_unstable;
|
|
23
26
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/TagPicker.ts"],"sourcesContent":["export type {\n TagPickerBaseProps,\n TagPickerContextValues,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerSize,\n TagPickerSlots,\n TagPickerState,\n} from './components/TagPicker/index';\nexport {\n TagPicker,\n renderTagPicker_unstable,\n useTagPicker_unstable,\n useTagPickerBase_unstable,\n} from './components/TagPicker/index';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/TagPicker.ts"],"sourcesContent":["export type {\n TagPickerBaseProps,\n TagPickerBaseState,\n TagPickerContextValues,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerSize,\n TagPickerSlots,\n TagPickerState,\n} from './components/TagPicker/index';\nexport {\n TagPicker,\n renderTagPicker_unstable,\n useTagPicker_unstable,\n useTagPickerBase_unstable,\n useTagPickerContextValues,\n} from './components/TagPicker/index';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable","useTagPickerContextValues"],"mappings":";;;;;;;;;;;;eAYEA,gBAAS;;;eACTC,+BAAwB;;;eAExBE,gCAAyB;;;eACzBC,gCAAyB;;;eAFzBF,4BAAqB;;;uBAGhB,+BAA+B"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* TagPicker Base
|
|
3
|
-
*
|
|
2
|
+
* TagPicker Base State - the state produced by the base hook, which does not interact with the
|
|
3
|
+
* `size`, `appearance` and `inline` props. These are layered on by the styled
|
|
4
|
+
* {@link useTagPicker_unstable} hook.
|
|
4
5
|
*/ "use strict";
|
|
5
6
|
Object.defineProperty(exports, "__esModule", {
|
|
6
7
|
value: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPicker/TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n ComponentProps,\n ComponentState,\n DistributiveOmit,\n EventData,\n EventHandler,\n JSXElement,\n} 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'\n | 'disabled'\n | 'defaultOpen'\n | 'selectedOptions'\n | 'defaultSelectedOptions'\n | 'open'\n | 'disableAutoFocus'\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\n/**\n * TagPicker Base Props - omits the floating-ui `positioning` prop
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPicker/TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n ComponentProps,\n ComponentState,\n DistributiveOmit,\n EventData,\n EventHandler,\n JSXElement,\n} 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'\n | 'disabled'\n | 'defaultOpen'\n | 'selectedOptions'\n | 'defaultSelectedOptions'\n | 'open'\n | 'disableAutoFocus'\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\n/**\n * TagPicker Base Props - omits the presentation-related props that the base hook does not handle:\n * the floating-ui `positioning` prop (the styled {@link TagPickerProps} re-introduces it via\n * `usePositioning`) as well as `size`, `appearance` and `inline` (layered on by the styled\n * {@link useTagPicker_unstable} hook).\n */\nexport type TagPickerBaseProps = DistributiveOmit<TagPickerProps, 'positioning' | 'size' | 'appearance' | 'inline'>;\n\n/**\n * TagPicker Base State - the state produced by the base hook, which does not interact with the\n * `size`, `appearance` and `inline` props. These are layered on by the styled\n * {@link useTagPicker_unstable} hook.\n */\nexport type TagPickerBaseState = Omit<TagPickerState, 'size' | 'appearance' | 'inline'>;\n"],"names":[],"mappings":"AA4HA;;;;CAIC,GACD,WAAwF"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
useTagPickerBase_unstable: function() {
|
|
19
19
|
return _useTagPicker.useTagPickerBase_unstable;
|
|
20
20
|
},
|
|
21
|
+
useTagPickerContextValues: function() {
|
|
22
|
+
return _useTagPickerContextValues.useTagPickerContextValues;
|
|
23
|
+
},
|
|
21
24
|
useTagPicker_unstable: function() {
|
|
22
25
|
return _useTagPicker.useTagPicker_unstable;
|
|
23
26
|
}
|
|
@@ -25,3 +28,4 @@ _export(exports, {
|
|
|
25
28
|
const _TagPicker = require("./TagPicker");
|
|
26
29
|
const _renderTagPicker = require("./renderTagPicker");
|
|
27
30
|
const _useTagPicker = require("./useTagPicker");
|
|
31
|
+
const _useTagPickerContextValues = require("./useTagPickerContextValues");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPicker/index.ts"],"sourcesContent":["export { TagPicker } from './TagPicker';\nexport type {\n TagPickerBaseProps,\n TagPickerContextValues,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerSize,\n TagPickerSlots,\n TagPickerState,\n} from './TagPicker.types';\nexport { renderTagPicker_unstable } from './renderTagPicker';\nexport { useTagPicker_unstable, useTagPickerBase_unstable } from './useTagPicker';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable"],"mappings":";;;;;;;;;;;;eAASA,oBAAS;;;
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPicker/index.ts"],"sourcesContent":["export { TagPicker } from './TagPicker';\nexport type {\n TagPickerBaseProps,\n TagPickerBaseState,\n TagPickerContextValues,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerSize,\n TagPickerSlots,\n TagPickerState,\n} from './TagPicker.types';\nexport { renderTagPicker_unstable } from './renderTagPicker';\nexport { useTagPicker_unstable, useTagPickerBase_unstable } from './useTagPicker';\nexport { useTagPickerContextValues } from './useTagPickerContextValues';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable","useTagPickerContextValues"],"mappings":";;;;;;;;;;;;eAASA,oBAAS;;;eAYTC,yCAAwB;;;eACDE,uCAAyB;;;eAChDC,oDAAyB;;;eADzBF,mCAAqB;;;2BAbJ,cAAc;iCAYC,oBAAoB;8BACI,iBAAiB;2CACxC,8BAA8B"}
|
|
@@ -37,7 +37,7 @@ const useTagPickerBase_unstable = (props)=>{
|
|
|
37
37
|
const secondaryActionRef = _react.useRef(null);
|
|
38
38
|
const tagPickerGroupRef = _react.useRef(null);
|
|
39
39
|
const passiveTargetRef = _react.useRef(null);
|
|
40
|
-
const {
|
|
40
|
+
const { noPopover = false, disableAutoFocus } = props;
|
|
41
41
|
const { controller: activeDescendantController, activeParentRef, listboxRef } = (0, _reactaria.useActiveDescendant)({
|
|
42
42
|
matchOption: (el)=>el.classList.contains(_reactcombobox.optionClassNames.root)
|
|
43
43
|
});
|
|
@@ -63,8 +63,7 @@ const useTagPickerBase_unstable = (props)=>{
|
|
|
63
63
|
activeDescendantController,
|
|
64
64
|
disableAutoFocus,
|
|
65
65
|
editable: true,
|
|
66
|
-
multiselect: true
|
|
67
|
-
size: 'medium'
|
|
66
|
+
multiselect: true
|
|
68
67
|
});
|
|
69
68
|
const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);
|
|
70
69
|
return {
|
|
@@ -80,15 +79,12 @@ const useTagPickerBase_unstable = (props)=>{
|
|
|
80
79
|
secondaryActionRef,
|
|
81
80
|
tagPickerGroupRef,
|
|
82
81
|
targetRef: passiveTargetRef,
|
|
83
|
-
size,
|
|
84
|
-
inline,
|
|
85
82
|
open: comboboxState.open,
|
|
86
83
|
mountNode: comboboxState.mountNode,
|
|
87
84
|
onOptionClick: (0, _reactutilities.useEventCallback)((event)=>{
|
|
88
85
|
comboboxState.onOptionClick(event);
|
|
89
86
|
comboboxState.setOpen(event, false);
|
|
90
87
|
}),
|
|
91
|
-
appearance: comboboxState.appearance,
|
|
92
88
|
clearSelection: comboboxState.clearSelection,
|
|
93
89
|
getOptionById: comboboxState.getOptionById,
|
|
94
90
|
getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,
|
|
@@ -116,7 +112,7 @@ const useTagPickerBase_unstable = (props)=>{
|
|
|
116
112
|
};
|
|
117
113
|
};
|
|
118
114
|
const useTagPicker_unstable = (props)=>{
|
|
119
|
-
const { positioning } = props;
|
|
115
|
+
const { positioning, size = 'medium', appearance = 'outline', inline = false } = props;
|
|
120
116
|
const { targetRef, containerRef } = (0, _reactpositioning.usePositioning)({
|
|
121
117
|
position: 'below',
|
|
122
118
|
align: 'start',
|
|
@@ -131,6 +127,9 @@ const useTagPicker_unstable = (props)=>{
|
|
|
131
127
|
const baseState = useTagPickerBase_unstable(props);
|
|
132
128
|
return {
|
|
133
129
|
...baseState,
|
|
130
|
+
size,
|
|
131
|
+
appearance,
|
|
132
|
+
inline,
|
|
134
133
|
targetRef,
|
|
135
134
|
popoverRef: (0, _reactutilities.useMergedRefs)(baseState.popoverRef, containerRef)
|
|
136
135
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPicker/useTagPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { elementContains, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n TagPickerBaseProps,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerState,\n} from './TagPicker.types';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n/**\n * Create the base state required to render TagPicker, without floating-ui positioning.\n * @param props - props from this instance of TagPicker (without `positioning`)\n */\nexport const useTagPickerBase_unstable = (props: TagPickerBaseProps): TagPickerState => {\n const popoverId = useId('picker-listbox');\n const triggerInnerRef = React.useRef<HTMLInputElement | HTMLButtonElement>(null);\n const secondaryActionRef = React.useRef<HTMLSpanElement>(null);\n const tagPickerGroupRef = React.useRef<HTMLDivElement>(null);\n const passiveTargetRef = React.useRef<HTMLDivElement>(null);\n const { size = 'medium', inline = false, noPopover = false, disableAutoFocus } = props;\n\n const {\n controller: activeDescendantController,\n activeParentRef,\n listboxRef,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n\n const comboboxState = useComboboxBaseState({\n ...props,\n onOptionSelect: useEventCallback((event, data) =>\n props.onOptionSelect?.(event, {\n selectedOptions: data.selectedOptions,\n value: data.optionValue,\n type: event.type,\n event,\n } as TagPickerOnOptionSelectData),\n ),\n onOpenChange: useEventCallback((event, data) =>\n props.onOpenChange?.(event, {\n ...data,\n type: event.type,\n event,\n } as TagPickerOnOpenChangeData),\n ),\n activeDescendantController,\n disableAutoFocus,\n editable: true,\n multiselect: true,\n size: 'medium',\n });\n\n const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);\n return {\n activeDescendantController,\n components: {},\n trigger,\n popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n popoverId,\n noPopover,\n disabled: comboboxState.disabled,\n triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n popoverRef: useMergedRefs(listboxRef),\n secondaryActionRef,\n tagPickerGroupRef,\n targetRef: passiveTargetRef,\n size,\n inline,\n open: comboboxState.open,\n mountNode: comboboxState.mountNode,\n onOptionClick: useEventCallback(event => {\n comboboxState.onOptionClick(event);\n comboboxState.setOpen(event, false);\n }),\n appearance: comboboxState.appearance,\n clearSelection: comboboxState.clearSelection,\n getOptionById: comboboxState.getOptionById,\n getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,\n registerOption: comboboxState.registerOption,\n selectedOptions: comboboxState.selectedOptions,\n selectOption: useEventCallback((event, data) => {\n // if the option is already selected, invoke onOptionSelect callback with current selected values\n // the combobox state would unselect the option, which is not the behavior expected\n if (\n comboboxState.selectedOptions.includes(data.value) &&\n !elementContains(tagPickerGroupRef.current, event.target as Node)\n ) {\n props.onOptionSelect?.(event, {\n selectedOptions: comboboxState.selectedOptions,\n value: data.value,\n type: event.type,\n event,\n } as TagPickerOnOptionSelectData);\n return;\n }\n comboboxState.selectOption(event, data);\n }),\n setHasFocus: comboboxState.setHasFocus,\n setOpen: comboboxState.setOpen,\n setValue: comboboxState.setValue,\n value: comboboxState.value,\n };\n};\n\n/**\n * Create the state required to render Picker.\n *\n * The returned state can be modified with hooks such as usePickerStyles_unstable,\n * before being passed to renderPicker_unstable.\n *\n * @param props - props from this instance of Picker\n */\nexport const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => {\n const { positioning } = props;\n\n const { targetRef, containerRef } = usePositioning({\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions,\n matchTargetSize: 'width' as const,\n ...resolvePositioningShorthand(positioning),\n });\n\n const baseState = useTagPickerBase_unstable(props);\n\n return {\n ...baseState,\n targetRef,\n popoverRef: useMergedRefs(baseState.popoverRef, containerRef),\n };\n};\n\nconst childrenToTriggerAndPopover = (children: React.ReactNode, noPopover: boolean) => {\n const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('TagPicker must contain at least one child');\n }\n\n if (childrenArray.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('TagPicker must contain at most two children');\n }\n }\n\n if (noPopover) {\n return { trigger: childrenArray[0] };\n }\n\n let trigger: React.ReactElement | undefined = undefined;\n let popover: React.ReactElement | undefined = undefined;\n\n if (childrenArray.length === 2) {\n trigger = childrenArray[0];\n popover = childrenArray[1];\n } else if (childrenArray.length === 1) {\n popover = childrenArray[0];\n }\n\n return { trigger, popover };\n};\n"],"names":["React","elementContains","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPickerBase_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","passiveTargetRef","size","inline","noPopover","disableAutoFocus","controller","activeDescendantController","activeParentRef","listboxRef","matchOption","el","classList","contains","root","comboboxState","onOptionSelect","event","data","selectedOptions","value","optionValue","type","onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","popoverRef","targetRef","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","includes","current","target","setHasFocus","setValue","useTagPicker_unstable","positioning","containerRef","position","align","offset","crossAxis","mainAxis","matchTargetSize","baseState","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPicker/useTagPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { elementContains, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n TagPickerBaseProps,\n TagPickerBaseState,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerState,\n} from './TagPicker.types';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n/**\n * Create the base state required to render TagPicker, without floating-ui positioning.\n * @param props - props from this instance of TagPicker (without `positioning`)\n */\nexport const useTagPickerBase_unstable = (props: TagPickerBaseProps): TagPickerBaseState => {\n const popoverId = useId('picker-listbox');\n const triggerInnerRef = React.useRef<HTMLInputElement | HTMLButtonElement>(null);\n const secondaryActionRef = React.useRef<HTMLSpanElement>(null);\n const tagPickerGroupRef = React.useRef<HTMLDivElement>(null);\n const passiveTargetRef = React.useRef<HTMLDivElement>(null);\n const { noPopover = false, disableAutoFocus } = props;\n\n const {\n controller: activeDescendantController,\n activeParentRef,\n listboxRef,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n\n const comboboxState = useComboboxBaseState({\n ...props,\n onOptionSelect: useEventCallback((event, data) =>\n props.onOptionSelect?.(event, {\n selectedOptions: data.selectedOptions,\n value: data.optionValue,\n type: event.type,\n event,\n } as TagPickerOnOptionSelectData),\n ),\n onOpenChange: useEventCallback((event, data) =>\n props.onOpenChange?.(event, {\n ...data,\n type: event.type,\n event,\n } as TagPickerOnOpenChangeData),\n ),\n activeDescendantController,\n disableAutoFocus,\n editable: true,\n multiselect: true,\n });\n\n const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);\n return {\n activeDescendantController,\n components: {},\n trigger,\n popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n popoverId,\n noPopover,\n disabled: comboboxState.disabled,\n triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n popoverRef: useMergedRefs(listboxRef),\n secondaryActionRef,\n tagPickerGroupRef,\n targetRef: passiveTargetRef,\n open: comboboxState.open,\n mountNode: comboboxState.mountNode,\n onOptionClick: useEventCallback(event => {\n comboboxState.onOptionClick(event);\n comboboxState.setOpen(event, false);\n }),\n clearSelection: comboboxState.clearSelection,\n getOptionById: comboboxState.getOptionById,\n getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,\n registerOption: comboboxState.registerOption,\n selectedOptions: comboboxState.selectedOptions,\n selectOption: useEventCallback((event, data) => {\n // if the option is already selected, invoke onOptionSelect callback with current selected values\n // the combobox state would unselect the option, which is not the behavior expected\n if (\n comboboxState.selectedOptions.includes(data.value) &&\n !elementContains(tagPickerGroupRef.current, event.target as Node)\n ) {\n props.onOptionSelect?.(event, {\n selectedOptions: comboboxState.selectedOptions,\n value: data.value,\n type: event.type,\n event,\n } as TagPickerOnOptionSelectData);\n return;\n }\n comboboxState.selectOption(event, data);\n }),\n setHasFocus: comboboxState.setHasFocus,\n setOpen: comboboxState.setOpen,\n setValue: comboboxState.setValue,\n value: comboboxState.value,\n };\n};\n\n/**\n * Create the state required to render Picker.\n *\n * The returned state can be modified with hooks such as usePickerStyles_unstable,\n * before being passed to renderPicker_unstable.\n *\n * @param props - props from this instance of Picker\n */\nexport const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => {\n const { positioning, size = 'medium', appearance = 'outline', inline = false } = props;\n\n const { targetRef, containerRef } = usePositioning({\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions,\n matchTargetSize: 'width' as const,\n ...resolvePositioningShorthand(positioning),\n });\n\n const baseState = useTagPickerBase_unstable(props);\n\n return {\n ...baseState,\n size,\n appearance,\n inline,\n targetRef,\n popoverRef: useMergedRefs(baseState.popoverRef, containerRef),\n };\n};\n\nconst childrenToTriggerAndPopover = (children: React.ReactNode, noPopover: boolean) => {\n const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('TagPicker must contain at least one child');\n }\n\n if (childrenArray.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('TagPicker must contain at most two children');\n }\n }\n\n if (noPopover) {\n return { trigger: childrenArray[0] };\n }\n\n let trigger: React.ReactElement | undefined = undefined;\n let popover: React.ReactElement | undefined = undefined;\n\n if (childrenArray.length === 2) {\n trigger = childrenArray[0];\n popover = childrenArray[1];\n } else if (childrenArray.length === 1) {\n popover = childrenArray[0];\n }\n\n return { trigger, popover };\n};\n"],"names":["React","elementContains","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPickerBase_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","passiveTargetRef","noPopover","disableAutoFocus","controller","activeDescendantController","activeParentRef","listboxRef","matchOption","el","classList","contains","root","comboboxState","onOptionSelect","event","data","selectedOptions","value","optionValue","type","onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","popoverRef","targetRef","mountNode","onOptionClick","setOpen","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","includes","current","target","setHasFocus","setValue","useTagPicker_unstable","positioning","size","appearance","inline","containerRef","position","align","offset","crossAxis","mainAxis","matchTargetSize","baseState","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -93,6 +93,9 @@ _export(exports, {
|
|
|
93
93
|
useTagPickerButton_unstable: function() {
|
|
94
94
|
return _TagPickerButton.useTagPickerButton_unstable;
|
|
95
95
|
},
|
|
96
|
+
useTagPickerContextValues: function() {
|
|
97
|
+
return _TagPicker.useTagPickerContextValues;
|
|
98
|
+
},
|
|
96
99
|
useTagPickerContext_unstable: function() {
|
|
97
100
|
return _TagPickerContext.useTagPickerContext_unstable;
|
|
98
101
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n TagPicker,\n renderTagPicker_unstable,\n useTagPicker_unstable,\n useTagPickerBase_unstable,\n useTagPickerContextValues,\n} from './TagPicker';\nexport type {\n TagPickerBaseProps,\n TagPickerBaseState,\n TagPickerContextValues,\n TagPickerProps,\n TagPickerSlots,\n TagPickerState,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerSize,\n} from './TagPicker';\nexport {\n TagPickerInput,\n tagPickerInputClassNames,\n renderTagPickerInput_unstable,\n useTagPickerInputStyles_unstable,\n useTagPickerInput_unstable,\n useTagPickerInputBase_unstable,\n} from './TagPickerInput';\nexport type {\n TagPickerInputBaseProps,\n TagPickerInputBaseState,\n TagPickerInputProps,\n TagPickerInputSlots,\n TagPickerInputState,\n} from './TagPickerInput';\nexport {\n TagPickerList,\n tagPickerListClassNames,\n renderTagPickerList_unstable,\n useTagPickerListStyles_unstable,\n useTagPickerList_unstable,\n} from './TagPickerList';\nexport type { TagPickerListProps, TagPickerListSlots, TagPickerListState } from './TagPickerList';\nexport {\n TagPickerButton,\n tagPickerButtonClassNames,\n renderTagPickerButton_unstable,\n useTagPickerButtonStyles_unstable,\n useTagPickerButton_unstable,\n useTagPickerButtonBase_unstable,\n} from './TagPickerButton';\nexport type {\n TagPickerButtonBaseProps,\n TagPickerButtonBaseState,\n TagPickerButtonProps,\n TagPickerButtonSlots,\n TagPickerButtonState,\n} from './TagPickerButton';\nexport {\n TagPickerControl,\n tagPickerControlClassNames,\n renderTagPickerControl_unstable,\n useTagPickerControlStyles_unstable,\n useTagPickerControl_unstable,\n useTagPickerControlBase_unstable,\n} from './TagPickerControl';\nexport type {\n TagPickerControlBaseState,\n TagPickerControlInternalSlots,\n TagPickerControlProps,\n TagPickerControlSlots,\n TagPickerControlState,\n} from './TagPickerControl';\nexport {\n TagPickerOption,\n tagPickerOptionClassNames,\n renderTagPickerOption_unstable,\n useTagPickerOptionStyles_unstable,\n useTagPickerOption_unstable,\n} from './TagPickerOption';\nexport type { TagPickerOptionProps, TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption';\nexport {\n TagPickerGroup,\n tagPickerGroupClassNames,\n renderTagPickerGroup_unstable,\n useTagPickerGroupStyles_unstable,\n useTagPickerGroup_unstable,\n} from './TagPickerGroup';\nexport type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup';\n\nexport {\n TagPickerOptionGroup,\n tagPickerOptionGroupClassNames,\n renderTagPickerOptionGroup,\n useTagPickerOptionGroupStyles,\n useTagPickerOptionGroup,\n} from './TagPickerOptionGroup';\nexport type {\n TagPickerOptionGroupProps,\n TagPickerOptionGroupSlots,\n TagPickerOptionGroupState,\n} from './TagPickerOptionGroup';\n\nexport { useTagPickerFilter } from './utils/useTagPickerFilter';\n\nexport { TagPickerContextProvider, useTagPickerContext_unstable } from './contexts/TagPickerContext';\nexport type { TagPickerContextValue } from './contexts/TagPickerContext';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable","useTagPickerContextValues","TagPickerInput","tagPickerInputClassNames","renderTagPickerInput_unstable","useTagPickerInputStyles_unstable","useTagPickerInput_unstable","useTagPickerInputBase_unstable","TagPickerList","tagPickerListClassNames","renderTagPickerList_unstable","useTagPickerListStyles_unstable","useTagPickerList_unstable","TagPickerButton","tagPickerButtonClassNames","renderTagPickerButton_unstable","useTagPickerButtonStyles_unstable","useTagPickerButton_unstable","useTagPickerButtonBase_unstable","TagPickerControl","tagPickerControlClassNames","renderTagPickerControl_unstable","useTagPickerControlStyles_unstable","useTagPickerControl_unstable","useTagPickerControlBase_unstable","TagPickerOption","tagPickerOptionClassNames","renderTagPickerOption_unstable","useTagPickerOptionStyles_unstable","useTagPickerOption_unstable","TagPickerGroup","tagPickerGroupClassNames","renderTagPickerGroup_unstable","useTagPickerGroupStyles_unstable","useTagPickerGroup_unstable","TagPickerOptionGroup","tagPickerOptionGroupClassNames","renderTagPickerOptionGroup","useTagPickerOptionGroupStyles","useTagPickerOptionGroup","useTagPickerFilter","TagPickerContextProvider","useTagPickerContext_unstable"],"mappings":";;;;;;;;;;;aACW;eAATA;;;eAyCAgB,gCAAe;;4BA6DgB;eAAxB4B;;;eA9CPtB,kCAAgB;;;eAuBhBW,8BAAc;;;eA7Dd5B,8BAAc;;;eAedM,4BAAa;;;eAsCbiB,gCAAe;;;eAiBfU,0CAAoB;;;eA7CpBpB,+CAA8B;;IAe9BM,+BAA+B;;;;eAuB/BW,6CAA6B;;iCA7DA;eAA7B5B;;;eAeAM,2CAA4B;;IAuD5B2B;+DAA0B;;;eAjB1BV,+CAA8B;;;eAxE9B7B,mCAAwB;;IAyCxBgB;yDAAyB;;;eAezBM,4CAA0B;;;eAuB1BW,wCAAwB;;4BA7DA;eAAxB5B;;;eAeAM,sCAAuB;;6BAsCE;eAAzBiB;;kCAiB8B;eAA9BU;;;eAtFApC,oCAAyB;;;eA2CzBkB,gDAA+B;;;eAF/BF,kDAAiC;;;eACjCC,4CAA2B;;;eAzC3BhB,oCAAyB;;;eAkGQyC,8CAA4B;;oCAzC7B;eAAhClB;;IAFAF;mEAAkC;;;eAClCC,8CAA4B;;;eAwCrBiB,sCAAkB;;oCAlBO;eAAhCP;;;eACAC,0CAA0B;;;eA5D1B3B,8CAA8B;;IAF9BF;+DAAgC;;;eAChCC,0CAA0B;;;eAc1BK,8CAA+B;;;eAC/BC,wCAAyB;;IAuDzB2B;4DAAuB;;iCADM;eAA7BD;;;eAjBAV,kDAAiC;;+BACN;eAA3BC;;;eAzEA9B,gCAAqB;;;2BAGhB,cAAc;gCAmBd,mBAAmB;+BAcnB,kBAAkB;iCASlB,oBAAoB;kCAepB,qBAAqB;iCAcrB,oBAAoB;gCAQpB,mBAAmB;sCASnB,yBAAyB;oCAOG,6BAA6B;kCAEO,8BAA8B"}
|