@fluentui/react-tabs 9.3.59 → 9.4.0

package/CHANGELOG.md

@@ -1,18 +1,32 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Thu, 30 Nov 2023 13:37:55 GMT and should not be manually modified.
+This log was last generated on Thu, 14 Dec 2023 09:51:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.4.0)
+
+Thu, 14 Dec 2023 09:51:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.59..@fluentui/react-tabs_v9.4.0)
+
+### Minor changes
+
+- feat: added select tab on focus behavior ([PR #29854](https://github.com/microsoft/fluentui/pull/29854) by gcox@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.43 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.21 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.13.1 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-tabster to v9.15.1 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-utilities to v9.15.3 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+
 ## [9.3.59](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.59)
 
-Thu, 30 Nov 2023 13:37:55 GMT 
+Thu, 30 Nov 2023 13:42:08 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.58..@fluentui/react-tabs_v9.3.59)
 
 ### Patches
 
-- Bump @fluentui/react-jsx-runtime to v9.0.20 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
-- Bump @fluentui/react-tabster to v9.15.0 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.20 ([PR #29929](https://github.com/microsoft/fluentui/pull/29929) by beachball)
+- Bump @fluentui/react-tabster to v9.15.0 ([PR #29929](https://github.com/microsoft/fluentui/pull/29929) by beachball)
 
 ## [9.3.58](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.58)
 

package/dist/index.d.ts

@@ -28,7 +28,7 @@ export declare type SelectTabData = {
     value: TabValue;
 };
 
-export declare type SelectTabEvent<E = HTMLElement> = React_2.MouseEvent<E> | React_2.KeyboardEvent<E>;
+export declare type SelectTabEvent<E = HTMLElement> = React_2.MouseEvent<E> | React_2.KeyboardEvent<E> | React_2.FocusEvent<E>;
 
 export declare type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;
 
@@ -50,7 +50,7 @@ export declare const TabList: ForwardRefComponent<TabListProps>;
 
 export declare const tabListClassNames: SlotClassNames<TabListSlots>;
 
-export declare type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectedValue' | 'reserveSelectedTabSpace'> & Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
+export declare type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'> & Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
     /** A callback to allow a tab to register itself with the tab list. */
     onRegister: RegisterTabEventHandler;
     /** A callback to allow a tab to unregister itself with the tab list. */
@@ -113,6 +113,11 @@ export declare type TabListProps = ComponentProps<TabListSlots> & {
      * Raised when a tab is selected.
      */
     onTabSelect?: SelectTabEventHandler;
+    /**
+     * When true, focusing a tab will select it.
+     * @default false
+     */
+    selectTabOnFocus?: boolean;
     /**
      * The value of the currently selected tab.
      */

package/lib/components/Tab/useTab.js

@@ -10,9 +10,10 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
  * @param props - props from this instance of Tab
  * @param ref - reference to root HTMLElement of Tab
  */ export const useTab_unstable = (props, ref)=>{
-    const { content, disabled: tabDisabled = false, icon, onClick, value } = props;
+    const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;
     const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);
     const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);
+    const selectTabOnFocus = useTabListContext_unstable((ctx)=>ctx.selectTabOnFocus);
     const listDisabled = useTabListContext_unstable((ctx)=>ctx.disabled);
     const selected = useTabListContext_unstable((ctx)=>ctx.selectedValue === value);
     const onRegister = useTabListContext_unstable((ctx)=>ctx.onRegister);
@@ -22,9 +23,11 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
     const vertical = useTabListContext_unstable((ctx)=>!!ctx.vertical);
     const disabled = listDisabled || tabDisabled;
     const innerRef = React.useRef(null);
-    const onTabClick = useEventCallback(mergeCallbacks(onClick, (event)=>onSelect(event, {
+    const onSelectCallback = (event)=>onSelect(event, {
             value
-        })));
+        });
+    const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));
+    const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));
     React.useEffect(()=>{
         onRegister({
             value,
@@ -71,7 +74,8 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
             'aria-selected': disabled ? undefined : `${selected}`,
             ...props,
             disabled,
-            onClick: onTabClick
+            onClick: onTabClick,
+            onFocus: selectTabOnFocus ? onTabFocus : onFocus
         }), {
             elementType: 'button'
         }),

package/lib/components/Tab/useTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, disabled: tabDisabled = false, icon, onClick, value } = props;\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n  const size = useTabListContext_unstable(ctx => ctx.size);\n  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, (event: SelectTabEvent) => onSelect(event, { value })));\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\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<HTMLButtonElement>,\n        role: 'tab',\n        type: 'button',\n        // aria-selected undefined indicates it is not selectable\n        // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n        'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),\n        ...props,\n        disabled,\n        onClick: onTabClick,\n      }),\n      { elementType: 'button' },\n    ),\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    contentReservedSpace: slot.optional(content, {\n      renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","value","appearance","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onTabClick","event","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","iconOnly","Boolean","components","root","contentReservedSpace","role","type","undefined","renderByDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAEnC,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC;IAC/C,MAAM,EAAEC,OAAO,EAAEC,UAAUC,cAAc,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGP;IAEzE,MAAMQ,aAAaV,2BAA2BW,CAAAA,MAAOA,IAAID,UAAU;IACnE,MAAME,0BAA0BZ,2BAA2BW,CAAAA,MAAOA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeb,2BAA2BW,CAAAA,MAAOA,IAAIN,QAAQ;IACnE,MAAMS,WAAWd,2BAA2BW,CAAAA,MAAOA,IAAII,aAAa,KAAKN;IACzE,MAAMO,aAAahB,2BAA2BW,CAAAA,MAAOA,IAAIK,UAAU;IACnE,MAAMC,eAAejB,2BAA2BW,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,WAAWlB,2BAA2BW,CAAAA,MAAOA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOnB,2BAA2BW,CAAAA,MAAOA,IAAIQ,IAAI;IACvD,MAAMC,WAAWpB,2BAA2BW,CAAAA,MAAO,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMf,WAAWQ,gBAAgBP;IAEjC,MAAMe,WAAW3B,MAAM4B,MAAM,CAAc;IAC3C,MAAMC,aAAa1B,iBAAiBD,eAAeY,SAAS,CAACgB,QAA0BN,SAASM,OAAO;YAAEf;QAAM;IAE/Gf,MAAM+B,SAAS,CAAC;QACdT,WAAW;YACTP;YACAN,KAAKkB;QACP;QAEA,OAAO;YACLJ,aAAa;gBAAER;gBAAON,KAAKkB;YAAS;QACtC;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUZ;KAAM;IAE9C,MAAMiB,WAAW3B,KAAK4B,QAAQ,CAACpB,MAAM;QAAEqB,aAAa;IAAO;IAC3D,MAAMC,cAAc9B,KAAK+B,MAAM,CAAC1B,SAAS;QACvC2B,cAAc;YAAEC,UAAU9B,MAAM8B,QAAQ;QAAC;QACzCJ,aAAa;IACf;IACA,MAAMK,WAAWC,QAAQR,CAAAA,qBAAAA,+BAAAA,SAAUM,QAAQ,KAAI,CAACH,YAAYG,QAAQ;IACpE,OAAO;QACLG,YAAY;YAAEC,MAAM;YAAU7B,MAAM;YAAQH,SAAS;YAAQiC,sBAAsB;QAAO;QAC1FD,MAAMrC,KAAK+B,MAAM,CACfnC,yBAAyB,UAAU;YACjC,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FQ,KAAKL,cAAcK,KAAKkB;YACxBiB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBlC,WAAWmC,YAAa,CAAC,EAAE1B,SAAS,CAAC;YACtD,GAAGZ,KAAK;YACRG;YACAG,SAASe;QACX,IACA;YAAEK,aAAa;QAAS;QAE1BrB,MAAMmB;QACNO;QACA7B,SAASyB;QACTQ,sBAAsBtC,KAAK4B,QAAQ,CAACvB,SAAS;YAC3CqC,iBAAiB,CAAC3B,YAAY,CAACmB,YAAYrB;YAC3CmB,cAAc;gBAAEC,UAAU9B,MAAM8B,QAAQ;YAAC;YACzCJ,aAAa;QACf;QACAlB;QACAL;QACAS;QACAK;QACAV;QACAW;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n  const size = useTabListContext_unstable(ctx => ctx.size);\n  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n  const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\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<HTMLButtonElement>,\n        role: 'tab',\n        type: 'button',\n        // aria-selected undefined indicates it is not selectable\n        // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n        'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),\n        ...props,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      }),\n      { elementType: 'button' },\n    ),\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    contentReservedSpace: slot.optional(content, {\n      renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","iconOnly","Boolean","components","root","contentReservedSpace","role","type","undefined","renderByDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAEnC,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC;IAC/C,MAAM,EAAEC,OAAO,EAAEC,UAAUC,cAAc,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGR;IAElF,MAAMS,aAAaX,2BAA2BY,CAAAA,MAAOA,IAAID,UAAU;IACnE,MAAME,0BAA0Bb,2BAA2BY,CAAAA,MAAOA,IAAIC,uBAAuB;IAC7F,MAAMC,mBAAmBd,2BAA2BY,CAAAA,MAAOA,IAAIE,gBAAgB;IAC/E,MAAMC,eAAef,2BAA2BY,CAAAA,MAAOA,IAAIP,QAAQ;IACnE,MAAMW,WAAWhB,2BAA2BY,CAAAA,MAAOA,IAAIK,aAAa,KAAKP;IACzE,MAAMQ,aAAalB,2BAA2BY,CAAAA,MAAOA,IAAIM,UAAU;IACnE,MAAMC,eAAenB,2BAA2BY,CAAAA,MAAOA,IAAIO,YAAY;IACvE,MAAMC,WAAWpB,2BAA2BY,CAAAA,MAAOA,IAAIQ,QAAQ;IAC/D,MAAMC,OAAOrB,2BAA2BY,CAAAA,MAAOA,IAAIS,IAAI;IACvD,MAAMC,WAAWtB,2BAA2BY,CAAAA,MAAO,CAAC,CAACA,IAAIU,QAAQ;IACjE,MAAMjB,WAAWU,gBAAgBT;IAEjC,MAAMiB,WAAW7B,MAAM8B,MAAM,CAAc;IAC3C,MAAMC,mBAAmB,CAACC,QAA0BN,SAASM,OAAO;YAAEhB;QAAM;IAC5E,MAAMiB,aAAa9B,iBAAiBD,eAAeY,SAASiB;IAC5D,MAAMG,aAAa/B,iBAAiBD,eAAea,SAASgB;IAE5D/B,MAAMmC,SAAS,CAAC;QACdX,WAAW;YACTR;YACAP,KAAKoB;QACP;QAEA,OAAO;YACLJ,aAAa;gBAAET;gBAAOP,KAAKoB;YAAS;QACtC;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUb;KAAM;IAE9C,MAAMoB,WAAW/B,KAAKgC,QAAQ,CAACxB,MAAM;QAAEyB,aAAa;IAAO;IAC3D,MAAMC,cAAclC,KAAKmC,MAAM,CAAC9B,SAAS;QACvC+B,cAAc;YAAEC,UAAUlC,MAAMkC,QAAQ;QAAC;QACzCJ,aAAa;IACf;IACA,MAAMK,WAAWC,QAAQR,CAAAA,qBAAAA,+BAAAA,SAAUM,QAAQ,KAAI,CAACH,YAAYG,QAAQ;IACpE,OAAO;QACLG,YAAY;YAAEC,MAAM;YAAUjC,MAAM;YAAQH,SAAS;YAAQqC,sBAAsB;QAAO;QAC1FD,MAAMzC,KAAKmC,MAAM,CACfvC,yBAAyB,UAAU;YACjC,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FQ,KAAKL,cAAcK,KAAKoB;YACxBmB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBtC,WAAWuC,YAAa,CAAC,EAAE5B,SAAS,CAAC;YACtD,GAAGd,KAAK;YACRG;YACAG,SAASmB;YACTlB,SAASK,mBAAmBc,aAAanB;QAC3C,IACA;YAAEuB,aAAa;QAAS;QAE1BzB,MAAMuB;QACNO;QACAjC,SAAS6B;QACTQ,sBAAsB1C,KAAKgC,QAAQ,CAAC3B,SAAS;YAC3CyC,iBAAiB,CAAC7B,YAAY,CAACqB,YAAYxB;YAC3CsB,cAAc;gBAAEC,UAAUlC,MAAMkC,QAAQ;YAAC;YACzCJ,aAAa;QACf;QACArB;QACAN;QACAW;QACAK;QACAX;QACAY;IACF;AACF,EAAE"}

package/lib/components/TabList/TabList.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TabList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n  /**\n   * The value of the tab.\n   */\n  value: TabValue;\n\n  /**\n   * The reference to the tab HTML element.\n   */\n  ref: React.RefObject<HTMLElement>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n  /**\n   * The slot associated with the root element of this tab list.\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> & {\n  /**\n   * A tab list can supports 'transparent' and 'subtle' appearance.\n   *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   *- 'transparent': No background and border styling\n   * The appearance affects each of the contained tabs.\n   * @default 'transparent'\n   */\n  appearance?: 'transparent' | 'subtle';\n\n  /**\n   * Tab size may change between unselected and selected states.\n   * The default scenario is a selected tab has bold text.\n   *\n   * When true, this property requests tabs be the same size whether unselected or selected.\n   * @default true\n   */\n  reserveSelectedTabSpace?: boolean;\n\n  /**\n   * The value of the tab to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   */\n  defaultSelectedValue?: TabValue;\n  /**\n   * A tab list can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Raised when a tab is selected.\n   */\n  onTabSelect?: SelectTabEventHandler;\n\n  /**\n   * The value of the currently selected tab.\n   */\n  selectedValue?: TabValue;\n\n  /**\n   * A tab list can be either 'small', 'medium', or 'large' size.\n   * The size affects each of the contained tabs.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A tab list can arrange its tabs vertically.\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectedValue' | 'reserveSelectedTabSpace'> &\n  Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n    /** A callback to allow a tab to register itself with the tab list. */\n    onRegister: RegisterTabEventHandler;\n\n    /** A callback to allow a tab to unregister itself with the tab list. */\n    onUnregister: RegisterTabEventHandler;\n    /**\n     * A callback to allow a tab to select itself when pressed.\n     */\n    onSelect: SelectTabEventHandler;\n    /**\n     * Gets the registered tab data along with current and previous selected values.\n     */\n    getRegisteredTabs: () => {\n      selectedValue?: TabValue;\n      previousSelectedValue?: TabValue;\n      registeredTabs: Record<string, TabRegisterData>;\n    };\n  };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n  /**\n   * The context of the tab list available to each tab.\n   */\n  tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["TabList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n  /**\n   * The value of the tab.\n   */\n  value: TabValue;\n\n  /**\n   * The reference to the tab HTML element.\n   */\n  ref: React.RefObject<HTMLElement>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E> | React.FocusEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n  /**\n   * The slot associated with the root element of this tab list.\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> & {\n  /**\n   * A tab list can supports 'transparent' and 'subtle' appearance.\n   *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   *- 'transparent': No background and border styling\n   * The appearance affects each of the contained tabs.\n   * @default 'transparent'\n   */\n  appearance?: 'transparent' | 'subtle';\n\n  /**\n   * Tab size may change between unselected and selected states.\n   * The default scenario is a selected tab has bold text.\n   *\n   * When true, this property requests tabs be the same size whether unselected or selected.\n   * @default true\n   */\n  reserveSelectedTabSpace?: boolean;\n\n  /**\n   * The value of the tab to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   */\n  defaultSelectedValue?: TabValue;\n\n  /**\n   * A tab list can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Raised when a tab is selected.\n   */\n  onTabSelect?: SelectTabEventHandler;\n\n  /**\n   * When true, focusing a tab will select it.\n   * @default false\n   */\n  selectTabOnFocus?: boolean;\n\n  /**\n   * The value of the currently selected tab.\n   */\n  selectedValue?: TabValue;\n\n  /**\n   * A tab list can be either 'small', 'medium', or 'large' size.\n   * The size affects each of the contained tabs.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A tab list can arrange its tabs vertically.\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type TabListContextValue = Pick<\n  TabListProps,\n  'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'\n> &\n  Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n    /** A callback to allow a tab to register itself with the tab list. */\n    onRegister: RegisterTabEventHandler;\n\n    /** A callback to allow a tab to unregister itself with the tab list. */\n    onUnregister: RegisterTabEventHandler;\n    /**\n     * A callback to allow a tab to select itself when pressed.\n     */\n    onSelect: SelectTabEventHandler;\n    /**\n     * Gets the registered tab data along with current and previous selected values.\n     */\n    getRegisteredTabs: () => {\n      selectedValue?: TabValue;\n      previousSelectedValue?: TabValue;\n      registeredTabs: Record<string, TabRegisterData>;\n    };\n  };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n  /**\n   * The context of the tab list available to each tab.\n   */\n  tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/TabList/TabListContext.js

@@ -2,6 +2,7 @@ import { createContext, useContextSelector } from '@fluentui/react-context-selec
 const tabListContextDefaultValue = {
     appearance: 'transparent',
     reserveSelectedTabSpace: true,
+    selectTabOnFocus: false,
     disabled: false,
     selectedValue: undefined,
     onRegister: ()=>{

package/lib/components/TabList/TabListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TabListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: TabListContextValue = {\n  appearance: 'transparent',\n  reserveSelectedTabSpace: true,\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n};\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue | undefined>(\n  undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n  useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","TabListContext","TabListProvider","Provider","useTabListContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,MAAMC,6BAAkD;IACtDC,YAAY;IACZC,yBAAyB;IACzBC,UAAU;IACVC,eAAeC;IACfC,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,mBAAmB;QACjB,OAAO;YACLC,gBAAgB,CAAC;QACnB;IACF;IACAC,MAAM;IACNC,UAAU;AACZ;AAEA,OAAO,MAAMC,iBAA+Cf,cAC1DO,WACgC;AAElC,OAAO,MAAMS,kBAAkBD,eAAeE,QAAQ,CAAC;AACvD,OAAO,MAAMC,6BAA6B,CAAIC,WAC5ClB,mBAAmBc,gBAAgB,CAACK,MAAMlB,0BAA0B,GAAKiB,SAASC,MAAM"}
+{"version":3,"sources":["TabListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: TabListContextValue = {\n  appearance: 'transparent',\n  reserveSelectedTabSpace: true,\n  selectTabOnFocus: false,\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n};\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue | undefined>(\n  undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n  useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","selectTabOnFocus","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","TabListContext","TabListProvider","Provider","useTabListContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,MAAMC,6BAAkD;IACtDC,YAAY;IACZC,yBAAyB;IACzBC,kBAAkB;IAClBC,UAAU;IACVC,eAAeC;IACfC,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,mBAAmB;QACjB,OAAO;YACLC,gBAAgB,CAAC;QACnB;IACF;IACAC,MAAM;IACNC,UAAU;AACZ;AAEA,OAAO,MAAMC,iBAA+ChB,cAC1DQ,WACgC;AAElC,OAAO,MAAMS,kBAAkBD,eAAeE,QAAQ,CAAC;AACvD,OAAO,MAAMC,6BAA6B,CAAIC,WAC5CnB,mBAAmBe,gBAAgB,CAACK,MAAMnB,0BAA0B,GAAKkB,SAASC,MAAM"}

package/lib/components/TabList/useTabList.js

@@ -10,7 +10,7 @@ import { getIntrinsicElementProps, useControllableState, useEventCallback, useMe
  * @param props - props from this instance of TabList
  * @param ref - reference to root HTMLElement of TabList
  */ export const useTabList_unstable = (props, ref)=>{
-    const { appearance = 'transparent', reserveSelectedTabSpace = true, disabled = false, onTabSelect, size = 'medium', vertical = false } = props;
+    const { appearance = 'transparent', reserveSelectedTabSpace = true, disabled = false, onTabSelect, selectTabOnFocus = false, size = 'medium', vertical = false } = props;
     const innerRef = React.useRef(null);
     const focusAttributes = useArrowNavigationGroup({
         circular: true,
@@ -71,6 +71,7 @@ import { getIntrinsicElementProps, useControllableState, useEventCallback, useMe
         appearance,
         reserveSelectedTabSpace,
         disabled,
+        selectTabOnFocus,
         selectedValue,
         size,
         vertical,

package/lib/components/TabList/useTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    registeredTabs.current[JSON.stringify(data.value)] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\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: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...focusAttributes,\n        ...props,\n      } as const),\n      { elementType: 'div' },\n    ),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"names":["React","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,wBAAwB,EACxBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,aAAa,aAAa,EAC1BC,0BAA0B,IAAI,EAC9BC,WAAW,KAAK,EAChBC,WAAW,EACXC,OAAO,QAAQ,EACfC,WAAW,KAAK,EACjB,GAAGP;IAEJ,MAAMQ,WAAWhB,MAAMiB,MAAM,CAAc;IAE3C,MAAMC,kBAAkBjB,wBAAwB;QAC9CkB,UAAU;QACVC,MAAML,WAAW,aAAa;QAC9BM,iBAAiB;IACnB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGpB,qBAAqB;QAC7DqB,OAAOhB,MAAMc,aAAa;QAC1BG,cAAcjB,MAAMkB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB7B,MAAMiB,MAAM,CAAuBW;IAChE,MAAME,wBAAwB9B,MAAMiB,MAAM,CAAuBW;IAEjE5B,MAAM+B,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW7B,iBAAiB,CAAC8B,OAAuBC;QACxDZ,iBAAiBY,KAAKC,KAAK;QAC3BvB,wBAAAA,kCAAAA,YAAcqB,OAAOC;IACvB;IAEA,MAAME,iBAAiBrC,MAAMiB,MAAM,CAAkC,CAAC;IAEtE,MAAMqB,aAAalC,iBAAiB,CAAC+B;QACnCE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACvD;IAEA,MAAMM,eAAerC,iBAAiB,CAAC+B;QACrC,OAAOE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMM,oBAAoB1C,MAAM2C,WAAW,CAAC;QAC1C,OAAO;YACLrB,eAAeO,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDK,gBAAgBA,eAAeL,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvC,KAAKwC,MAAM,CACf5C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,KAAKJ,cAAcI,KAAKO;YACxB+B,MAAM;YACN,oBAAoBhC,WAAW,aAAa;YAC5C,GAAGG,eAAe;YAClB,GAAGV,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;QAEvBtC;QACAC;QACAC;QACAU;QACAR;QACAC;QACAuB;QACAG;QACAR;QACAS;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    selectTabOnFocus = false,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    registeredTabs.current[JSON.stringify(data.value)] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\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: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...focusAttributes,\n        ...props,\n      } as const),\n      { elementType: 'div' },\n    ),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectTabOnFocus,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"names":["React","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","selectTabOnFocus","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,wBAAwB,EACxBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,aAAa,aAAa,EAC1BC,0BAA0B,IAAI,EAC9BC,WAAW,KAAK,EAChBC,WAAW,EACXC,mBAAmB,KAAK,EACxBC,OAAO,QAAQ,EACfC,WAAW,KAAK,EACjB,GAAGR;IAEJ,MAAMS,WAAWjB,MAAMkB,MAAM,CAAc;IAE3C,MAAMC,kBAAkBlB,wBAAwB;QAC9CmB,UAAU;QACVC,MAAML,WAAW,aAAa;QAC9BM,iBAAiB;IACnB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGrB,qBAAqB;QAC7DsB,OAAOjB,MAAMe,aAAa;QAC1BG,cAAclB,MAAMmB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB9B,MAAMkB,MAAM,CAAuBW;IAChE,MAAME,wBAAwB/B,MAAMkB,MAAM,CAAuBW;IAEjE7B,MAAMgC,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW9B,iBAAiB,CAAC+B,OAAuBC;QACxDZ,iBAAiBY,KAAKC,KAAK;QAC3BxB,wBAAAA,kCAAAA,YAAcsB,OAAOC;IACvB;IAEA,MAAME,iBAAiBtC,MAAMkB,MAAM,CAAkC,CAAC;IAEtE,MAAMqB,aAAanC,iBAAiB,CAACgC;QACnCE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACvD;IAEA,MAAMM,eAAetC,iBAAiB,CAACgC;QACrC,OAAOE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMM,oBAAoB3C,MAAM4C,WAAW,CAAC;QAC1C,OAAO;YACLrB,eAAeO,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDK,gBAAgBA,eAAeL,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMxC,KAAKyC,MAAM,CACf7C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,KAAKJ,cAAcI,KAAKQ;YACxB+B,MAAM;YACN,oBAAoBhC,WAAW,aAAa;YAC5C,GAAGG,eAAe;YAClB,GAAGX,KAAK;QACV,IACA;YAAEyC,aAAa;QAAM;QAEvBvC;QACAC;QACAC;QACAE;QACAS;QACAR;QACAC;QACAuB;QACAG;QACAR;QACAS;IACF;AACF,EAAE"}

package/lib/components/TabList/useTabListContextValues.js

@@ -1,9 +1,10 @@
 export function useTabListContextValues_unstable(state) {
-    const { appearance, reserveSelectedTabSpace, disabled, selectedValue: selectedKey, onRegister, onUnregister, onSelect, getRegisteredTabs, size, vertical } = state;
+    const { appearance, reserveSelectedTabSpace, disabled, selectTabOnFocus, selectedValue: selectedKey, onRegister, onUnregister, onSelect, getRegisteredTabs, size, vertical } = state;
     const tabList = {
         appearance,
         reserveSelectedTabSpace,
         disabled,
+        selectTabOnFocus,
         selectedValue: selectedKey,
         onSelect,
         onRegister,

package/lib/components/TabList/useTabListContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTabListContextValues.tsx"],"sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues_unstable(state: TabListState): TabListContextValues {\n  const {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    size,\n    vertical,\n  } = state;\n\n  const tabList: TabListContextValue = {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    getRegisteredTabs,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"],"names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"mappings":"AAEA,OAAO,SAASA,iCAAiCC,KAAmB;IAClE,MAAM,EACJC,UAAU,EACVC,uBAAuB,EACvBC,QAAQ,EACRC,eAAeC,WAAW,EAC1BC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,iBAAiB,EACjBC,IAAI,EACJC,QAAQ,EACT,GAAGX;IAEJ,MAAMY,UAA+B;QACnCX;QACAC;QACAC;QACAC,eAAeC;QACfG;QACAF;QACAC;QACAE;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAQ;AACnB"}
+{"version":3,"sources":["useTabListContextValues.tsx"],"sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues_unstable(state: TabListState): TabListContextValues {\n  const {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectTabOnFocus,\n    selectedValue: selectedKey,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    size,\n    vertical,\n  } = state;\n\n  const tabList: TabListContextValue = {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectTabOnFocus,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    getRegisteredTabs,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"],"names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectTabOnFocus","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"mappings":"AAEA,OAAO,SAASA,iCAAiCC,KAAmB;IAClE,MAAM,EACJC,UAAU,EACVC,uBAAuB,EACvBC,QAAQ,EACRC,gBAAgB,EAChBC,eAAeC,WAAW,EAC1BC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,iBAAiB,EACjBC,IAAI,EACJC,QAAQ,EACT,GAAGZ;IAEJ,MAAMa,UAA+B;QACnCZ;QACAC;QACAC;QACAC;QACAC,eAAeC;QACfG;QACAF;QACAC;QACAE;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAQ;AACnB"}

package/lib-commonjs/components/Tab/useTab.js

@@ -13,9 +13,10 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _TabListContext = require("../TabList/TabListContext");
 const useTab_unstable = (props, ref)=>{
-    const { content, disabled: tabDisabled = false, icon, onClick, value } = props;
+    const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;
     const appearance = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.appearance);
     const reserveSelectedTabSpace = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.reserveSelectedTabSpace);
+    const selectTabOnFocus = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.selectTabOnFocus);
     const listDisabled = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.disabled);
     const selected = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.selectedValue === value);
     const onRegister = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.onRegister);
@@ -25,9 +26,11 @@ const useTab_unstable = (props, ref)=>{
     const vertical = (0, _TabListContext.useTabListContext_unstable)((ctx)=>!!ctx.vertical);
     const disabled = listDisabled || tabDisabled;
     const innerRef = _react.useRef(null);
-    const onTabClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, (event)=>onSelect(event, {
+    const onSelectCallback = (event)=>onSelect(event, {
             value
-        })));
+        });
+    const onTabClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, onSelectCallback));
+    const onTabFocus = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onFocus, onSelectCallback));
     _react.useEffect(()=>{
         onRegister({
             value,
@@ -74,7 +77,8 @@ const useTab_unstable = (props, ref)=>{
             'aria-selected': disabled ? undefined : `${selected}`,
             ...props,
             disabled,
-            onClick: onTabClick
+            onClick: onTabClick,
+            onFocus: selectTabOnFocus ? onTabFocus : onFocus
         }), {
             elementType: 'button'
         }),

package/lib-commonjs/components/Tab/useTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */ export const useTab_unstable = (props, ref)=>{\n    const { content, disabled: tabDisabled = false, icon, onClick, value } = props;\n    const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);\n    const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);\n    const listDisabled = useTabListContext_unstable((ctx)=>ctx.disabled);\n    const selected = useTabListContext_unstable((ctx)=>ctx.selectedValue === value);\n    const onRegister = useTabListContext_unstable((ctx)=>ctx.onRegister);\n    const onUnregister = useTabListContext_unstable((ctx)=>ctx.onUnregister);\n    const onSelect = useTabListContext_unstable((ctx)=>ctx.onSelect);\n    const size = useTabListContext_unstable((ctx)=>ctx.size);\n    const vertical = useTabListContext_unstable((ctx)=>!!ctx.vertical);\n    const disabled = listDisabled || tabDisabled;\n    const innerRef = React.useRef(null);\n    const onTabClick = useEventCallback(mergeCallbacks(onClick, (event)=>onSelect(event, {\n            value\n        })));\n    React.useEffect(()=>{\n        onRegister({\n            value,\n            ref: innerRef\n        });\n        return ()=>{\n            onUnregister({\n                value,\n                ref: innerRef\n            });\n        };\n    }, [\n        onRegister,\n        onUnregister,\n        innerRef,\n        value\n    ]);\n    const iconSlot = slot.optional(icon, {\n        elementType: 'span'\n    });\n    const contentSlot = slot.always(content, {\n        defaultProps: {\n            children: props.children\n        },\n        elementType: 'span'\n    });\n    const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);\n    return {\n        components: {\n            root: 'button',\n            icon: 'span',\n            content: 'span',\n            contentReservedSpace: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps('button', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\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),\n            role: 'tab',\n            type: 'button',\n            // aria-selected undefined indicates it is not selectable\n            // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n            'aria-selected': disabled ? undefined : `${selected}`,\n            ...props,\n            disabled,\n            onClick: onTabClick\n        }), {\n            elementType: 'button'\n        }),\n        icon: iconSlot,\n        iconOnly,\n        content: contentSlot,\n        contentReservedSpace: slot.optional(content, {\n            renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n            defaultProps: {\n                children: props.children\n            },\n            elementType: 'span'\n        }),\n        appearance,\n        disabled,\n        selected,\n        size,\n        value,\n        vertical\n    };\n};\n"],"names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onTabClick","useEventCallback","mergeCallbacks","event","useEffect","iconSlot","slot","optional","elementType","contentSlot","always","defaultProps","children","iconOnly","Boolean","components","root","contentReservedSpace","getIntrinsicElementProps","useMergedRefs","role","type","undefined","renderByDefault"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACyE;gCACrD;AAShC,MAAMA,kBAAkB,CAACC,OAAOC;IACvC,MAAM,EAAEC,OAAO,EAAEC,UAAUC,cAAc,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGP;IACzE,MAAMQ,aAAaC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACnE,MAAMG,0BAA0BF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIP,QAAQ;IACnE,MAAMU,WAAWJ,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAII,aAAa,KAAKP;IACzE,MAAMQ,aAAaN,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIK,UAAU;IACnE,MAAMC,eAAeP,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIM,YAAY;IACvE,MAAMC,WAAWR,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOT,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIQ,IAAI;IACvD,MAAMC,WAAWV,IAAAA,0CAA0B,EAAC,CAACC,MAAM,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMhB,WAAWS,gBAAgBR;IACjC,MAAMgB,WAAWC,OAAMC,MAAM,CAAC;IAC9B,MAAMC,aAAaC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACnB,SAAS,CAACoB,QAAQT,SAASS,OAAO;YAC7EnB;QACJ;IACJc,OAAMM,SAAS,CAAC;QACZZ,WAAW;YACPR;YACAN,KAAKmB;QACT;QACA,OAAO;YACHJ,aAAa;gBACTT;gBACAN,KAAKmB;YACT;QACJ;IACJ,GAAG;QACCL;QACAC;QACAI;QACAb;KACH;IACD,MAAMqB,WAAWC,oBAAI,CAACC,QAAQ,CAACzB,MAAM;QACjC0B,aAAa;IACjB;IACA,MAAMC,cAAcH,oBAAI,CAACI,MAAM,CAAC/B,SAAS;QACrCgC,cAAc;YACVC,UAAUnC,MAAMmC,QAAQ;QAC5B;QACAJ,aAAa;IACjB;IACA,MAAMK,WAAWC,QAAQ,AAACT,CAAAA,aAAa,QAAQA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASO,QAAQ,AAAD,KAAM,CAACH,YAAYG,QAAQ;IACzH,OAAO;QACHG,YAAY;YACRC,MAAM;YACNlC,MAAM;YACNH,SAAS;YACTsC,sBAAsB;QAC1B;QACAD,MAAMV,oBAAI,CAACI,MAAM,CAACQ,IAAAA,wCAAwB,EAAC,UAAU;YACjD,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FxC,KAAKyC,IAAAA,6BAAa,EAACzC,KAAKmB;YACxBuB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBzC,WAAW0C,YAAY,CAAC,EAAEhC,SAAS,CAAC;YACrD,GAAGb,KAAK;YACRG;YACAG,SAASiB;QACb,IAAI;YACAQ,aAAa;QACjB;QACA1B,MAAMuB;QACNQ;QACAlC,SAAS8B;QACTQ,sBAAsBX,oBAAI,CAACC,QAAQ,CAAC5B,SAAS;YACzC4C,iBAAiB,CAACjC,YAAY,CAACuB,YAAYzB;YAC3CuB,cAAc;gBACVC,UAAUnC,MAAMmC,QAAQ;YAC5B;YACAJ,aAAa;QACjB;QACAvB;QACAL;QACAU;QACAK;QACAX;QACAY;IACJ;AACJ"}
+{"version":3,"sources":["useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */ export const useTab_unstable = (props, ref)=>{\n    const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n    const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);\n    const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);\n    const selectTabOnFocus = useTabListContext_unstable((ctx)=>ctx.selectTabOnFocus);\n    const listDisabled = useTabListContext_unstable((ctx)=>ctx.disabled);\n    const selected = useTabListContext_unstable((ctx)=>ctx.selectedValue === value);\n    const onRegister = useTabListContext_unstable((ctx)=>ctx.onRegister);\n    const onUnregister = useTabListContext_unstable((ctx)=>ctx.onUnregister);\n    const onSelect = useTabListContext_unstable((ctx)=>ctx.onSelect);\n    const size = useTabListContext_unstable((ctx)=>ctx.size);\n    const vertical = useTabListContext_unstable((ctx)=>!!ctx.vertical);\n    const disabled = listDisabled || tabDisabled;\n    const innerRef = React.useRef(null);\n    const onSelectCallback = (event)=>onSelect(event, {\n            value\n        });\n    const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n    const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n    React.useEffect(()=>{\n        onRegister({\n            value,\n            ref: innerRef\n        });\n        return ()=>{\n            onUnregister({\n                value,\n                ref: innerRef\n            });\n        };\n    }, [\n        onRegister,\n        onUnregister,\n        innerRef,\n        value\n    ]);\n    const iconSlot = slot.optional(icon, {\n        elementType: 'span'\n    });\n    const contentSlot = slot.always(content, {\n        defaultProps: {\n            children: props.children\n        },\n        elementType: 'span'\n    });\n    const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);\n    return {\n        components: {\n            root: 'button',\n            icon: 'span',\n            content: 'span',\n            contentReservedSpace: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps('button', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\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),\n            role: 'tab',\n            type: 'button',\n            // aria-selected undefined indicates it is not selectable\n            // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n            'aria-selected': disabled ? undefined : `${selected}`,\n            ...props,\n            disabled,\n            onClick: onTabClick,\n            onFocus: selectTabOnFocus ? onTabFocus : onFocus\n        }), {\n            elementType: 'button'\n        }),\n        icon: iconSlot,\n        iconOnly,\n        content: contentSlot,\n        contentReservedSpace: slot.optional(content, {\n            renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n            defaultProps: {\n                children: props.children\n            },\n            elementType: 'span'\n        }),\n        appearance,\n        disabled,\n        selected,\n        size,\n        value,\n        vertical\n    };\n};\n"],"names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onSelectCallback","event","onTabClick","useEventCallback","mergeCallbacks","onTabFocus","useEffect","iconSlot","slot","optional","elementType","contentSlot","always","defaultProps","children","iconOnly","Boolean","components","root","contentReservedSpace","getIntrinsicElementProps","useMergedRefs","role","type","undefined","renderByDefault"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACyE;gCACrD;AAShC,MAAMA,kBAAkB,CAACC,OAAOC;IACvC,MAAM,EAAEC,OAAO,EAAEC,UAAUC,cAAc,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGR;IAClF,MAAMS,aAAaC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACnE,MAAMG,0BAA0BF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,uBAAuB;IAC7F,MAAMC,mBAAmBH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIE,gBAAgB;IAC/E,MAAMC,eAAeJ,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIR,QAAQ;IACnE,MAAMY,WAAWL,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIK,aAAa,KAAKR;IACzE,MAAMS,aAAaP,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIM,UAAU;IACnE,MAAMC,eAAeR,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIO,YAAY;IACvE,MAAMC,WAAWT,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIQ,QAAQ;IAC/D,MAAMC,OAAOV,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIS,IAAI;IACvD,MAAMC,WAAWX,IAAAA,0CAA0B,EAAC,CAACC,MAAM,CAAC,CAACA,IAAIU,QAAQ;IACjE,MAAMlB,WAAWW,gBAAgBV;IACjC,MAAMkB,WAAWC,OAAMC,MAAM,CAAC;IAC9B,MAAMC,mBAAmB,CAACC,QAAQP,SAASO,OAAO;YAC1ClB;QACJ;IACJ,MAAMmB,aAAaC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACvB,SAASmB;IAC5D,MAAMK,aAAaF,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACtB,SAASkB;IAC5DF,OAAMQ,SAAS,CAAC;QACZd,WAAW;YACPT;YACAP,KAAKqB;QACT;QACA,OAAO;YACHJ,aAAa;gBACTV;gBACAP,KAAKqB;YACT;QACJ;IACJ,GAAG;QACCL;QACAC;QACAI;QACAd;KACH;IACD,MAAMwB,WAAWC,oBAAI,CAACC,QAAQ,CAAC7B,MAAM;QACjC8B,aAAa;IACjB;IACA,MAAMC,cAAcH,oBAAI,CAACI,MAAM,CAACnC,SAAS;QACrCoC,cAAc;YACVC,UAAUvC,MAAMuC,QAAQ;QAC5B;QACAJ,aAAa;IACjB;IACA,MAAMK,WAAWC,QAAQ,AAACT,CAAAA,aAAa,QAAQA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASO,QAAQ,AAAD,KAAM,CAACH,YAAYG,QAAQ;IACzH,OAAO;QACHG,YAAY;YACRC,MAAM;YACNtC,MAAM;YACNH,SAAS;YACT0C,sBAAsB;QAC1B;QACAD,MAAMV,oBAAI,CAACI,MAAM,CAACQ,IAAAA,wCAAwB,EAAC,UAAU;YACjD,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5F5C,KAAK6C,IAAAA,6BAAa,EAAC7C,KAAKqB;YACxByB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiB7C,WAAW8C,YAAY,CAAC,EAAElC,SAAS,CAAC;YACrD,GAAGf,KAAK;YACRG;YACAG,SAASqB;YACTpB,SAASM,mBAAmBiB,aAAavB;QAC7C,IAAI;YACA4B,aAAa;QACjB;QACA9B,MAAM2B;QACNQ;QACAtC,SAASkC;QACTQ,sBAAsBX,oBAAI,CAACC,QAAQ,CAAChC,SAAS;YACzCgD,iBAAiB,CAACnC,YAAY,CAACyB,YAAY5B;YAC3C0B,cAAc;gBACVC,UAAUvC,MAAMuC,QAAQ;YAC5B;YACAJ,aAAa;QACjB;QACA1B;QACAN;QACAY;QACAK;QACAZ;QACAa;IACJ;AACJ"}

package/lib-commonjs/components/TabList/TabListContext.js

@@ -23,6 +23,7 @@ const _reactcontextselector = require("@fluentui/react-context-selector");
 const tabListContextDefaultValue = {
     appearance: 'transparent',
     reserveSelectedTabSpace: true,
+    selectTabOnFocus: false,
     disabled: false,
     selectedValue: undefined,
     onRegister: ()=>{

package/lib-commonjs/components/TabList/TabListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TabListContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nconst tabListContextDefaultValue = {\n    appearance: 'transparent',\n    reserveSelectedTabSpace: true,\n    disabled: false,\n    selectedValue: undefined,\n    onRegister: ()=>{\n    /* noop */ },\n    onUnregister: ()=>{\n    /* noop */ },\n    onSelect: ()=>{\n    /* noop */ },\n    getRegisteredTabs: ()=>{\n        return {\n            registeredTabs: {}\n        };\n    },\n    size: 'medium',\n    vertical: false\n};\nexport const TabListContext = createContext(undefined);\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = (selector)=>useContextSelector(TabListContext, (ctx = tabListContextDefaultValue)=>selector(ctx));\n"],"names":["TabListContext","TabListProvider","useTabListContext_unstable","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","createContext","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAoBaA,cAAc;eAAdA;;IACAC,eAAe;eAAfA;;IACAC,0BAA0B;eAA1BA;;;sCAtBqC;AAClD,MAAMC,6BAA6B;IAC/BC,YAAY;IACZC,yBAAyB;IACzBC,UAAU;IACVC,eAAeC;IACfC,YAAY;IACZ,QAAQ,GAAG;IACXC,cAAc;IACd,QAAQ,GAAG;IACXC,UAAU;IACV,QAAQ,GAAG;IACXC,mBAAmB;QACf,OAAO;YACHC,gBAAgB,CAAC;QACrB;IACJ;IACAC,MAAM;IACNC,UAAU;AACd;AACO,MAAMf,iBAAiBgB,IAAAA,mCAAa,EAACR;AACrC,MAAMP,kBAAkBD,eAAeiB,QAAQ;AAC/C,MAAMf,6BAA6B,CAACgB,WAAWC,IAAAA,wCAAkB,EAACnB,gBAAgB,CAACoB,MAAMjB,0BAA0B,GAAGe,SAASE"}
+{"version":3,"sources":["TabListContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nconst tabListContextDefaultValue = {\n    appearance: 'transparent',\n    reserveSelectedTabSpace: true,\n    selectTabOnFocus: false,\n    disabled: false,\n    selectedValue: undefined,\n    onRegister: ()=>{\n    /* noop */ },\n    onUnregister: ()=>{\n    /* noop */ },\n    onSelect: ()=>{\n    /* noop */ },\n    getRegisteredTabs: ()=>{\n        return {\n            registeredTabs: {}\n        };\n    },\n    size: 'medium',\n    vertical: false\n};\nexport const TabListContext = createContext(undefined);\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = (selector)=>useContextSelector(TabListContext, (ctx = tabListContextDefaultValue)=>selector(ctx));\n"],"names":["TabListContext","TabListProvider","useTabListContext_unstable","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","selectTabOnFocus","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","createContext","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAqBaA,cAAc;eAAdA;;IACAC,eAAe;eAAfA;;IACAC,0BAA0B;eAA1BA;;;sCAvBqC;AAClD,MAAMC,6BAA6B;IAC/BC,YAAY;IACZC,yBAAyB;IACzBC,kBAAkB;IAClBC,UAAU;IACVC,eAAeC;IACfC,YAAY;IACZ,QAAQ,GAAG;IACXC,cAAc;IACd,QAAQ,GAAG;IACXC,UAAU;IACV,QAAQ,GAAG;IACXC,mBAAmB;QACf,OAAO;YACHC,gBAAgB,CAAC;QACrB;IACJ;IACAC,MAAM;IACNC,UAAU;AACd;AACO,MAAMhB,iBAAiBiB,IAAAA,mCAAa,EAACR;AACrC,MAAMR,kBAAkBD,eAAekB,QAAQ;AAC/C,MAAMhB,6BAA6B,CAACiB,WAAWC,IAAAA,wCAAkB,EAACpB,gBAAgB,CAACqB,MAAMlB,0BAA0B,GAAGgB,SAASE"}

package/lib-commonjs/components/TabList/useTabList.js

@@ -13,7 +13,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reacttabster = require("@fluentui/react-tabster");
 const _reactutilities = require("@fluentui/react-utilities");
 const useTabList_unstable = (props, ref)=>{
-    const { appearance = 'transparent', reserveSelectedTabSpace = true, disabled = false, onTabSelect, size = 'medium', vertical = false } = props;
+    const { appearance = 'transparent', reserveSelectedTabSpace = true, disabled = false, onTabSelect, selectTabOnFocus = false, size = 'medium', vertical = false } = props;
     const innerRef = _react.useRef(null);
     const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
         circular: true,
@@ -74,6 +74,7 @@ const useTabList_unstable = (props, ref)=>{
         appearance,
         reserveSelectedTabSpace,
         disabled,
+        selectTabOnFocus,
         selectedValue,
         size,
         vertical,

package/lib-commonjs/components/TabList/useTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTabList.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */ export const useTabList_unstable = (props, ref)=>{\n    const { appearance = 'transparent', reserveSelectedTabSpace = true, disabled = false, onTabSelect, size = 'medium', vertical = false } = props;\n    const innerRef = React.useRef(null);\n    const focusAttributes = useArrowNavigationGroup({\n        circular: true,\n        axis: vertical ? 'vertical' : 'horizontal',\n        memorizeCurrent: true\n    });\n    const [selectedValue, setSelectedValue] = useControllableState({\n        state: props.selectedValue,\n        defaultState: props.defaultSelectedValue,\n        initialState: undefined\n    });\n    // considered usePrevious, but it is sensitive to re-renders\n    // this could cause the previous to move to current in the case where the tab list re-renders.\n    // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n    // renders for tabs that have not changed.\n    const currentSelectedValue = React.useRef(undefined);\n    const previousSelectedValue = React.useRef(undefined);\n    React.useEffect(()=>{\n        previousSelectedValue.current = currentSelectedValue.current;\n        currentSelectedValue.current = selectedValue;\n    }, [\n        selectedValue\n    ]);\n    const onSelect = useEventCallback((event, data)=>{\n        setSelectedValue(data.value);\n        onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);\n    });\n    const registeredTabs = React.useRef({});\n    const onRegister = useEventCallback((data)=>{\n        registeredTabs.current[JSON.stringify(data.value)] = data;\n    });\n    const onUnregister = useEventCallback((data)=>{\n        delete registeredTabs.current[JSON.stringify(data.value)];\n    });\n    const getRegisteredTabs = React.useCallback(()=>{\n        return {\n            selectedValue: currentSelectedValue.current,\n            previousSelectedValue: previousSelectedValue.current,\n            registeredTabs: registeredTabs.current\n        };\n    }, []);\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(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),\n            role: 'tablist',\n            'aria-orientation': vertical ? 'vertical' : 'horizontal',\n            ...focusAttributes,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        appearance,\n        reserveSelectedTabSpace,\n        disabled,\n        selectedValue,\n        size,\n        vertical,\n        onRegister,\n        onUnregister,\n        onSelect,\n        getRegisteredTabs\n    };\n};\n"],"names":["useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","React","useRef","focusAttributes","useArrowNavigationGroup","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","useControllableState","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","useEventCallback","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;8BACiB;gCAC8D;AAS3F,MAAMA,sBAAsB,CAACC,OAAOC;IAC3C,MAAM,EAAEC,aAAa,aAAa,EAAEC,0BAA0B,IAAI,EAAEC,WAAW,KAAK,EAAEC,WAAW,EAAEC,OAAO,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGP;IACzI,MAAMQ,WAAWC,OAAMC,MAAM,CAAC;IAC9B,MAAMC,kBAAkBC,IAAAA,qCAAuB,EAAC;QAC5CC,UAAU;QACVC,MAAMP,WAAW,aAAa;QAC9BQ,iBAAiB;IACrB;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAoB,EAAC;QAC3DC,OAAOnB,MAAMgB,aAAa;QAC1BI,cAAcpB,MAAMqB,oBAAoB;QACxCC,cAAcC;IAClB;IACA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuBf,OAAMC,MAAM,CAACa;IAC1C,MAAME,wBAAwBhB,OAAMC,MAAM,CAACa;IAC3Cd,OAAMiB,SAAS,CAAC;QACZD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGX;IACnC,GAAG;QACCA;KACH;IACD,MAAMY,WAAWC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QACtCd,iBAAiBc,KAAKC,KAAK;QAC3B3B,gBAAgB,QAAQA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYyB,OAAOC;IACjF;IACA,MAAME,iBAAiBxB,OAAMC,MAAM,CAAC,CAAC;IACrC,MAAMwB,aAAaL,IAAAA,gCAAgB,EAAC,CAACE;QACjCE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACzD;IACA,MAAMM,eAAeR,IAAAA,gCAAgB,EAAC,CAACE;QACnC,OAAOE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC7D;IACA,MAAMM,oBAAoB7B,OAAM8B,WAAW,CAAC;QACxC,OAAO;YACHvB,eAAeQ,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDM,gBAAgBA,eAAeN,OAAO;QAC1C;IACJ,GAAG,EAAE;IACL,OAAO;QACHa,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F3C,KAAK4C,IAAAA,6BAAa,EAAC5C,KAAKO;YACxBsC,MAAM;YACN,oBAAoBvC,WAAW,aAAa;YAC5C,GAAGI,eAAe;YAClB,GAAGX,KAAK;QACZ,IAAI;YACA+C,aAAa;QACjB;QACA7C;QACAC;QACAC;QACAY;QACAV;QACAC;QACA2B;QACAG;QACAT;QACAU;IACJ;AACJ"}
+{"version":3,"sources":["useTabList.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */ export const useTabList_unstable = (props, ref)=>{\n    const { appearance = 'transparent', reserveSelectedTabSpace = true, disabled = false, onTabSelect, selectTabOnFocus = false, size = 'medium', vertical = false } = props;\n    const innerRef = React.useRef(null);\n    const focusAttributes = useArrowNavigationGroup({\n        circular: true,\n        axis: vertical ? 'vertical' : 'horizontal',\n        memorizeCurrent: true\n    });\n    const [selectedValue, setSelectedValue] = useControllableState({\n        state: props.selectedValue,\n        defaultState: props.defaultSelectedValue,\n        initialState: undefined\n    });\n    // considered usePrevious, but it is sensitive to re-renders\n    // this could cause the previous to move to current in the case where the tab list re-renders.\n    // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n    // renders for tabs that have not changed.\n    const currentSelectedValue = React.useRef(undefined);\n    const previousSelectedValue = React.useRef(undefined);\n    React.useEffect(()=>{\n        previousSelectedValue.current = currentSelectedValue.current;\n        currentSelectedValue.current = selectedValue;\n    }, [\n        selectedValue\n    ]);\n    const onSelect = useEventCallback((event, data)=>{\n        setSelectedValue(data.value);\n        onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);\n    });\n    const registeredTabs = React.useRef({});\n    const onRegister = useEventCallback((data)=>{\n        registeredTabs.current[JSON.stringify(data.value)] = data;\n    });\n    const onUnregister = useEventCallback((data)=>{\n        delete registeredTabs.current[JSON.stringify(data.value)];\n    });\n    const getRegisteredTabs = React.useCallback(()=>{\n        return {\n            selectedValue: currentSelectedValue.current,\n            previousSelectedValue: previousSelectedValue.current,\n            registeredTabs: registeredTabs.current\n        };\n    }, []);\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(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),\n            role: 'tablist',\n            'aria-orientation': vertical ? 'vertical' : 'horizontal',\n            ...focusAttributes,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        appearance,\n        reserveSelectedTabSpace,\n        disabled,\n        selectTabOnFocus,\n        selectedValue,\n        size,\n        vertical,\n        onRegister,\n        onUnregister,\n        onSelect,\n        getRegisteredTabs\n    };\n};\n"],"names":["useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","selectTabOnFocus","size","vertical","innerRef","React","useRef","focusAttributes","useArrowNavigationGroup","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","useControllableState","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","useEventCallback","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;8BACiB;gCAC8D;AAS3F,MAAMA,sBAAsB,CAACC,OAAOC;IAC3C,MAAM,EAAEC,aAAa,aAAa,EAAEC,0BAA0B,IAAI,EAAEC,WAAW,KAAK,EAAEC,WAAW,EAAEC,mBAAmB,KAAK,EAAEC,OAAO,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGR;IACnK,MAAMS,WAAWC,OAAMC,MAAM,CAAC;IAC9B,MAAMC,kBAAkBC,IAAAA,qCAAuB,EAAC;QAC5CC,UAAU;QACVC,MAAMP,WAAW,aAAa;QAC9BQ,iBAAiB;IACrB;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAoB,EAAC;QAC3DC,OAAOpB,MAAMiB,aAAa;QAC1BI,cAAcrB,MAAMsB,oBAAoB;QACxCC,cAAcC;IAClB;IACA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuBf,OAAMC,MAAM,CAACa;IAC1C,MAAME,wBAAwBhB,OAAMC,MAAM,CAACa;IAC3Cd,OAAMiB,SAAS,CAAC;QACZD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGX;IACnC,GAAG;QACCA;KACH;IACD,MAAMY,WAAWC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QACtCd,iBAAiBc,KAAKC,KAAK;QAC3B5B,gBAAgB,QAAQA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAY0B,OAAOC;IACjF;IACA,MAAME,iBAAiBxB,OAAMC,MAAM,CAAC,CAAC;IACrC,MAAMwB,aAAaL,IAAAA,gCAAgB,EAAC,CAACE;QACjCE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACzD;IACA,MAAMM,eAAeR,IAAAA,gCAAgB,EAAC,CAACE;QACnC,OAAOE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC7D;IACA,MAAMM,oBAAoB7B,OAAM8B,WAAW,CAAC;QACxC,OAAO;YACHvB,eAAeQ,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDM,gBAAgBA,eAAeN,OAAO;QAC1C;IACJ,GAAG,EAAE;IACL,OAAO;QACHa,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F5C,KAAK6C,IAAAA,6BAAa,EAAC7C,KAAKQ;YACxBsC,MAAM;YACN,oBAAoBvC,WAAW,aAAa;YAC5C,GAAGI,eAAe;YAClB,GAAGZ,KAAK;QACZ,IAAI;YACAgD,aAAa;QACjB;QACA9C;QACAC;QACAC;QACAE;QACAW;QACAV;QACAC;QACA2B;QACAG;QACAT;QACAU;IACJ;AACJ"}

package/lib-commonjs/components/TabList/useTabListContextValues.js

@@ -9,11 +9,12 @@ Object.defineProperty(exports, "useTabListContextValues_unstable", {
     }
 });
 function useTabListContextValues_unstable(state) {
-    const { appearance, reserveSelectedTabSpace, disabled, selectedValue: selectedKey, onRegister, onUnregister, onSelect, getRegisteredTabs, size, vertical } = state;
+    const { appearance, reserveSelectedTabSpace, disabled, selectTabOnFocus, selectedValue: selectedKey, onRegister, onUnregister, onSelect, getRegisteredTabs, size, vertical } = state;
     const tabList = {
         appearance,
         reserveSelectedTabSpace,
         disabled,
+        selectTabOnFocus,
         selectedValue: selectedKey,
         onSelect,
         onRegister,

package/lib-commonjs/components/TabList/useTabListContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTabListContextValues.js"],"sourcesContent":["export function useTabListContextValues_unstable(state) {\n    const { appearance, reserveSelectedTabSpace, disabled, selectedValue: selectedKey, onRegister, onUnregister, onSelect, getRegisteredTabs, size, vertical } = state;\n    const tabList = {\n        appearance,\n        reserveSelectedTabSpace,\n        disabled,\n        selectedValue: selectedKey,\n        onSelect,\n        onRegister,\n        onUnregister,\n        getRegisteredTabs,\n        size,\n        vertical\n    };\n    return {\n        tabList\n    };\n}\n"],"names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,iCAAiCC,KAAK;IAClD,MAAM,EAAEC,UAAU,EAAEC,uBAAuB,EAAEC,QAAQ,EAAEC,eAAeC,WAAW,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGX;IAC7J,MAAMY,UAAU;QACZX;QACAC;QACAC;QACAC,eAAeC;QACfG;QACAF;QACAC;QACAE;QACAC;QACAC;IACJ;IACA,OAAO;QACHC;IACJ;AACJ"}
+{"version":3,"sources":["useTabListContextValues.js"],"sourcesContent":["export function useTabListContextValues_unstable(state) {\n    const { appearance, reserveSelectedTabSpace, disabled, selectTabOnFocus, selectedValue: selectedKey, onRegister, onUnregister, onSelect, getRegisteredTabs, size, vertical } = state;\n    const tabList = {\n        appearance,\n        reserveSelectedTabSpace,\n        disabled,\n        selectTabOnFocus,\n        selectedValue: selectedKey,\n        onSelect,\n        onRegister,\n        onUnregister,\n        getRegisteredTabs,\n        size,\n        vertical\n    };\n    return {\n        tabList\n    };\n}\n"],"names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectTabOnFocus","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,iCAAiCC,KAAK;IAClD,MAAM,EAAEC,UAAU,EAAEC,uBAAuB,EAAEC,QAAQ,EAAEC,gBAAgB,EAAEC,eAAeC,WAAW,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGZ;IAC/K,MAAMa,UAAU;QACZZ;QACAC;QACAC;QACAC;QACAC,eAAeC;QACfG;QACAF;QACAC;QACAE;QACAC;QACAC;IACJ;IACA,OAAO;QACHC;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.3.59",
+  "version": "9.4.0",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,12 +32,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.42",
-    "@fluentui/react-jsx-runtime": "^9.0.20",
-    "@fluentui/react-shared-contexts": "^9.13.0",
-    "@fluentui/react-tabster": "^9.15.0",
+    "@fluentui/react-context-selector": "^9.1.43",
+    "@fluentui/react-jsx-runtime": "^9.0.21",
+    "@fluentui/react-shared-contexts": "^9.13.1",
+    "@fluentui/react-tabster": "^9.15.1",
     "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.15.2",
+    "@fluentui/react-utilities": "^9.15.3",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },