@fluentui/react-tag-picker 0.0.0-nightly-20240618-0404.1 → 0.0.0-nightly-20240620-0405.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +22 -22
  2. package/dist/index.d.ts +1 -1
  3. package/lib/components/TagPicker/TagPicker.types.js.map +1 -1
  4. package/lib/components/TagPicker/useTagPicker.js +1 -0
  5. package/lib/components/TagPicker/useTagPicker.js.map +1 -1
  6. package/lib/components/TagPicker/useTagPickerContextValues.js +3 -1
  7. package/lib/components/TagPicker/useTagPickerContextValues.js.map +1 -1
  8. package/lib-commonjs/components/TagPicker/useTagPicker.js +1 -0
  9. package/lib-commonjs/components/TagPicker/useTagPicker.js.map +1 -1
  10. package/lib-commonjs/components/TagPicker/useTagPickerContextValues.js +3 -1
  11. package/lib-commonjs/components/TagPicker/useTagPickerContextValues.js.map +1 -1
  12. package/package.json +19 -19
package/CHANGELOG.md CHANGED
@@ -1,35 +1,35 @@
1
1
  # Change Log - @fluentui/react-tag-picker
2
2
 
3
- This log was last generated on Tue, 18 Jun 2024 04:39:24 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 20 Jun 2024 04:45:51 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240618-0404.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v0.0.0-nightly-20240618-0404.1)
7
+ ## [0.0.0-nightly-20240620-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v0.0.0-nightly-20240620-0405.1)
8
8
 
9
- Tue, 18 Jun 2024 04:39:24 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.1.1..@fluentui/react-tag-picker_v0.0.0-nightly-20240618-0404.1)
9
+ Thu, 20 Jun 2024 04:45:51 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.1.1..@fluentui/react-tag-picker_v0.0.0-nightly-20240620-0405.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
16
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
19
- - Bump @fluentui/react-portal to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
20
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
21
- - Bump @fluentui/react-aria to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
22
- - Bump @fluentui/react-combobox to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
23
- - Bump @fluentui/react-tags to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
24
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
25
- - Bump @fluentui/react-positioning to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
26
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
27
- - Bump @fluentui/react-field to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
28
- - Bump @fluentui/react-provider to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
29
- - Bump @fluentui/react-avatar to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
30
- - Bump @fluentui/react-button to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
31
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
32
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240618-0404.1 ([commit](https://github.com/microsoft/fluentui/commit/2dd160e5423f19a5de7df899594399ec6c10d946) by beachball)
15
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
16
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
19
+ - Bump @fluentui/react-portal to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
20
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
21
+ - Bump @fluentui/react-aria to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
22
+ - Bump @fluentui/react-combobox to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
23
+ - Bump @fluentui/react-tags to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
24
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
25
+ - Bump @fluentui/react-positioning to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
26
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
27
+ - Bump @fluentui/react-field to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
28
+ - Bump @fluentui/react-provider to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
29
+ - Bump @fluentui/react-avatar to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
30
+ - Bump @fluentui/react-button to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
31
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
32
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240620-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/b6cc909dfdb364442238df2ef5afb17f8ae43d03) by beachball)
33
33
 
34
34
  ## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.1.1)
35
35
 
package/dist/index.d.ts CHANGED
@@ -322,7 +322,7 @@ export declare type TagPickerSlots = {};
322
322
  /**
323
323
  * State used in rendering Picker
324
324
  */
325
- export declare type TagPickerState = ComponentState<TagPickerSlots> & Pick<ComboboxState, 'open' | 'activeDescendantController' | 'mountNode' | 'onOptionClick' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'value' | 'setValue' | 'setOpen' | 'setHasFocus' | 'appearance' | 'clearSelection' | 'getOptionById' | 'disabled'> & Pick<TagPickerContextValue, 'triggerRef' | 'secondaryActionRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'tagPickerGroupRef' | 'size'> & {
325
+ export declare type TagPickerState = ComponentState<TagPickerSlots> & Pick<ComboboxState, 'open' | 'activeDescendantController' | 'mountNode' | 'onOptionClick' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'value' | 'setValue' | 'setOpen' | 'setHasFocus' | 'appearance' | 'clearSelection' | 'getOptionById' | 'getOptionsMatchingValue' | 'disabled'> & Pick<TagPickerContextValue, 'triggerRef' | 'secondaryActionRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'tagPickerGroupRef' | 'size'> & {
326
326
  trigger: React_2.ReactNode;
327
327
  popover?: React_2.ReactNode;
328
328
  inline: boolean;
package/lib/components/TagPicker/TagPicker.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["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 onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;\n onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;\n\n /**\n * Can contain two children including a trigger and a popover\n */\n children: [JSX.Element, JSX.Element] | JSX.Element;\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 | 'disabled'\n > &\n Pick<\n TagPickerContextValue,\n 'triggerRef' | 'secondaryActionRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'tagPickerGroupRef' | 'size'\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":"AAAA,WAsFE"}
1
+ {"version":3,"sources":["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 onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;\n onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;\n\n /**\n * Can contain two children including a trigger and a popover\n */\n children: [JSX.Element, JSX.Element] | JSX.Element;\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' | 'secondaryActionRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'tagPickerGroupRef' | 'size'\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":"AAAA,WAuFE"}
package/lib/components/TagPicker/useTagPicker.js CHANGED
@@ -87,6 +87,7 @@ const fallbackPositions = [
87
87
  appearance: comboboxState.appearance,
88
88
  clearSelection: comboboxState.clearSelection,
89
89
  getOptionById: comboboxState.getOptionById,
90
+ getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,
90
91
  registerOption: comboboxState.registerOption,
91
92
  selectedOptions: comboboxState.selectedOptions,
92
93
  selectOption: comboboxState.selectOption,
package/lib/components/TagPicker/useTagPicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useTagPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerState,\n} from './TagPicker.types';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport { PositioningShorthandValue, 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 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 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 { positioning, size = 'medium', 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 {\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 editable: true,\n multiselect: true,\n size: 'medium',\n });\n\n const { trigger, popover } = childrenToTriggerAndPopover(props.children);\n\n return {\n activeDescendantController,\n components: {},\n trigger,\n popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n popoverId,\n disabled: comboboxState.disabled,\n triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n popoverRef: useMergedRefs(listboxRef, containerRef),\n secondaryActionRef,\n tagPickerGroupRef,\n targetRef,\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 registerOption: comboboxState.registerOption,\n selectedOptions: comboboxState.selectedOptions,\n selectOption: comboboxState.selectOption,\n setHasFocus: comboboxState.setHasFocus,\n setOpen: comboboxState.setOpen,\n setValue: comboboxState.setValue,\n value: comboboxState.value,\n };\n};\n\nconst childrenToTriggerAndPopover = (children?: React.ReactNode) => {\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('Picker must contain at least one child');\n }\n\n if (childrenArray.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Picker must contain at most two children');\n }\n }\n\n let trigger: React.ReactElement | undefined = undefined;\n let popover: React.ReactElement | undefined = undefined;\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 return { trigger, popover };\n};\n"],"names":["React","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPicker_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","targetRef","containerRef","position","align","offset","crossAxis","mainAxis","matchTargetSize","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","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","registerOption","selectOption","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}
1
+ {"version":3,"sources":["useTagPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerProps,\n TagPickerState,\n} from './TagPicker.types';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport { PositioningShorthandValue, 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 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 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 { positioning, size = 'medium', 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 {\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 editable: true,\n multiselect: true,\n size: 'medium',\n });\n\n const { trigger, popover } = childrenToTriggerAndPopover(props.children);\n\n return {\n activeDescendantController,\n components: {},\n trigger,\n popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n popoverId,\n disabled: comboboxState.disabled,\n triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n popoverRef: useMergedRefs(listboxRef, containerRef),\n secondaryActionRef,\n tagPickerGroupRef,\n targetRef,\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: comboboxState.selectOption,\n setHasFocus: comboboxState.setHasFocus,\n setOpen: comboboxState.setOpen,\n setValue: comboboxState.setValue,\n value: comboboxState.value,\n };\n};\n\nconst childrenToTriggerAndPopover = (children?: React.ReactNode) => {\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('Picker must contain at least one child');\n }\n\n if (childrenArray.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Picker must contain at most two children');\n }\n }\n\n let trigger: React.ReactElement | undefined = undefined;\n let popover: React.ReactElement | undefined = undefined;\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 return { trigger, popover };\n};\n"],"names":["React","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPicker_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","targetRef","containerRef","position","align","offset","crossAxis","mainAxis","matchTargetSize","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","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}
package/lib/components/TagPicker/useTagPickerContextValues.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  export function useTagPickerContextValues(state) {
3
- const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, open, popoverId, disabled } = state;
3
+ const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, getOptionsMatchingValue, open, popoverId, disabled } = state;
4
4
  return {
5
5
  activeDescendant: React.useMemo(()=>({
6
6
  controller: state.activeDescendantController
@@ -10,6 +10,8 @@ export function useTagPickerContextValues(state) {
10
10
  listbox: {
11
11
  onOptionClick,
12
12
  registerOption,
13
+ getOptionById,
14
+ getOptionsMatchingValue,
13
15
  selectedOptions,
14
16
  selectOption,
15
17
  focusVisible: false,
package/lib/components/TagPicker/useTagPickerContextValues.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useTagPickerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TagPickerContextValues, TagPickerState } from './TagPicker.types';\n\nexport function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues {\n const {\n onOptionClick,\n registerOption,\n selectedOptions,\n selectOption,\n value,\n triggerRef,\n secondaryActionRef,\n tagPickerGroupRef,\n targetRef,\n size,\n setValue,\n setOpen,\n setHasFocus,\n popoverRef,\n appearance,\n clearSelection,\n getOptionById,\n open,\n popoverId,\n disabled,\n } = state;\n return {\n activeDescendant: React.useMemo(\n () => ({ controller: state.activeDescendantController }),\n [state.activeDescendantController],\n ),\n listbox: {\n onOptionClick,\n registerOption,\n selectedOptions,\n selectOption,\n focusVisible: false,\n setActiveOption: noop,\n },\n picker: {\n value,\n triggerRef,\n targetRef,\n secondaryActionRef,\n tagPickerGroupRef,\n size,\n setValue,\n setOpen,\n setHasFocus,\n selectOption,\n popoverRef,\n selectedOptions,\n appearance,\n clearSelection,\n getOptionById,\n open,\n popoverId,\n disabled,\n },\n };\n}\n\nconst noop = () => {\n /** noop */\n};\n"],"names":["React","useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","open","popoverId","disabled","activeDescendant","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,0BAA0BC,KAAqB;IAC7D,MAAM,EACJC,aAAa,EACbC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,KAAK,EACLC,UAAU,EACVC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACT,GAAGpB;IACJ,OAAO;QACLqB,kBAAkBvB,MAAMwB,OAAO,CAC7B,IAAO,CAAA;gBAAEC,YAAYvB,MAAMwB,0BAA0B;YAAC,CAAA,GACtD;YAACxB,MAAMwB,0BAA0B;SAAC;QAEpCC,SAAS;YACPxB;YACAC;YACAC;YACAC;YACAsB,cAAc;YACdC,iBAAiBC;QACnB;QACAC,QAAQ;YACNxB;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF;AACF;AAEA,MAAMQ,OAAO;AACX,SAAS,GACX"}
1
+ {"version":3,"sources":["useTagPickerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TagPickerContextValues, TagPickerState } from './TagPicker.types';\n\nexport function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues {\n const {\n onOptionClick,\n registerOption,\n selectedOptions,\n selectOption,\n value,\n triggerRef,\n secondaryActionRef,\n tagPickerGroupRef,\n targetRef,\n size,\n setValue,\n setOpen,\n setHasFocus,\n popoverRef,\n appearance,\n clearSelection,\n getOptionById,\n getOptionsMatchingValue,\n open,\n popoverId,\n disabled,\n } = state;\n return {\n activeDescendant: React.useMemo(\n () => ({ controller: state.activeDescendantController }),\n [state.activeDescendantController],\n ),\n listbox: {\n onOptionClick,\n registerOption,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n focusVisible: false,\n setActiveOption: noop,\n },\n picker: {\n value,\n triggerRef,\n targetRef,\n secondaryActionRef,\n tagPickerGroupRef,\n size,\n setValue,\n setOpen,\n setHasFocus,\n selectOption,\n popoverRef,\n selectedOptions,\n appearance,\n clearSelection,\n getOptionById,\n open,\n popoverId,\n disabled,\n },\n };\n}\n\nconst noop = () => {\n /** noop */\n};\n"],"names":["React","useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","getOptionsMatchingValue","open","popoverId","disabled","activeDescendant","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,0BAA0BC,KAAqB;IAC7D,MAAM,EACJC,aAAa,EACbC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,KAAK,EACLC,UAAU,EACVC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACT,GAAGrB;IACJ,OAAO;QACLsB,kBAAkBxB,MAAMyB,OAAO,CAC7B,IAAO,CAAA;gBAAEC,YAAYxB,MAAMyB,0BAA0B;YAAC,CAAA,GACtD;YAACzB,MAAMyB,0BAA0B;SAAC;QAEpCC,SAAS;YACPzB;YACAC;YACAe;YACAC;YACAf;YACAC;YACAuB,cAAc;YACdC,iBAAiBC;QACnB;QACAC,QAAQ;YACNzB;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAE;YACAC;YACAC;QACF;IACF;AACF;AAEA,MAAMQ,OAAO;AACX,SAAS,GACX"}
package/lib-commonjs/components/TagPicker/useTagPicker.js CHANGED
@@ -90,6 +90,7 @@ const useTagPicker_unstable = (props)=>{
90
90
  appearance: comboboxState.appearance,
91
91
  clearSelection: comboboxState.clearSelection,
92
92
  getOptionById: comboboxState.getOptionById,
93
+ getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,
93
94
  registerOption: comboboxState.registerOption,
94
95
  selectedOptions: comboboxState.selectedOptions,
95
96
  selectOption: comboboxState.selectOption,
package/lib-commonjs/components/TagPicker/useTagPicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useTagPicker.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions = [\n 'above',\n 'after',\n 'after-top',\n 'before',\n 'before-top'\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 */ export const useTagPicker_unstable = (props)=>{\n const popoverId = useId('picker-listbox');\n const triggerInnerRef = React.useRef(null);\n const secondaryActionRef = React.useRef(null);\n const tagPickerGroupRef = React.useRef(null);\n const { positioning, size = 'medium', inline = false } = props;\n const { targetRef, containerRef } = usePositioning({\n position: 'below',\n align: 'start',\n offset: {\n crossAxis: 0,\n mainAxis: 2\n },\n fallbackPositions,\n matchTargetSize: 'width',\n ...resolvePositioningShorthand(positioning)\n });\n const { controller: activeDescendantController, activeParentRef, listboxRef } = useActiveDescendant({\n matchOption: (el)=>el.classList.contains(optionClassNames.root)\n });\n const comboboxState = useComboboxBaseState({\n ...props,\n onOptionSelect: useEventCallback((event, data)=>{\n var _props_onOptionSelect;\n return (_props_onOptionSelect = props.onOptionSelect) === null || _props_onOptionSelect === void 0 ? void 0 : _props_onOptionSelect.call(props, event, {\n selectedOptions: data.selectedOptions,\n value: data.optionValue,\n type: event.type,\n event\n });\n }),\n onOpenChange: useEventCallback((event, data)=>{\n var _props_onOpenChange;\n return (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n ...data,\n type: event.type,\n event\n });\n }),\n activeDescendantController,\n editable: true,\n multiselect: true,\n size: 'medium'\n });\n const { trigger, popover } = childrenToTriggerAndPopover(props.children);\n return {\n activeDescendantController,\n components: {},\n trigger,\n popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n popoverId,\n disabled: comboboxState.disabled,\n triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n popoverRef: useMergedRefs(listboxRef, containerRef),\n secondaryActionRef,\n tagPickerGroupRef,\n targetRef,\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 registerOption: comboboxState.registerOption,\n selectedOptions: comboboxState.selectedOptions,\n selectOption: comboboxState.selectOption,\n setHasFocus: comboboxState.setHasFocus,\n setOpen: comboboxState.setOpen,\n setValue: comboboxState.setValue,\n value: comboboxState.value\n };\n};\nconst childrenToTriggerAndPopover = (children)=>{\n const childrenArray = React.Children.toArray(children);\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Picker must contain at least one child');\n }\n if (childrenArray.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Picker must contain at most two children');\n }\n }\n let trigger = undefined;\n let popover = undefined;\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 return {\n trigger,\n popover\n };\n};\n"],"names":["useTagPicker_unstable","fallbackPositions","props","popoverId","useId","triggerInnerRef","React","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","targetRef","containerRef","usePositioning","position","align","offset","crossAxis","mainAxis","matchTargetSize","resolvePositioningShorthand","controller","activeDescendantController","activeParentRef","listboxRef","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","comboboxState","useComboboxBaseState","onOptionSelect","useEventCallback","event","data","_props_onOptionSelect","call","selectedOptions","value","optionValue","type","onOpenChange","_props_onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","useMergedRefs","popoverRef","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","registerOption","selectOption","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}
1
+ {"version":3,"sources":["useTagPicker.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions = [\n 'above',\n 'after',\n 'after-top',\n 'before',\n 'before-top'\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 */ export const useTagPicker_unstable = (props)=>{\n const popoverId = useId('picker-listbox');\n const triggerInnerRef = React.useRef(null);\n const secondaryActionRef = React.useRef(null);\n const tagPickerGroupRef = React.useRef(null);\n const { positioning, size = 'medium', inline = false } = props;\n const { targetRef, containerRef } = usePositioning({\n position: 'below',\n align: 'start',\n offset: {\n crossAxis: 0,\n mainAxis: 2\n },\n fallbackPositions,\n matchTargetSize: 'width',\n ...resolvePositioningShorthand(positioning)\n });\n const { controller: activeDescendantController, activeParentRef, listboxRef } = useActiveDescendant({\n matchOption: (el)=>el.classList.contains(optionClassNames.root)\n });\n const comboboxState = useComboboxBaseState({\n ...props,\n onOptionSelect: useEventCallback((event, data)=>{\n var _props_onOptionSelect;\n return (_props_onOptionSelect = props.onOptionSelect) === null || _props_onOptionSelect === void 0 ? void 0 : _props_onOptionSelect.call(props, event, {\n selectedOptions: data.selectedOptions,\n value: data.optionValue,\n type: event.type,\n event\n });\n }),\n onOpenChange: useEventCallback((event, data)=>{\n var _props_onOpenChange;\n return (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n ...data,\n type: event.type,\n event\n });\n }),\n activeDescendantController,\n editable: true,\n multiselect: true,\n size: 'medium'\n });\n const { trigger, popover } = childrenToTriggerAndPopover(props.children);\n return {\n activeDescendantController,\n components: {},\n trigger,\n popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n popoverId,\n disabled: comboboxState.disabled,\n triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n popoverRef: useMergedRefs(listboxRef, containerRef),\n secondaryActionRef,\n tagPickerGroupRef,\n targetRef,\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: comboboxState.selectOption,\n setHasFocus: comboboxState.setHasFocus,\n setOpen: comboboxState.setOpen,\n setValue: comboboxState.setValue,\n value: comboboxState.value\n };\n};\nconst childrenToTriggerAndPopover = (children)=>{\n const childrenArray = React.Children.toArray(children);\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Picker must contain at least one child');\n }\n if (childrenArray.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Picker must contain at most two children');\n }\n }\n let trigger = undefined;\n let popover = undefined;\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 return {\n trigger,\n popover\n };\n};\n"],"names":["useTagPicker_unstable","fallbackPositions","props","popoverId","useId","triggerInnerRef","React","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","targetRef","containerRef","usePositioning","position","align","offset","crossAxis","mainAxis","matchTargetSize","resolvePositioningShorthand","controller","activeDescendantController","activeParentRef","listboxRef","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","comboboxState","useComboboxBaseState","onOptionSelect","useEventCallback","event","data","_props_onOptionSelect","call","selectedOptions","value","optionValue","type","onOpenChange","_props_onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","useMergedRefs","popoverRef","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}
package/lib-commonjs/components/TagPicker/useTagPickerContextValues.js CHANGED
@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useTagPickerContextValues", {
11
11
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
12
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
13
  function useTagPickerContextValues(state) {
14
- const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, open, popoverId, disabled } = state;
14
+ const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, getOptionsMatchingValue, open, popoverId, disabled } = state;
15
15
  return {
16
16
  activeDescendant: _react.useMemo(()=>({
17
17
  controller: state.activeDescendantController
@@ -21,6 +21,8 @@ function useTagPickerContextValues(state) {
21
21
  listbox: {
22
22
  onOptionClick,
23
23
  registerOption,
24
+ getOptionById,
25
+ getOptionsMatchingValue,
24
26
  selectedOptions,
25
27
  selectOption,
26
28
  focusVisible: false,
package/lib-commonjs/components/TagPicker/useTagPickerContextValues.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useTagPickerContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTagPickerContextValues(state) {\n const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, open, popoverId, disabled } = state;\n return {\n activeDescendant: React.useMemo(()=>({\n controller: state.activeDescendantController\n }), [\n state.activeDescendantController\n ]),\n listbox: {\n onOptionClick,\n registerOption,\n selectedOptions,\n selectOption,\n focusVisible: false,\n setActiveOption: noop\n },\n picker: {\n value,\n triggerRef,\n targetRef,\n secondaryActionRef,\n tagPickerGroupRef,\n size,\n setValue,\n setOpen,\n setHasFocus,\n selectOption,\n popoverRef,\n selectedOptions,\n appearance,\n clearSelection,\n getOptionById,\n open,\n popoverId,\n disabled\n }\n };\n}\nconst noop = ()=>{\n/** noop */ };\n"],"names":["useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","open","popoverId","disabled","activeDescendant","React","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,0BAA0BC,KAAK;IAC3C,MAAM,EAAEC,aAAa,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,KAAK,EAAEC,UAAU,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,WAAW,EAAEC,UAAU,EAAEC,UAAU,EAAEC,cAAc,EAAEC,aAAa,EAAEC,IAAI,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGpB;IACtQ,OAAO;QACHqB,kBAAkBC,OAAMC,OAAO,CAAC,IAAK,CAAA;gBAC7BC,YAAYxB,MAAMyB,0BAA0B;YAChD,CAAA,GAAI;YACJzB,MAAMyB,0BAA0B;SACnC;QACDC,SAAS;YACLzB;YACAC;YACAC;YACAC;YACAuB,cAAc;YACdC,iBAAiBC;QACrB;QACAC,QAAQ;YACJzB;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAC;YACAC;YACAC;QACJ;IACJ;AACJ;AACA,MAAMS,OAAO;AACb,SAAS,GAAG"}
1
+ {"version":3,"sources":["useTagPickerContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTagPickerContextValues(state) {\n const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, getOptionsMatchingValue, open, popoverId, disabled } = state;\n return {\n activeDescendant: React.useMemo(()=>({\n controller: state.activeDescendantController\n }), [\n state.activeDescendantController\n ]),\n listbox: {\n onOptionClick,\n registerOption,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n focusVisible: false,\n setActiveOption: noop\n },\n picker: {\n value,\n triggerRef,\n targetRef,\n secondaryActionRef,\n tagPickerGroupRef,\n size,\n setValue,\n setOpen,\n setHasFocus,\n selectOption,\n popoverRef,\n selectedOptions,\n appearance,\n clearSelection,\n getOptionById,\n open,\n popoverId,\n disabled\n }\n };\n}\nconst noop = ()=>{\n/** noop */ };\n"],"names":["useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","getOptionsMatchingValue","open","popoverId","disabled","activeDescendant","React","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,0BAA0BC,KAAK;IAC3C,MAAM,EAAEC,aAAa,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,KAAK,EAAEC,UAAU,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,WAAW,EAAEC,UAAU,EAAEC,UAAU,EAAEC,cAAc,EAAEC,aAAa,EAAEC,uBAAuB,EAAEC,IAAI,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGrB;IAC/R,OAAO;QACHsB,kBAAkBC,OAAMC,OAAO,CAAC,IAAK,CAAA;gBAC7BC,YAAYzB,MAAM0B,0BAA0B;YAChD,CAAA,GAAI;YACJ1B,MAAM0B,0BAA0B;SACnC;QACDC,SAAS;YACL1B;YACAC;YACAe;YACAC;YACAf;YACAC;YACAwB,cAAc;YACdC,iBAAiBC;QACrB;QACAC,QAAQ;YACJ1B;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAE;YACAC;YACAC;QACJ;IACJ;AACJ;AACA,MAAMS,OAAO;AACb,SAAS,GAAG"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-tag-picker",
3
- "version": "0.0.0-nightly-20240618-0404.1",
3
+ "version": "0.0.0-nightly-20240620-0405.1",
4
4
  "description": "FluentUI TagPicker component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -31,30 +31,30 @@
31
31
  "bundle-size": "monosize measure"
32
32
  },
33
33
  "devDependencies": {
34
- "@fluentui/react-provider": "0.0.0-nightly-20240618-0404.1",
35
- "@fluentui/react-avatar": "0.0.0-nightly-20240618-0404.1",
36
- "@fluentui/react-button": "0.0.0-nightly-20240618-0404.1",
34
+ "@fluentui/react-provider": "0.0.0-nightly-20240620-0405.1",
35
+ "@fluentui/react-avatar": "0.0.0-nightly-20240620-0405.1",
36
+ "@fluentui/react-button": "0.0.0-nightly-20240620-0405.1",
37
37
  "@fluentui/eslint-plugin": "*",
38
- "@fluentui/react-conformance": "0.0.0-nightly-20240618-0404.1",
39
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240618-0404.1",
38
+ "@fluentui/react-conformance": "0.0.0-nightly-20240620-0405.1",
39
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240620-0405.1",
40
40
  "@fluentui/scripts-api-extractor": "*",
41
41
  "@fluentui/scripts-tasks": "*"
42
42
  },
43
43
  "dependencies": {
44
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240618-0404.1",
45
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20240618-0404.1",
46
- "@fluentui/react-theme": "0.0.0-nightly-20240618-0404.1",
47
- "@fluentui/react-utilities": "0.0.0-nightly-20240618-0404.1",
48
- "@fluentui/react-portal": "0.0.0-nightly-20240618-0404.1",
49
- "@fluentui/react-tabster": "0.0.0-nightly-20240618-0404.1",
50
- "@fluentui/react-aria": "0.0.0-nightly-20240618-0404.1",
44
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240620-0405.1",
45
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20240620-0405.1",
46
+ "@fluentui/react-theme": "0.0.0-nightly-20240620-0405.1",
47
+ "@fluentui/react-utilities": "0.0.0-nightly-20240620-0405.1",
48
+ "@fluentui/react-portal": "0.0.0-nightly-20240620-0405.1",
49
+ "@fluentui/react-tabster": "0.0.0-nightly-20240620-0405.1",
50
+ "@fluentui/react-aria": "0.0.0-nightly-20240620-0405.1",
51
51
  "@fluentui/react-icons": "^2.0.239",
52
- "@fluentui/react-combobox": "0.0.0-nightly-20240618-0404.1",
53
- "@fluentui/react-tags": "0.0.0-nightly-20240618-0404.1",
54
- "@fluentui/react-context-selector": "0.0.0-nightly-20240618-0404.1",
55
- "@fluentui/react-positioning": "0.0.0-nightly-20240618-0404.1",
56
- "@fluentui/keyboard-keys": "0.0.0-nightly-20240618-0404.1",
57
- "@fluentui/react-field": "0.0.0-nightly-20240618-0404.1",
52
+ "@fluentui/react-combobox": "0.0.0-nightly-20240620-0405.1",
53
+ "@fluentui/react-tags": "0.0.0-nightly-20240620-0405.1",
54
+ "@fluentui/react-context-selector": "0.0.0-nightly-20240620-0405.1",
55
+ "@fluentui/react-positioning": "0.0.0-nightly-20240620-0405.1",
56
+ "@fluentui/keyboard-keys": "0.0.0-nightly-20240620-0405.1",
57
+ "@fluentui/react-field": "0.0.0-nightly-20240620-0405.1",
58
58
  "@griffel/react": "^1.5.22",
59
59
  "@swc/helpers": "^0.5.1"
60
60
  },