@fluentui/react-tags 9.9.0 → 9.9.1

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-tags
 
-This log was last generated on Tue, 26 May 2026 09:33:31 GMT and should not be manually modified.
+This log was last generated on Wed, 27 May 2026 11:18:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.9.1)
+
+Wed, 27 May 2026 11:18:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.9.0..@fluentui/react-tags_v9.9.1)
+
+### Patches
+
+- fix: decouple useTagGroupBase_unstable from Tabster; export contexts. This is technically a breaking change, but the prior Tabster coupling was a programmatic mistake and not intended public behavior. If you run into issues, please bump to the next version. ([PR #36228](https://github.com/microsoft/fluentui/pull/36228) by vgenaev@gmail.com)
+
 ## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.9.0)
 
-Tue, 26 May 2026 09:33:31 GMT 
+Tue, 26 May 2026 09:39:09 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.8.1..@fluentui/react-tags_v9.9.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -10,7 +10,6 @@ import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
 
 /**
  * InteractionTag component - a visual representation of an attribute with primary and secondary actions.
@@ -540,12 +539,7 @@ export declare const useTagGroup_unstable: (props: TagGroupProps, ref: React_2.R
  * @param props - props from this instance of TagGroup (without appearance, size)
  * @param ref - reference to root HTMLDivElement of TagGroup
  */
-export declare const useTagGroupBase_unstable: (props: TagGroupBaseProps, ref: React_2.Ref<HTMLDivElement>, options?: UseTagGroupBaseOptions) => TagGroupBaseState;
-
-declare type UseTagGroupBaseOptions = {
-    arrowNavigationProps?: TabsterDOMAttribute;
-    onAfterTagDismiss?: (container: HTMLElement | null) => void;
-};
+export declare const useTagGroupBase_unstable: (props: TagGroupBaseProps, ref: React_2.Ref<HTMLDivElement>) => TagGroupBaseState;
 
 export declare const useTagGroupContext_unstable: () => TagGroupContextValue;
 

package/lib/components/TagGroup/useTagGroup.js

@@ -9,19 +9,15 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
  *
  * @param props - props from this instance of TagGroup (without appearance, size)
  * @param ref - reference to root HTMLDivElement of TagGroup
- */ export const useTagGroupBase_unstable = (props, ref, options)=>{
+ */ export const useTagGroupBase_unstable = (props, ref)=>{
     const { onDismiss, disabled = false, defaultSelectedValues, dismissible = false, role = 'toolbar', onTagSelect, selectedValues, ...rest } = props;
-    const innerRef = React.useRef(undefined);
     const [items, setItems] = useControllableState({
         defaultState: defaultSelectedValues,
         state: selectedValues,
         initialState: []
     });
     const handleTagDismiss = useEventCallback((e, data)=>{
-        var _options_onAfterTagDismiss;
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e, data);
-        var _innerRef_current;
-        options === null || options === void 0 ? void 0 : (_options_onAfterTagDismiss = options.onAfterTagDismiss) === null || _options_onAfterTagDismiss === void 0 ? void 0 : _options_onAfterTagDismiss.call(options, (_innerRef_current = innerRef.current) !== null && _innerRef_current !== void 0 ? _innerRef_current : null);
     });
     const handleTagSelect = useEventCallback(mergeCallbacks(onTagSelect, (_, data)=>{
         if (items.includes(data.value)) {
@@ -44,13 +40,9 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
             root: 'div'
         },
         root: slot.always(getIntrinsicElementProps('div', {
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: useMergedRefs(ref, innerRef),
+            ref,
             role,
             'aria-disabled': disabled,
-            ...options === null || options === void 0 ? void 0 : options.arrowNavigationProps,
             ...rest
         }), {
             elementType: 'div'
@@ -74,7 +66,12 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
         axis: 'both',
         memorizeCurrent: true
     });
-    const onAfterTagDismiss = useEventCallback((container)=>{
+    const innerRef = React.useRef(null);
+    const mergedRef = useMergedRefs(ref, innerRef);
+    const enhancedOnDismiss = useEventCallback((e, data)=>{
+        var _props_onDismiss;
+        (_props_onDismiss = props.onDismiss) === null || _props_onDismiss === void 0 ? void 0 : _props_onDismiss.call(props, e, data);
+        const container = innerRef.current;
         const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
         if (container === null || container === void 0 ? void 0 : container.contains(activeElement)) {
             // focus on next tag only if the active element is within the current tag group
@@ -100,10 +97,11 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
         }
     });
     return {
-        ...useTagGroupBase_unstable(props, ref, {
-            arrowNavigationProps,
-            onAfterTagDismiss
-        }),
+        ...useTagGroupBase_unstable({
+            ...arrowNavigationProps,
+            ...props,
+            onDismiss: enhancedOnDismiss
+        }, mergedRef),
         size,
         appearance
     };

package/lib/components/TagGroup/useTagGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagGroup/useTagGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TagGroupBaseProps, TagGroupBaseState, TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\nimport type { TagValue } from '../../utils/types';\nimport type { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\ntype UseTagGroupBaseOptions = {\n  arrowNavigationProps?: TabsterDOMAttribute;\n  onAfterTagDismiss?: (container: HTMLElement | null) => void;\n};\n\n/**\n * Create the base state required to render TagGroup, without design-only props.\n *\n * @param props - props from this instance of TagGroup (without appearance, size)\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroupBase_unstable = (\n  props: TagGroupBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n  options?: UseTagGroupBaseOptions,\n): TagGroupBaseState => {\n  const {\n    onDismiss,\n    disabled = false,\n    defaultSelectedValues,\n    dismissible = false,\n    role = 'toolbar',\n    onTagSelect,\n    selectedValues,\n    ...rest\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(undefined);\n\n  const [items, setItems] = useControllableState<Array<TagValue>>({\n    defaultState: defaultSelectedValues,\n    state: selectedValues,\n    initialState: [],\n  });\n\n  const handleTagDismiss: TagGroupBaseState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n    options?.onAfterTagDismiss?.(innerRef.current ?? null);\n  });\n\n  const handleTagSelect: TagGroupBaseState['handleTagSelect'] = useEventCallback(\n    mergeCallbacks(onTagSelect, (_, data) => {\n      if (items.includes(data.value)) {\n        setItems(items.filter(item => item !== data.value));\n      } else {\n        setItems([...items, data.value]);\n      }\n    }),\n  );\n\n  return {\n    handleTagDismiss,\n    handleTagSelect: onTagSelect ? handleTagSelect : undefined,\n    selectedValues: items,\n    role,\n    disabled,\n    dismissible,\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role,\n        'aria-disabled': disabled,\n        ...options?.arrowNavigationProps,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const { size = 'medium', appearance = 'filled' } = props;\n\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  const onAfterTagDismiss = useEventCallback((container: HTMLElement | null) => {\n    const activeElement = targetDocument?.activeElement;\n    if (container?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container });\n        prev?.focus();\n      }\n    }\n  });\n\n  return {\n    ...useTagGroupBase_unstable(props, ref, { arrowNavigationProps, onAfterTagDismiss }),\n    size,\n    appearance,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useControllableState","useEventCallback","mergeCallbacks","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroupBase_unstable","props","ref","options","onDismiss","disabled","defaultSelectedValues","dismissible","role","onTagSelect","selectedValues","rest","innerRef","useRef","undefined","items","setItems","defaultState","state","initialState","handleTagDismiss","e","data","onAfterTagDismiss","current","handleTagSelect","_","includes","value","filter","item","components","root","always","arrowNavigationProps","elementType","useTagGroup_unstable","size","appearance","targetDocument","findNextFocusable","findPrevFocusable","circular","axis","memorizeCurrent","container","activeElement","contains","next","focus","className","prev","parentElement"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagGroup/useTagGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TagGroupBaseProps, TagGroupBaseState, TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\nimport type { TagValue } from '../../utils/types';\n\n/**\n * Create the base state required to render TagGroup, without design-only props.\n *\n * @param props - props from this instance of TagGroup (without appearance, size)\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroupBase_unstable = (\n  props: TagGroupBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagGroupBaseState => {\n  const {\n    onDismiss,\n    disabled = false,\n    defaultSelectedValues,\n    dismissible = false,\n    role = 'toolbar',\n    onTagSelect,\n    selectedValues,\n    ...rest\n  } = props;\n\n  const [items, setItems] = useControllableState<Array<TagValue>>({\n    defaultState: defaultSelectedValues,\n    state: selectedValues,\n    initialState: [],\n  });\n\n  const handleTagDismiss: TagGroupBaseState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n  });\n\n  const handleTagSelect: TagGroupBaseState['handleTagSelect'] = useEventCallback(\n    mergeCallbacks(onTagSelect, (_, data) => {\n      if (items.includes(data.value)) {\n        setItems(items.filter(item => item !== data.value));\n      } else {\n        setItems([...items, data.value]);\n      }\n    }),\n  );\n\n  return {\n    handleTagDismiss,\n    handleTagSelect: onTagSelect ? handleTagSelect : undefined,\n    selectedValues: items,\n    role,\n    disabled,\n    dismissible,\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role,\n        'aria-disabled': disabled,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const { size = 'medium', appearance = 'filled' } = props;\n\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs(ref, innerRef);\n\n  const enhancedOnDismiss: TagGroupProps['onDismiss'] = useEventCallback((e, data) => {\n    props.onDismiss?.(e, data);\n\n    const container = innerRef.current;\n    const activeElement = targetDocument?.activeElement;\n\n    if (container?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container });\n        prev?.focus();\n      }\n    }\n  });\n\n  return {\n    ...useTagGroupBase_unstable({ ...arrowNavigationProps, ...props, onDismiss: enhancedOnDismiss }, mergedRef),\n    size,\n    appearance,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useControllableState","useEventCallback","mergeCallbacks","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroupBase_unstable","props","ref","onDismiss","disabled","defaultSelectedValues","dismissible","role","onTagSelect","selectedValues","rest","items","setItems","defaultState","state","initialState","handleTagDismiss","e","data","handleTagSelect","_","includes","value","filter","item","undefined","components","root","always","elementType","useTagGroup_unstable","size","appearance","targetDocument","findNextFocusable","findPrevFocusable","arrowNavigationProps","circular","axis","memorizeCurrent","innerRef","useRef","mergedRef","enhancedOnDismiss","container","current","activeElement","contains","next","focus","className","prev","parentElement"],"mappings":"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"}

package/lib-commonjs/components/TagGroup/useTagGroup.js

@@ -23,19 +23,15 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reacttabster = require("@fluentui/react-tabster");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useInteractionTagSecondaryStylesstyles = require("../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles");
-const useTagGroupBase_unstable = (props, ref, options)=>{
+const useTagGroupBase_unstable = (props, ref)=>{
     const { onDismiss, disabled = false, defaultSelectedValues, dismissible = false, role = 'toolbar', onTagSelect, selectedValues, ...rest } = props;
-    const innerRef = _react.useRef(undefined);
     const [items, setItems] = (0, _reactutilities.useControllableState)({
         defaultState: defaultSelectedValues,
         state: selectedValues,
         initialState: []
     });
     const handleTagDismiss = (0, _reactutilities.useEventCallback)((e, data)=>{
-        var _options_onAfterTagDismiss;
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e, data);
-        var _innerRef_current;
-        options === null || options === void 0 ? void 0 : (_options_onAfterTagDismiss = options.onAfterTagDismiss) === null || _options_onAfterTagDismiss === void 0 ? void 0 : _options_onAfterTagDismiss.call(options, (_innerRef_current = innerRef.current) !== null && _innerRef_current !== void 0 ? _innerRef_current : null);
     });
     const handleTagSelect = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onTagSelect, (_, data)=>{
         if (items.includes(data.value)) {
@@ -58,13 +54,9 @@ const useTagGroupBase_unstable = (props, ref, options)=>{
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
+            ref,
             role,
             'aria-disabled': disabled,
-            ...options === null || options === void 0 ? void 0 : options.arrowNavigationProps,
             ...rest
         }), {
             elementType: 'div'
@@ -80,7 +72,12 @@ const useTagGroup_unstable = (props, ref)=>{
         axis: 'both',
         memorizeCurrent: true
     });
-    const onAfterTagDismiss = (0, _reactutilities.useEventCallback)((container)=>{
+    const innerRef = _react.useRef(null);
+    const mergedRef = (0, _reactutilities.useMergedRefs)(ref, innerRef);
+    const enhancedOnDismiss = (0, _reactutilities.useEventCallback)((e, data)=>{
+        var _props_onDismiss;
+        (_props_onDismiss = props.onDismiss) === null || _props_onDismiss === void 0 ? void 0 : _props_onDismiss.call(props, e, data);
+        const container = innerRef.current;
         const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
         if (container === null || container === void 0 ? void 0 : container.contains(activeElement)) {
             // focus on next tag only if the active element is within the current tag group
@@ -106,10 +103,11 @@ const useTagGroup_unstable = (props, ref)=>{
         }
     });
     return {
-        ...useTagGroupBase_unstable(props, ref, {
-            arrowNavigationProps,
-            onAfterTagDismiss
-        }),
+        ...useTagGroupBase_unstable({
+            ...arrowNavigationProps,
+            ...props,
+            onDismiss: enhancedOnDismiss
+        }, mergedRef),
         size,
         appearance
     };

package/lib-commonjs/components/TagGroup/useTagGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagGroup/useTagGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TagGroupBaseProps, TagGroupBaseState, TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\nimport type { TagValue } from '../../utils/types';\nimport type { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\ntype UseTagGroupBaseOptions = {\n  arrowNavigationProps?: TabsterDOMAttribute;\n  onAfterTagDismiss?: (container: HTMLElement | null) => void;\n};\n\n/**\n * Create the base state required to render TagGroup, without design-only props.\n *\n * @param props - props from this instance of TagGroup (without appearance, size)\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroupBase_unstable = (\n  props: TagGroupBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n  options?: UseTagGroupBaseOptions,\n): TagGroupBaseState => {\n  const {\n    onDismiss,\n    disabled = false,\n    defaultSelectedValues,\n    dismissible = false,\n    role = 'toolbar',\n    onTagSelect,\n    selectedValues,\n    ...rest\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(undefined);\n\n  const [items, setItems] = useControllableState<Array<TagValue>>({\n    defaultState: defaultSelectedValues,\n    state: selectedValues,\n    initialState: [],\n  });\n\n  const handleTagDismiss: TagGroupBaseState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n    options?.onAfterTagDismiss?.(innerRef.current ?? null);\n  });\n\n  const handleTagSelect: TagGroupBaseState['handleTagSelect'] = useEventCallback(\n    mergeCallbacks(onTagSelect, (_, data) => {\n      if (items.includes(data.value)) {\n        setItems(items.filter(item => item !== data.value));\n      } else {\n        setItems([...items, data.value]);\n      }\n    }),\n  );\n\n  return {\n    handleTagDismiss,\n    handleTagSelect: onTagSelect ? handleTagSelect : undefined,\n    selectedValues: items,\n    role,\n    disabled,\n    dismissible,\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role,\n        'aria-disabled': disabled,\n        ...options?.arrowNavigationProps,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const { size = 'medium', appearance = 'filled' } = props;\n\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  const onAfterTagDismiss = useEventCallback((container: HTMLElement | null) => {\n    const activeElement = targetDocument?.activeElement;\n    if (container?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container });\n        prev?.focus();\n      }\n    }\n  });\n\n  return {\n    ...useTagGroupBase_unstable(props, ref, { arrowNavigationProps, onAfterTagDismiss }),\n    size,\n    appearance,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useControllableState","useEventCallback","mergeCallbacks","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroupBase_unstable","props","ref","options","onDismiss","disabled","defaultSelectedValues","dismissible","role","onTagSelect","selectedValues","rest","innerRef","useRef","undefined","items","setItems","defaultState","state","initialState","handleTagDismiss","e","data","onAfterTagDismiss","current","handleTagSelect","_","includes","value","filter","item","components","root","always","arrowNavigationProps","elementType","useTagGroup_unstable","size","appearance","targetDocument","findNextFocusable","findPrevFocusable","circular","axis","memorizeCurrent","container","activeElement","contains","next","focus","className","prev","parentElement"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagGroup/useTagGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TagGroupBaseProps, TagGroupBaseState, TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\nimport type { TagValue } from '../../utils/types';\n\n/**\n * Create the base state required to render TagGroup, without design-only props.\n *\n * @param props - props from this instance of TagGroup (without appearance, size)\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroupBase_unstable = (\n  props: TagGroupBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagGroupBaseState => {\n  const {\n    onDismiss,\n    disabled = false,\n    defaultSelectedValues,\n    dismissible = false,\n    role = 'toolbar',\n    onTagSelect,\n    selectedValues,\n    ...rest\n  } = props;\n\n  const [items, setItems] = useControllableState<Array<TagValue>>({\n    defaultState: defaultSelectedValues,\n    state: selectedValues,\n    initialState: [],\n  });\n\n  const handleTagDismiss: TagGroupBaseState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n  });\n\n  const handleTagSelect: TagGroupBaseState['handleTagSelect'] = useEventCallback(\n    mergeCallbacks(onTagSelect, (_, data) => {\n      if (items.includes(data.value)) {\n        setItems(items.filter(item => item !== data.value));\n      } else {\n        setItems([...items, data.value]);\n      }\n    }),\n  );\n\n  return {\n    handleTagDismiss,\n    handleTagSelect: onTagSelect ? handleTagSelect : undefined,\n    selectedValues: items,\n    role,\n    disabled,\n    dismissible,\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role,\n        'aria-disabled': disabled,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const { size = 'medium', appearance = 'filled' } = props;\n\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs(ref, innerRef);\n\n  const enhancedOnDismiss: TagGroupProps['onDismiss'] = useEventCallback((e, data) => {\n    props.onDismiss?.(e, data);\n\n    const container = innerRef.current;\n    const activeElement = targetDocument?.activeElement;\n\n    if (container?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container });\n        prev?.focus();\n      }\n    }\n  });\n\n  return {\n    ...useTagGroupBase_unstable({ ...arrowNavigationProps, ...props, onDismiss: enhancedOnDismiss }, mergedRef),\n    size,\n    appearance,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useControllableState","useEventCallback","mergeCallbacks","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroupBase_unstable","props","ref","onDismiss","disabled","defaultSelectedValues","dismissible","role","onTagSelect","selectedValues","rest","items","setItems","defaultState","state","initialState","handleTagDismiss","e","data","handleTagSelect","_","includes","value","filter","item","undefined","components","root","always","elementType","useTagGroup_unstable","size","appearance","targetDocument","findNextFocusable","findPrevFocusable","arrowNavigationProps","circular","axis","memorizeCurrent","innerRef","useRef","mergedRef","enhancedOnDismiss","container","current","activeElement","contains","next","focus","className","prev","parentElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tags",
-  "version": "9.9.0",
+  "version": "9.9.1",
   "description": "Fluent UI Tag component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",