npm - @fluentui/react-tag-picker - Versions diffs - 9.10.2 → 9.10.4 - Mend

@fluentui/react-tag-picker 9.10.2 → 9.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-tag-picker
-<!-- This log was last generated on Tue, 11 Aug 2026 17:16:02 GMT and should not be manually modified. -->
+<!-- This log was last generated on Mon, 21 Sep 2026 16:12:51 GMT and should not be manually modified. -->
 <!-- Start content -->
+## [9.10.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.10.4)
+Mon, 21 Sep 2026 16:12:51 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.10.3..@fluentui/react-tag-picker_v9.10.4)
+### Patches
+- fix: remove unused @types/react-dom peer dependency, mark @types/react as optional ([PR #36559](https://github.com/microsoft/fluentui/pull/36559) by martinhochel@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.15 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-combobox to v9.17.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.20 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-field to v9.5.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-portal to v9.8.16 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-positioning to v9.23.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.18 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tags to v9.9.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+## [9.10.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.10.3)
+Mon, 24 Aug 2026 16:40:04 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.10.2..@fluentui/react-tag-picker_v9.10.3)
+### Patches
+- fix: remove no-op `supportsSize` field control option from `TagPickerInput` ([PR #36468](https://github.com/microsoft/fluentui/pull/36468) by martinhochel@microsoft.com)
+- Bump @fluentui/react-tags to v9.9.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
 ## [9.10.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.10.2)
-Tue, 11 Aug 2026 17:16:02 GMT
+Tue, 11 Aug 2026 17:20:14 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.10.1..@fluentui/react-tag-picker_v9.10.2)
 ### Patches

package/lib/components/TagPickerInput/useTagPickerInput.js CHANGED Viewed

@@ -18,10 +18,11 @@ import { useTabsterEscapeIgnore } from "../../utils/useTabsterEscapeIgnore.js";
  * @param props - props from this instance of TagPickerInput (without appearance)
  * @param ref - reference to root HTMLInputElement of TagPickerInput
  */ export const useTagPickerInputBase_unstable = (props, ref)=>{
+    // NOTE: `supportsSize` is intentionally not used here. `TagPickerInput` has no `size` prop, its size comes from
+    // `TagPickerContext` and uses a different scale (`'medium' | 'large' | 'extra-large'`) than `Field` size.
     const fieldProps = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
+        supportsRequired: true
     });
     const { controller: activeDescendantController } = useActiveDescendantContext();
     const contextDisabled = useTagPickerContext_unstable((ctx)=>ctx.disabled);

package/lib/components/TagPickerInput/useTagPickerInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type {\n TagPickerInputBaseProps,\n TagPickerInputBaseState,\n TagPickerInputProps,\n TagPickerInputState,\n} from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n useMergedRefs,\n getIntrinsicElementProps,\n useEventCallback,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useTabsterEscapeIgnore } from '../../utils/useTabsterEscapeIgnore';\n\n/*\n Create the base state required to render TagPickerInput, without design-only props.\n * The Base hook omits Tabster-driven focus management; consumers can re-add it via the\n * styled wrapper {@link useTagPickerInput_unstable} or by composing their own keydown handler.\n \n @param props - props from this instance of TagPickerInput (without appearance)\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n /\nexport const useTagPickerInputBase_unstable = (\n props: TagPickerInputBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): TagPickerInputBaseState => {\n const fieldProps = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true,\n supportsSize: true,\n });\n const { controller: activeDescendantController } = useActiveDescendantContext();\n const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n useIsomorphicLayoutEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n setTagPickerInputStretchStyle(triggerRef.current);\n }, [selectedOptions, triggerRef]);\n\n useIsomorphicLayoutEffect(() => {\n if (triggerRef.current) {\n const input = triggerRef.current;\n const cb = () => setTagPickerInputStretchStyle(input);\n input.addEventListener('input', cb);\n return () => {\n input.removeEventListener('input', cb);\n };\n }\n }, [triggerRef]);\n\n const { value = contextValue, disabled = contextDisabled } = fieldProps;\n\n const isTypingRef = React.useRef(false);\n\n const root = useInputTriggerSlot(\n {\n type: 'text',\n value: value ?? '',\n 'aria-controls': open ? popoverId : undefined,\n disabled,\n ...getIntrinsicElementProps('input', fieldProps),\n onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n fieldProps.onKeyDown?.(event);\n if (event.key === Space) {\n if (open && !isTypingRef.current) {\n setOpen(event, false);\n }\n } else if (event.key === Enter) {\n if (open) {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n setOpen(event, false);\n });\n } else {\n setOpen(event, true);\n }\n }\n isTypingRef.current =\n event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n }),\n },\n useMergedRefs(triggerRef, ref),\n {\n activeDescendantController,\n freeform: false,\n state: {\n clearSelection,\n getOptionById,\n open,\n selectedOptions,\n selectOption,\n setHasFocus,\n setOpen,\n setValue,\n multiselect: true,\n value: fieldProps.value,\n },\n },\n );\n\n return {\n components: {\n root: 'input',\n },\n root,\n disabled,\n };\n};\n\n/\n Create the state required to render TagPickerInput.\n \n The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n \n @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n /\nexport const useTagPickerInput_unstable = (\n props: TagPickerInputProps,\n ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const { findLastFocusable } = useFocusFinders();\n\n const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n props.onKeyDown?.(event);\n if (\n (event.key === ArrowLeft \|\| event.key === Backspace) &&\n event.currentTarget.selectionStart === 0 &&\n event.currentTarget.selectionEnd === 0 &&\n tagPickerGroupRef.current\n ) {\n findLastFocusable(tagPickerGroupRef.current)?.focus();\n }\n });\n\n const baseState = useTagPickerInputBase_unstable({ ...props, onKeyDown }, ref);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n\n return {\n ...baseState,\n size,\n root: {\n ...useTabsterEscapeIgnore(baseState.root, open),\n ...baseState.root,\n },\n };\n};\n\n/\n while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n \n This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n \n @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n // first we need to remove the CSS variable\n // to properly calculate the difference between scrollWidth and offsetWidth\n input.style.removeProperty(tagPickerInputCSSRules.width);\n if (input.scrollWidth > input.offsetWidth + 1) {\n input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n } else {\n input.style.removeProperty(tagPickerInputCSSRules.width);\n }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTabsterEscapeIgnore","useTagPickerInputBase_unstable","props","ref","fieldProps","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","contextDisabled","ctx","disabled","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","isTypingRef","useRef","root","type","onKeyDown","event","key","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","useTagPickerInput_unstable","tagPickerGroupRef","findLastFocusable","currentTarget","selectionStart","selectionEnd","focus","baseState","size","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type {\n TagPickerInputBaseProps,\n TagPickerInputBaseState,\n TagPickerInputProps,\n TagPickerInputState,\n} from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n useMergedRefs,\n getIntrinsicElementProps,\n useEventCallback,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useTabsterEscapeIgnore } from '../../utils/useTabsterEscapeIgnore';\n\n/*\n Create the base state required to render TagPickerInput, without design-only props.\n * The Base hook omits Tabster-driven focus management; consumers can re-add it via the\n * styled wrapper {@link useTagPickerInput_unstable} or by composing their own keydown handler.\n \n @param props - props from this instance of TagPickerInput (without appearance)\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n /\nexport const useTagPickerInputBase_unstable = (\n props: TagPickerInputBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): TagPickerInputBaseState => {\n // NOTE: `supportsSize` is intentionally not used here. `TagPickerInput` has no `size` prop, its size comes from\n // `TagPickerContext` and uses a different scale (`'medium' \| 'large' \| 'extra-large'`) than `Field` size.\n const fieldProps = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true,\n });\n const { controller: activeDescendantController } = useActiveDescendantContext();\n const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n useIsomorphicLayoutEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n setTagPickerInputStretchStyle(triggerRef.current);\n }, [selectedOptions, triggerRef]);\n\n useIsomorphicLayoutEffect(() => {\n if (triggerRef.current) {\n const input = triggerRef.current;\n const cb = () => setTagPickerInputStretchStyle(input);\n input.addEventListener('input', cb);\n return () => {\n input.removeEventListener('input', cb);\n };\n }\n }, [triggerRef]);\n\n const { value = contextValue, disabled = contextDisabled } = fieldProps;\n\n const isTypingRef = React.useRef(false);\n\n const root = useInputTriggerSlot(\n {\n type: 'text',\n value: value ?? '',\n 'aria-controls': open ? popoverId : undefined,\n disabled,\n ...getIntrinsicElementProps('input', fieldProps),\n onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n fieldProps.onKeyDown?.(event);\n if (event.key === Space) {\n if (open && !isTypingRef.current) {\n setOpen(event, false);\n }\n } else if (event.key === Enter) {\n if (open) {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n setOpen(event, false);\n });\n } else {\n setOpen(event, true);\n }\n }\n isTypingRef.current =\n event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n }),\n },\n useMergedRefs(triggerRef, ref),\n {\n activeDescendantController,\n freeform: false,\n state: {\n clearSelection,\n getOptionById,\n open,\n selectedOptions,\n selectOption,\n setHasFocus,\n setOpen,\n setValue,\n multiselect: true,\n value: fieldProps.value,\n },\n },\n );\n\n return {\n components: {\n root: 'input',\n },\n root,\n disabled,\n };\n};\n\n/\n Create the state required to render TagPickerInput.\n \n The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n \n @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n /\nexport const useTagPickerInput_unstable = (\n props: TagPickerInputProps,\n ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const { findLastFocusable } = useFocusFinders();\n\n const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n props.onKeyDown?.(event);\n if (\n (event.key === ArrowLeft \|\| event.key === Backspace) &&\n event.currentTarget.selectionStart === 0 &&\n event.currentTarget.selectionEnd === 0 &&\n tagPickerGroupRef.current\n ) {\n findLastFocusable(tagPickerGroupRef.current)?.focus();\n }\n });\n\n const baseState = useTagPickerInputBase_unstable({ ...props, onKeyDown }, ref);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n\n return {\n ...baseState,\n size,\n root: {\n ...useTabsterEscapeIgnore(baseState.root, open),\n ...baseState.root,\n },\n };\n};\n\n/\n while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n \n This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n \n @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n // first we need to remove the CSS variable\n // to properly calculate the difference between scrollWidth and offsetWidth\n input.style.removeProperty(tagPickerInputCSSRules.width);\n if (input.scrollWidth > input.offsetWidth + 1) {\n input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n } else {\n input.style.removeProperty(tagPickerInputCSSRules.width);\n }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTabsterEscapeIgnore","useTagPickerInputBase_unstable","props","ref","fieldProps","supportsLabelFor","supportsRequired","controller","activeDescendantController","contextDisabled","ctx","disabled","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","isTypingRef","useRef","root","type","onKeyDown","event","key","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","useTagPickerInput_unstable","tagPickerGroupRef","findLastFocusable","currentTarget","selectionStart","selectionEnd","focus","baseState","size","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}

package/lib-commonjs/components/TagPickerInput/useTagPickerInput.cjs CHANGED Viewed

@@ -30,10 +30,11 @@ const _tokens = require("../../utils/tokens.cjs");
 const _reacttabster = require("@fluentui/react-tabster");
 const _useTabsterEscapeIgnore = require("../../utils/useTabsterEscapeIgnore.cjs");
 const useTagPickerInputBase_unstable = (props, ref)=>{
+    // NOTE: `supportsSize` is intentionally not used here. `TagPickerInput` has no `size` prop, its size comes from
+    // `TagPickerContext` and uses a different scale (`'medium' | 'large' | 'extra-large'`) than `Field` size.
     const fieldProps = (0, _reactfield.useFieldControlProps_unstable)(props, {
         supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
+        supportsRequired: true
     });
     const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
     const contextDisabled = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.disabled);

package/lib-commonjs/components/TagPickerInput/useTagPickerInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type {\n TagPickerInputBaseProps,\n TagPickerInputBaseState,\n TagPickerInputProps,\n TagPickerInputState,\n} from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n useMergedRefs,\n getIntrinsicElementProps,\n useEventCallback,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useTabsterEscapeIgnore } from '../../utils/useTabsterEscapeIgnore';\n\n/*\n Create the base state required to render TagPickerInput, without design-only props.\n * The Base hook omits Tabster-driven focus management; consumers can re-add it via the\n * styled wrapper {@link useTagPickerInput_unstable} or by composing their own keydown handler.\n \n @param props - props from this instance of TagPickerInput (without appearance)\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n /\nexport const useTagPickerInputBase_unstable = (\n props: TagPickerInputBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): TagPickerInputBaseState => {\n const fieldProps = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true,\n supportsSize: true,\n });\n const { controller: activeDescendantController } = useActiveDescendantContext();\n const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n useIsomorphicLayoutEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n setTagPickerInputStretchStyle(triggerRef.current);\n }, [selectedOptions, triggerRef]);\n\n useIsomorphicLayoutEffect(() => {\n if (triggerRef.current) {\n const input = triggerRef.current;\n const cb = () => setTagPickerInputStretchStyle(input);\n input.addEventListener('input', cb);\n return () => {\n input.removeEventListener('input', cb);\n };\n }\n }, [triggerRef]);\n\n const { value = contextValue, disabled = contextDisabled } = fieldProps;\n\n const isTypingRef = React.useRef(false);\n\n const root = useInputTriggerSlot(\n {\n type: 'text',\n value: value ?? '',\n 'aria-controls': open ? popoverId : undefined,\n disabled,\n ...getIntrinsicElementProps('input', fieldProps),\n onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n fieldProps.onKeyDown?.(event);\n if (event.key === Space) {\n if (open && !isTypingRef.current) {\n setOpen(event, false);\n }\n } else if (event.key === Enter) {\n if (open) {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n setOpen(event, false);\n });\n } else {\n setOpen(event, true);\n }\n }\n isTypingRef.current =\n event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n }),\n },\n useMergedRefs(triggerRef, ref),\n {\n activeDescendantController,\n freeform: false,\n state: {\n clearSelection,\n getOptionById,\n open,\n selectedOptions,\n selectOption,\n setHasFocus,\n setOpen,\n setValue,\n multiselect: true,\n value: fieldProps.value,\n },\n },\n );\n\n return {\n components: {\n root: 'input',\n },\n root,\n disabled,\n };\n};\n\n/\n Create the state required to render TagPickerInput.\n \n The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n \n @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n /\nexport const useTagPickerInput_unstable = (\n props: TagPickerInputProps,\n ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const { findLastFocusable } = useFocusFinders();\n\n const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n props.onKeyDown?.(event);\n if (\n (event.key === ArrowLeft \|\| event.key === Backspace) &&\n event.currentTarget.selectionStart === 0 &&\n event.currentTarget.selectionEnd === 0 &&\n tagPickerGroupRef.current\n ) {\n findLastFocusable(tagPickerGroupRef.current)?.focus();\n }\n });\n\n const baseState = useTagPickerInputBase_unstable({ ...props, onKeyDown }, ref);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n\n return {\n ...baseState,\n size,\n root: {\n ...useTabsterEscapeIgnore(baseState.root, open),\n ...baseState.root,\n },\n };\n};\n\n/\n while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n \n This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n \n @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n // first we need to remove the CSS variable\n // to properly calculate the difference between scrollWidth and offsetWidth\n input.style.removeProperty(tagPickerInputCSSRules.width);\n if (input.scrollWidth > input.offsetWidth + 1) {\n input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n } else {\n input.style.removeProperty(tagPickerInputCSSRules.width);\n }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTabsterEscapeIgnore","useTagPickerInputBase_unstable","props","ref","fieldProps","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","contextDisabled","ctx","disabled","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","isTypingRef","useRef","root","type","onKeyDown","event","key","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","useTagPickerInput_unstable","tagPickerGroupRef","findLastFocusable","currentTarget","selectionStart","selectionEnd","focus","baseState","size","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type {\n TagPickerInputBaseProps,\n TagPickerInputBaseState,\n TagPickerInputProps,\n TagPickerInputState,\n} from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n useMergedRefs,\n getIntrinsicElementProps,\n useEventCallback,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useTabsterEscapeIgnore } from '../../utils/useTabsterEscapeIgnore';\n\n/*\n Create the base state required to render TagPickerInput, without design-only props.\n * The Base hook omits Tabster-driven focus management; consumers can re-add it via the\n * styled wrapper {@link useTagPickerInput_unstable} or by composing their own keydown handler.\n \n @param props - props from this instance of TagPickerInput (without appearance)\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n /\nexport const useTagPickerInputBase_unstable = (\n props: TagPickerInputBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): TagPickerInputBaseState => {\n // NOTE: `supportsSize` is intentionally not used here. `TagPickerInput` has no `size` prop, its size comes from\n // `TagPickerContext` and uses a different scale (`'medium' \| 'large' \| 'extra-large'`) than `Field` size.\n const fieldProps = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true,\n });\n const { controller: activeDescendantController } = useActiveDescendantContext();\n const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n useIsomorphicLayoutEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n setTagPickerInputStretchStyle(triggerRef.current);\n }, [selectedOptions, triggerRef]);\n\n useIsomorphicLayoutEffect(() => {\n if (triggerRef.current) {\n const input = triggerRef.current;\n const cb = () => setTagPickerInputStretchStyle(input);\n input.addEventListener('input', cb);\n return () => {\n input.removeEventListener('input', cb);\n };\n }\n }, [triggerRef]);\n\n const { value = contextValue, disabled = contextDisabled } = fieldProps;\n\n const isTypingRef = React.useRef(false);\n\n const root = useInputTriggerSlot(\n {\n type: 'text',\n value: value ?? '',\n 'aria-controls': open ? popoverId : undefined,\n disabled,\n ...getIntrinsicElementProps('input', fieldProps),\n onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n fieldProps.onKeyDown?.(event);\n if (event.key === Space) {\n if (open && !isTypingRef.current) {\n setOpen(event, false);\n }\n } else if (event.key === Enter) {\n if (open) {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n setOpen(event, false);\n });\n } else {\n setOpen(event, true);\n }\n }\n isTypingRef.current =\n event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n }),\n },\n useMergedRefs(triggerRef, ref),\n {\n activeDescendantController,\n freeform: false,\n state: {\n clearSelection,\n getOptionById,\n open,\n selectedOptions,\n selectOption,\n setHasFocus,\n setOpen,\n setValue,\n multiselect: true,\n value: fieldProps.value,\n },\n },\n );\n\n return {\n components: {\n root: 'input',\n },\n root,\n disabled,\n };\n};\n\n/\n Create the state required to render TagPickerInput.\n \n The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n \n @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n /\nexport const useTagPickerInput_unstable = (\n props: TagPickerInputProps,\n ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const { findLastFocusable } = useFocusFinders();\n\n const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n props.onKeyDown?.(event);\n if (\n (event.key === ArrowLeft \|\| event.key === Backspace) &&\n event.currentTarget.selectionStart === 0 &&\n event.currentTarget.selectionEnd === 0 &&\n tagPickerGroupRef.current\n ) {\n findLastFocusable(tagPickerGroupRef.current)?.focus();\n }\n });\n\n const baseState = useTagPickerInputBase_unstable({ ...props, onKeyDown }, ref);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n\n return {\n ...baseState,\n size,\n root: {\n ...useTabsterEscapeIgnore(baseState.root, open),\n ...baseState.root,\n },\n };\n};\n\n/\n while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n \n This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n \n @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n // first we need to remove the CSS variable\n // to properly calculate the difference between scrollWidth and offsetWidth\n input.style.removeProperty(tagPickerInputCSSRules.width);\n if (input.scrollWidth > input.offsetWidth + 1) {\n input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n } else {\n input.style.removeProperty(tagPickerInputCSSRules.width);\n }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTabsterEscapeIgnore","useTagPickerInputBase_unstable","props","ref","fieldProps","supportsLabelFor","supportsRequired","controller","activeDescendantController","contextDisabled","ctx","disabled","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","isTypingRef","useRef","root","type","onKeyDown","event","key","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","useTagPickerInput_unstable","tagPickerGroupRef","findLastFocusable","currentTarget","selectionStart","selectionEnd","focus","baseState","size","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tag-picker",
-  "version": "9.10.2",
+  "version": "9.10.4",
   "description": "FluentUI TagPicker component",
   "main": "lib-commonjs/index.cjs",
   "module": "lib/index.js",
@@ -20,28 +20,32 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.9",
-    "@fluentui/react-aria": "^9.17.14",
-    "@fluentui/react-combobox": "^9.17.5",
-    "@fluentui/react-context-selector": "^9.2.19",
-    "@fluentui/react-field": "^9.5.4",
+    "@fluentui/react-aria": "^9.17.15",
+    "@fluentui/react-combobox": "^9.17.6",
+    "@fluentui/react-context-selector": "^9.2.20",
+    "@fluentui/react-field": "^9.5.5",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.5",
-    "@fluentui/react-portal": "^9.8.15",
-    "@fluentui/react-positioning": "^9.23.1",
-    "@fluentui/react-shared-contexts": "^9.26.3",
-    "@fluentui/react-tabster": "^9.26.17",
-    "@fluentui/react-tags": "^9.9.4",
+    "@fluentui/react-jsx-runtime": "^9.4.6",
+    "@fluentui/react-portal": "^9.8.16",
+    "@fluentui/react-positioning": "^9.23.2",
+    "@fluentui/react-shared-contexts": "^9.26.4",
+    "@fluentui/react-tabster": "^9.26.18",
+    "@fluentui/react-tags": "^9.9.6",
     "@fluentui/react-theme": "^9.2.2",
-    "@fluentui/react-utilities": "^9.26.6",
+    "@fluentui/react-utilities": "^9.26.7",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <20.0.0",
-    "@types/react-dom": ">=16.9.0 <20.0.0",
     "react": ">=16.14.0 <20.0.0",
     "react-dom": ">=16.14.0 <20.0.0"
   },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
   "exports": {
     ".": {
       "import": {