@fluentui/react-tag-picker 9.10.2 → 9.10.3

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # 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, 24 Aug 2026 08:15:11 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.10.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.10.3)
+
+Mon, 24 Aug 2026 08:15:11 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

@@ -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

@@ -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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"}
+{"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":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,YAAYC,cAAc,YAAY;AAOtC,SAASC,0BAA0B,QAAQ,uBAAuB;AAClE,SAASC,4BAA4B,QAAQ,qCAAkC;AAC/E,SACEC,aAAa,EACbC,wBAAwB,EACxBC,gBAAgB,EAChBC,yBAAyB,QACpB,4BAA4B;AACnC,SAASC,SAAS,EAAEC,SAAS,EAAEC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AAC7E,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,sBAAsB,QAAQ,wBAAqB;AAC5D,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,sBAAsB,QAAQ,wCAAqC;AAE5E;;;;;;;CAOC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,gHAAgH;IAChH,0GAA0G;IAC1G,MAAMC,aAAaP,8BAA8BK,OAAO;QACtDG,kBAAkB;QAClBC,kBAAkB;IACpB;IACA,MAAM,EAAEC,YAAYC,0BAA0B,EAAE,GAAGtB;IACnD,MAAMuB,kBAAkBtB,6BAA6BuB,CAAAA,MAAOA,IAAIC,QAAQ;IAExE,MAAMC,aAAazB,6BAA6BuB,CAAAA,MAAOA,IAAIE,UAAU;IACrE,MAAMC,kBAAkB1B,6BAA6BuB,CAAAA,MAAOA,IAAIG,eAAe;IAC/E,MAAMC,WAAW3B,6BAA6BuB,CAAAA,MAAOA,IAAII,QAAQ;IACjE,MAAMC,UAAU5B,6BAA6BuB,CAAAA,MAAOA,IAAIK,OAAO;IAC/D,MAAMC,cAAc7B,6BAA6BuB,CAAAA,MAAOA,IAAIM,WAAW;IACvE,MAAMC,iBAAiB9B,6BAA6BuB,CAAAA,MAAOA,IAAIO,cAAc;IAC7E,MAAMC,OAAO/B,6BAA6BuB,CAAAA,MAAOA,IAAIQ,IAAI;IACzD,MAAMC,YAAYhC,6BAA6BuB,CAAAA,MAAQA,IAAIU,SAAS,GAAGC,YAAYX,IAAIS,SAAS;IAChG,MAAMG,eAAenC,6BAA6BuB,CAAAA,MAAOA,IAAIY,YAAY;IACzE,MAAMC,gBAAgBpC,6BAA6BuB,CAAAA,MAAOA,IAAIa,aAAa;IAC3E,MAAMC,eAAerC,6BAA6BuB,CAAAA,MAAOA,IAAIe,KAAK;IAElElC,0BAA0B;QACxB,IAAI,CAACqB,WAAWc,OAAO,EAAE;YACvB;QACF;QACAC,8BAA8Bf,WAAWc,OAAO;IAClD,GAAG;QAACb;QAAiBD;KAAW;IAEhCrB,0BAA0B;QACxB,IAAIqB,WAAWc,OAAO,EAAE;YACtB,MAAME,QAAQhB,WAAWc,OAAO;YAChC,MAAMG,KAAK,IAAMF,8BAA8BC;YAC/CA,MAAME,gBAAgB,CAAC,SAASD;YAChC,OAAO;gBACLD,MAAMG,mBAAmB,CAAC,SAASF;YACrC;QACF;IACF,GAAG;QAACjB;KAAW;IAEf,MAAM,EAAEa,QAAQD,YAAY,EAAEb,WAAWF,eAAe,EAAE,GAAGL;IAE7D,MAAM4B,cAAchD,MAAMiD,MAAM,CAAC;IAEjC,MAAMC,OAAOtC,oBACX;QACEuC,MAAM;QACNV,OAAOA,kBAAAA,mBAAAA,QAAS;QAChB,iBAAiBP,OAAOC,YAAYE;QACpCV;QACA,GAAGtB,yBAAyB,SAASe,WAAW;QAChDgC,WAAW9C,iBAAiB,CAAC+C;gBAC3BjC;aAAAA,wBAAAA,WAAWgC,SAAS,cAApBhC,4CAAAA,2BAAAA,YAAuBiC;YACvB,IAAIA,MAAMC,GAAG,KAAK3C,OAAO;gBACvB,IAAIuB,QAAQ,CAACc,YAAYN,OAAO,EAAE;oBAChCX,QAAQsB,OAAO;gBACjB;YACF,OAAO,IAAIA,MAAMC,GAAG,KAAK5C,OAAO;gBAC9B,IAAIwB,MAAM;oBACRjC,SAASsD,uBAAuB,CAAC;wBAC/BzB,SAASO;wBACTN,QAAQsB,OAAO;oBACjB;gBACF,OAAO;oBACLtB,QAAQsB,OAAO;gBACjB;YACF;YACAL,YAAYN,OAAO,GACjBW,MAAMC,GAAG,CAACE,MAAM,KAAK,KAAKH,MAAMI,IAAI,KAAK9C,SAAS,CAAC0C,MAAMK,MAAM,IAAI,CAACL,MAAMM,OAAO,IAAI,CAACN,MAAMO,OAAO;QACvG;IACF,GACAxD,cAAcwB,YAAYT,MAC1B;QACEK;QACAqC,UAAU;QACVC,OAAO;YACL7B;YACAM;YACAL;YACAL;YACAS;YACAN;YACAD;YACAD;YACAiC,aAAa;YACbtB,OAAOrB,WAAWqB,KAAK;QACzB;IACF;IAGF,OAAO;QACLuB,YAAY;YACVd,MAAM;QACR;QACAA;QACAvB;IACF;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMsC,6BAA6B,CACxC/C,OACAC;IAEA,MAAM+C,oBAAoB/D,6BAA6BuB,CAAAA,MAAOA,IAAIwC,iBAAiB;IACnF,MAAM,EAAEC,iBAAiB,EAAE,GAAGpD;IAE9B,MAAMqC,YAAY9C,iBAAiB,CAAC+C;YAClCnC;SAAAA,mBAAAA,MAAMkC,SAAS,cAAflC,uCAAAA,sBAAAA,OAAkBmC;QAClB,IACE,AAACA,CAAAA,MAAMC,GAAG,KAAK9C,aAAa6C,MAAMC,GAAG,KAAK7C,SAAQ,KAClD4C,MAAMe,aAAa,CAACC,cAAc,KAAK,KACvChB,MAAMe,aAAa,CAACE,YAAY,KAAK,KACrCJ,kBAAkBxB,OAAO,EACzB;gBACAyB;aAAAA,qBAAAA,kBAAkBD,kBAAkBxB,OAAO,eAA3CyB,yCAAAA,mBAA8CI,KAAK;QACrD;IACF;IAEA,MAAMC,YAAYvD,+BAA+B;QAAE,GAAGC,KAAK;QAAEkC;IAAU,GAAGjC;IAC1E,MAAMe,OAAO/B,6BAA6BuB,CAAAA,MAAOA,IAAIQ,IAAI;IACzD,MAAMuC,OAAOtE,6BAA6BuB,CAAAA,MAAOA,IAAI+C,IAAI;IAEzD,OAAO;QACL,GAAGD,SAAS;QACZC;QACAvB,MAAM;YACJ,GAAGlC,uBAAuBwD,UAAUtB,IAAI,EAAEhB,KAAK;YAC/C,GAAGsC,UAAUtB,IAAI;QACnB;IACF;AACF,EAAE;AAEF;;;;;;;;;;CAUC,GACD,MAAMP,gCAAgC,CAACC;IACrC,2CAA2C;IAC3C,2EAA2E;IAC3EA,MAAM8B,KAAK,CAACC,cAAc,CAAC7D,uBAAuB8D,KAAK;IACvD,IAAIhC,MAAMiC,WAAW,GAAGjC,MAAMkC,WAAW,GAAG,GAAG;QAC7ClC,MAAM8B,KAAK,CAACK,WAAW,CAACjE,uBAAuB8D,KAAK,EAAE;IACxD,OAAO;QACLhC,MAAM8B,KAAK,CAACC,cAAc,CAAC7D,uBAAuB8D,KAAK;IACzD;AACF"}

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

@@ -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

@@ -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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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tag-picker",
-  "version": "9.10.2",
+  "version": "9.10.3",
   "description": "FluentUI TagPicker component",
   "main": "lib-commonjs/index.cjs",
   "module": "lib/index.js",
@@ -30,7 +30,7 @@
     "@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-tags": "^9.9.5",
     "@fluentui/react-theme": "^9.2.2",
     "@fluentui/react-utilities": "^9.26.6",
     "@griffel/react": "^1.5.32",