npm - @fluentui/react-tabs - Versions diffs - 9.1.8 → 9.2.0 - Mend

@fluentui/react-tabs 9.1.8 → 9.2.0

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

Files changed (52) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,67 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Wed, 18 Jan 2023 16:30:58 GMT",
+      "date": "Tue, 31 Jan 2023 19:50:41 GMT",
+      "tag": "@fluentui/react-tabs_v9.2.0",
+      "version": "9.2.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "8b78517786e11cd28232851d4704598443cefd64",
+            "comment": "chore: Added context exports"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.7",
+            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.4.2",
+            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.5.1",
+            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 26 Jan 2023 13:31:03 GMT",
+      "tag": "@fluentui/react-tabs_v9.1.9",
+      "version": "9.1.9",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.6",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.4.1",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.5.0",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 18 Jan 2023 16:32:57 GMT",
       "tag": "@fluentui/react-tabs_v9.1.8",
       "version": "9.1.8",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-tabs
-This log was last generated on Wed, 18 Jan 2023 16:30:58 GMT and should not be manually modified.
+This log was last generated on Tue, 31 Jan 2023 19:50:41 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.2.0)
+Tue, 31 Jan 2023 19:50:41 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.1.9..@fluentui/react-tabs_v9.2.0)
+### Minor changes
+- chore: Added context exports ([PR #26552](https://github.com/microsoft/fluentui/pull/26552) by gcox@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.7 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
+- Bump @fluentui/react-tabster to v9.4.2 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
+- Bump @fluentui/react-utilities to v9.5.1 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
+## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.1.9)
+Thu, 26 Jan 2023 13:31:03 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.1.8..@fluentui/react-tabs_v9.1.9)
+### Patches
+- Bump @fluentui/react-context-selector to v9.1.6 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-tabster to v9.4.1 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-utilities to v9.5.0 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
 ## [9.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.1.8)
-Wed, 18 Jan 2023 16:30:58 GMT
+Wed, 18 Jan 2023 16:32:57 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.1.7..@fluentui/react-tabs_v9.1.8)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -1,6 +1,10 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
@@ -122,6 +126,8 @@ export declare type TabListProps = ComponentProps<TabListSlots> & {
     vertical?: boolean;
 };
+export declare const TabListProvider: Provider<TabListContextValue> & FC<ProviderProps<TabListContextValue>>;
 export declare type TabListSlots = {
     /**
      * The slot associated with the root element of this tab list.
@@ -234,6 +240,10 @@ export declare const useTab_unstable: (props: TabProps, ref: React_2.Ref<HTMLEle
  */
 export declare const useTabList_unstable: (props: TabListProps, ref: React_2.Ref<HTMLElement>) => TabListState;
+export declare const useTabListContext_unstable: <T>(selector: ContextSelector<TabListContextValue, T>) => T;
+export declare function useTabListContextValues_unstable(state: TabListState): TabListContextValues;
 /**
  * Apply styling to the TabList slots based on the state
  */

package/lib/components/Tab/useTab.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { TabListContext } from '../TabList/TabListContext';
-import { useContextSelector } from '@fluentui/react-context-selector';
+import { useTabListContext_unstable } from '../TabList/TabListContext';
 /**
  * Create the state required to render Tab.
  *
@@ -18,15 +17,15 @@ export const useTab_unstable = (props, ref) => {
     icon,
     value
   } = props;
-  const appearance = useContextSelector(TabListContext, ctx => ctx.appearance);
-  const reserveSelectedTabSpace = useContextSelector(TabListContext, ctx => ctx.reserveSelectedTabSpace);
-  const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);
-  const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);
-  const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);
-  const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);
-  const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);
-  const size = useContextSelector(TabListContext, ctx => ctx.size);
-  const vertical = useContextSelector(TabListContext, ctx => !!ctx.vertical);
+  const appearance = useTabListContext_unstable(ctx => ctx.appearance);
+  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);
+  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);
+  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);
+  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);
+  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);
+  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);
+  const size = useTabListContext_unstable(ctx => ctx.size);
+  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);
   const disabled = listDisabled || tabDisabled;
   const innerRef = React.useRef(null);
   const onClick = useEventCallback(event => onSelect(event, {

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,2BAA2B;AAEpH,SAASC,~~cAAc~~,QAAQ,2BAA2B;~~AAC1D,SAASC,kBAAkB,QAAQ,kCAAkC;AAGrE~~;;;;;;;;;AASA,OAAO,MAAMC,eAAe,GAAG,CAACC,KAAe,EAAEC,GAA2B,KAAc;EACxF,MAAM;IAAEC,OAAO;IAAEC,QAAQ,EAAEC,WAAW,GAAG,KAAK;IAAEC,IAAI;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAErE,MAAMO,UAAU,GAAGT,~~kBAAkB~~,~~CAACD~~,~~cAAc,EAAEW,~~GAAG,IAAIA,GAAG,CAACD,UAAU,CAAC;~~EAC5E~~,MAAME,uBAAuB,GAAGX,~~kBAAkB~~,~~CAACD~~,~~cAAc,EAAEW,~~GAAG,IAAIA,GAAG,CAACC,uBAAuB,CAAC;~~EACtG~~,MAAMC,YAAY,GAAGZ,~~kBAAkB~~,~~CAACD~~,~~cAAc,EAAEW,~~GAAG,IAAIA,GAAG,CAACL,QAAQ,CAAC;~~EAC5E~~,MAAMQ,QAAQ,GAAGb,~~kBAAkB~~,~~CAACD~~,~~cAAc,EAAEW,~~GAAG,IAAIA,GAAG,CAACI,aAAa,KAAKN,KAAK,CAAC;~~EACvF~~,MAAMO,UAAU,GAAGf,~~kBAAkB~~,~~CAACD~~,~~cAAc,EAAEW,~~GAAG,IAAIA,GAAG,CAACK,UAAU,CAAC;~~EAC5E~~,MAAMC,YAAY,GAAGhB,~~kBAAkB~~,~~CAACD~~,~~cAAc,EAAEW,~~GAAG,IAAIA,GAAG,CAACM,YAAY,CAAC;~~EAChF~~,MAAMC,QAAQ,GAAGjB,~~kBAAkB~~,~~CAACD~~,~~cAAc,EAAEW,~~GAAG,IAAIA,GAAG,CAACO,QAAQ,CAAC;~~EACxE~~,MAAMC,IAAI,GAAGlB,~~kBAAkB~~,~~CAACD~~,~~cAAc,EAAEW,~~GAAG,IAAIA,GAAG,CAACQ,IAAI,CAAC;~~EAChE~~,MAAMC,QAAQ,GAAGnB,~~kBAAkB~~,~~CAACD~~,~~cAAc,EAAEW,~~GAAG,IAAI,CAAC,CAACA,GAAG,CAACS,QAAQ,CAAC;~~EAC1E~~,MAAMd,QAAQ,GAAGO,YAAY,IAAIN,WAAW;EAE5C,MAAMc,QAAQ,~~GAAG1B~~,KAAK,~~CAAC2B~~,MAAM,CAAc,IAAI,CAAC;EAChD,MAAMC,OAAO,~~GAAGzB~~,gBAAgB,~~CAAE0B~~,KAAqB,IAAKN,QAAQ,CAACM,KAAK,EAAE;IAAEf;EAAK,CAAE,CAAC,CAAC;~~EAEvFd~~,KAAK,~~CAAC8B~~,SAAS,CAAC,MAAK;IACnBT,UAAU,CAAC;MACTP,KAAK;MACLL,GAAG,EAAEiB;KACN,CAAC;IAEF,OAAO,MAAK;MACVJ,YAAY,CAAC;QAAER,KAAK;QAAEL,GAAG,EAAEiB;MAAQ,CAAE,CAAC;IACxC,CAAC;EACH,CAAC,EAAE,CAACL,UAAU,EAAEC,YAAY,EAAEI,QAAQ,EAAEZ,KAAK,CAAC,CAAC;EAE/C,MAAMiB,aAAa,~~GAAG7B~~,gBAAgB,~~CAACW~~,IAAI,CAAC;EAC5C,MAAMmB,gBAAgB,~~GAAG9B~~,gBAAgB,~~CAACQ~~,OAAO,EAAE;IAAEuB,QAAQ,EAAE,IAAI;IAAEC,YAAY,EAAE;MAAEC,QAAQ,EAAE3B,KAAK,CAAC2B;IAAQ;EAAE,CAAE,CAAC;EAClH,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdxB,IAAI,EAAE,MAAM;MACZH,OAAO,EAAE;KACV;IACD2B,IAAI,~~EAAEpC~~,qBAAqB,CAAC,QAAQ,EAAE;~~MACpCQ~~,GAAG,~~EAAEL~~,aAAa,~~CAACK~~,GAAG,EAAEiB,QAAQ,CAAC;MACjCY,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE,QAAQ;MACd;MACA;MACA,eAAe,EAAE5B,QAAQ,GAAG6B,SAAS,GAAG,GAAGrB,QAAQ,EAAE;MACrD,GAAGX,KAAK;MACRG,QAAQ;MACRiB;KACD,CAAC;IACFf,IAAI,EAAEkB,aAAa;IACnBU,QAAQ,EAAEC,OAAO,CAAC,cAAa,aAAbX,aAAa,uBAAbA,aAAa,CAAEI,QAAQ,KAAI,CAACH,gBAAgB,CAACG,QAAQ,CAAC;IACxEzB,OAAO,EAAEsB,gBAAgB;IACzBjB,UAAU;IACV4B,6BAA6B,EAAE1B,uBAAuB,GAAG,EAAE,GAAGuB,SAAS;IACvE7B,QAAQ;IACRQ,QAAQ;IACRK,IAAI;IACJV,KAAK;IACLW;GACD;AACH,CAAC","names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","~~TabListContext~~","~~useContextSelector","~~useTab_unstable","props","ref","content","disabled","tabDisabled","icon","value","appearance","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onClick","event","useEffect","iconShorthand","contentShorthand","required","defaultProps","children","components","root","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { ~~TabListContext~~ } from '../TabList/TabListContext';\nimport { ~~useContextSelector } from '@fluentui/react-context-selector';\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, value } = props;\n\n const appearance = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.appearance);\n const reserveSelectedTabSpace = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.reserveSelectedTabSpace);\n const listDisabled = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.disabled);\n const selected = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.selectedValue === value);\n const onRegister = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.onRegister);\n const onUnregister = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.onUnregister);\n const onSelect = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.onSelect);\n const size = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.size);\n const vertical = ~~useContextSelector~~(~~TabListContext,~~ ctx => !!ctx.vertical);\n const disabled = listDisabled \|\| tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onClick = useEventCallback((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 iconShorthand = resolveShorthand(icon);\n const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n return {\n components: {\n root: 'button',\n icon: 'span',\n content: 'span',\n },\n root: getNativeElementProps('button', {\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,\n }),\n icon: iconShorthand,\n iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n content: contentShorthand,\n appearance,\n contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"]}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,2BAA2B;AAEpH,SAASC,0BAA0B,QAAQ,2BAA2B;AAGtE;;;;;;;;;AASA,OAAO,MAAMC,eAAe,GAAG,CAACC,KAAe,EAAEC,GAA2B,KAAc;EACxF,MAAM;IAAEC,OAAO;IAAEC,QAAQ,EAAEC,WAAW,GAAG,KAAK;IAAEC,IAAI;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAErE,MAAMO,UAAU,GAAGT,0BAA0B,CAACU,GAAG,IAAIA,GAAG,CAACD,UAAU,CAAC;EACpE,MAAME,uBAAuB,GAAGX,0BAA0B,CAACU,GAAG,IAAIA,GAAG,CAACC,uBAAuB,CAAC;EAC9F,MAAMC,YAAY,GAAGZ,0BAA0B,CAACU,GAAG,IAAIA,GAAG,CAACL,QAAQ,CAAC;EACpE,MAAMQ,QAAQ,GAAGb,0BAA0B,CAACU,GAAG,IAAIA,GAAG,CAACI,aAAa,KAAKN,KAAK,CAAC;EAC/E,MAAMO,UAAU,GAAGf,0BAA0B,CAACU,GAAG,IAAIA,GAAG,CAACK,UAAU,CAAC;EACpE,MAAMC,YAAY,GAAGhB,0BAA0B,CAACU,GAAG,IAAIA,GAAG,CAACM,YAAY,CAAC;EACxE,MAAMC,QAAQ,GAAGjB,0BAA0B,CAACU,GAAG,IAAIA,GAAG,CAACO,QAAQ,CAAC;EAChE,MAAMC,IAAI,GAAGlB,0BAA0B,CAACU,GAAG,IAAIA,GAAG,CAACQ,IAAI,CAAC;EACxD,MAAMC,QAAQ,GAAGnB,0BAA0B,CAACU,GAAG,IAAI,CAAC,CAACA,GAAG,CAACS,QAAQ,CAAC;EAClE,MAAMd,QAAQ,GAAGO,YAAY,IAAIN,WAAW;EAE5C,MAAMc,QAAQ,GAAGzB,KAAK,CAAC0B,MAAM,CAAc,IAAI,CAAC;EAChD,MAAMC,OAAO,GAAGxB,gBAAgB,CAAEyB,KAAqB,IAAKN,QAAQ,CAACM,KAAK,EAAE;IAAEf;EAAK,CAAE,CAAC,CAAC;EAEvFb,KAAK,CAAC6B,SAAS,CAAC,MAAK;IACnBT,UAAU,CAAC;MACTP,KAAK;MACLL,GAAG,EAAEiB;KACN,CAAC;IAEF,OAAO,MAAK;MACVJ,YAAY,CAAC;QAAER,KAAK;QAAEL,GAAG,EAAEiB;MAAQ,CAAE,CAAC;IACxC,CAAC;EACH,CAAC,EAAE,CAACL,UAAU,EAAEC,YAAY,EAAEI,QAAQ,EAAEZ,KAAK,CAAC,CAAC;EAE/C,MAAMiB,aAAa,GAAG5B,gBAAgB,CAACU,IAAI,CAAC;EAC5C,MAAMmB,gBAAgB,GAAG7B,gBAAgB,CAACO,OAAO,EAAE;IAAEuB,QAAQ,EAAE,IAAI;IAAEC,YAAY,EAAE;MAAEC,QAAQ,EAAE3B,KAAK,CAAC2B;IAAQ;EAAE,CAAE,CAAC;EAClH,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdxB,IAAI,EAAE,MAAM;MACZH,OAAO,EAAE;KACV;IACD2B,IAAI,EAAEnC,qBAAqB,CAAC,QAAQ,EAAE;MACpCO,GAAG,EAAEJ,aAAa,CAACI,GAAG,EAAEiB,QAAQ,CAAC;MACjCY,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE,QAAQ;MACd;MACA;MACA,eAAe,EAAE5B,QAAQ,GAAG6B,SAAS,GAAG,GAAGrB,QAAQ,EAAE;MACrD,GAAGX,KAAK;MACRG,QAAQ;MACRiB;KACD,CAAC;IACFf,IAAI,EAAEkB,aAAa;IACnBU,QAAQ,EAAEC,OAAO,CAAC,cAAa,aAAbX,aAAa,uBAAbA,aAAa,CAAEI,QAAQ,KAAI,CAACH,gBAAgB,CAACG,QAAQ,CAAC;IACxEzB,OAAO,EAAEsB,gBAAgB;IACzBjB,UAAU;IACV4B,6BAA6B,EAAE1B,uBAAuB,GAAG,EAAE,GAAGuB,SAAS;IACvE7B,QAAQ;IACRQ,QAAQ;IACRK,IAAI;IACJV,KAAK;IACLW;GACD;AACH,CAAC","names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","value","appearance","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onClick","event","useEffect","iconShorthand","contentShorthand","required","defaultProps","children","components","root","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } 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, 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 onClick = useEventCallback((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 iconShorthand = resolveShorthand(icon);\n const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n return {\n components: {\n root: 'button',\n icon: 'span',\n content: 'span',\n },\n root: getNativeElementProps('button', {\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,\n }),\n icon: iconShorthand,\n iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n content: contentShorthand,\n appearance,\n contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"]}

package/lib/components/Tab/useTabAnimatedIndicator.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { useContextSelector } from '@fluentui/react-context-selector';
-import { TabListContext } from '../TabList/TabListContext';
+import { useTabListContext_unstable } from '../TabList/TabListContext';
 import { tokens } from '@fluentui/react-theme';
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const tabIndicatorCssVars_unstable = {
@@ -75,7 +74,7 @@ export const useTabAnimatedIndicatorStyles_unstable = state => {
     offset: 0,
     scale: 1
   });
-  const getRegisteredTabs = useContextSelector(TabListContext, ctx => ctx.getRegisteredTabs);
+  const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);
   React.useEffect(() => {
     if (lastAnimatedFrom) {
       setAnimationValues({

package/lib/components/Tab/useTabAnimatedIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,~~kBAAkB~~,QAAQ,~~kCAAkC;AACrE,SAASC,cAAc,QAAQ,~~2BAA2B;~~AAE1D~~,SAASC,MAAM,QAAQ,uBAAuB;AAE9C;AACA,MAAMC,4BAA4B,GAAG;EACnCC,SAAS,EAAE,8BAA8B;EACzCC,QAAQ,EAAE;CACX;AAED,MAAMC,wBAAwB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAgC/B;AAEF,MAAMC,gBAAgB,GAAIC,OAAoB,IAAI;;EAChD,IAAIA,OAAO,EAAE;IACX,MAAMC,UAAU,GAAG,cAAO,CAACC,aAAa,0CAAEC,qBAAqB,EAAE,KAAI;MAAEC,CAAC,EAAE,CAAC;MAAEC,CAAC,EAAE,CAAC;MAAEC,KAAK,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAC,CAAE;IACxG,MAAMC,OAAO,GAAGR,OAAO,CAACG,qBAAqB,EAAE;IAE/C,OAAO;MACLC,CAAC,EAAEI,OAAO,CAACJ,CAAC,GAAGH,UAAU,CAACG,CAAC;MAC3BC,CAAC,EAAEG,OAAO,CAACH,CAAC,GAAGJ,UAAU,CAACI,CAAC;MAC3BC,KAAK,EAAEE,OAAO,CAACF,KAAK;MACpBC,MAAM,EAAEC,OAAO,CAACD;KACjB;;EAEH,OAAOE,SAAS;AAClB,CAAC;AAED,MAAMC,oBAAoB,GAAG,CAACC,cAA+C,EAAEC,KAAgB,KAAI;;EACjG,MAAMZ,OAAO,GACXY,KAAK,KAAKH,SAAS,IAAIG,KAAK,KAAK,IAAI,GAAG,oBAAc,CAACC,IAAI,CAACC,SAAS,CAACF,KAAK,CAAC,CAAC,0CAAEG,GAAG,CAACC,OAAO,GAAGP,SAAS;EACxG,OAAOT,OAAO,GAAGD,gBAAgB,CAACC,OAAO,CAAC,GAAGS,SAAS;AACxD,CAAC;AAED;;;AAGA,OAAO,MAAMQ,sCAAsC,GAAIC,KAAe,IAAc;EAClF,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC;EAAQ,CAAE,GAAGH,KAAK;EAE9C,MAAMI,qBAAqB,GAAGxB,wBAAwB,EAAE;EACxD,MAAM,CAACyB,gBAAgB,EAAEC,mBAAmB,CAAC,~~GAAGnC~~,KAAK,~~CAACoC~~,QAAQ,EAAY;EAC1E,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,~~GAAGtC~~,KAAK,~~CAACoC~~,QAAQ,CAAC;IAAEG,MAAM,EAAE,CAAC;IAAEC,KAAK,EAAE;EAAC,CAAE,CAAC;EACrF,MAAMC,iBAAiB,~~GAAGtC~~,~~kBAAkB~~,~~CAACC~~,~~cAAc,EAAEsC,~~GAAG,IAAIA,GAAG,CAACD,iBAAiB,CAAC;~~EAE1FzC~~,KAAK,~~CAAC2C~~,SAAS,CAAC,MAAK;IACnB,IAAIT,gBAAgB,EAAE;MACpBI,kBAAkB,CAAC;QAAEC,MAAM,EAAE,CAAC;QAAEC,KAAK,EAAE;MAAC,CAAE,CAAC;;EAE/C,CAAC,EAAE,CAACN,gBAAgB,CAAC,CAAC;EAEtB,IAAIH,QAAQ,EAAE;IACZ,MAAM;MAAEa,qBAAqB;MAAEC,aAAa;MAAEvB;IAAc,CAAE,GAAGmB,iBAAiB,EAAE;IACpF,MAAMK,uBAAuB,GAAGzB,oBAAoB,CAACC,cAAc,EAAEsB,qBAAqB,CAAC;IAC3F,MAAMG,eAAe,GAAG1B,oBAAoB,CAACC,cAAc,EAAEuB,aAAa,CAAC;IAE3E,IACEE,eAAe,IACfD,uBAAuB,IACvBF,qBAAqB,IACrBV,gBAAgB,KAAKU,qBAAqB,EAC1C;MACA,MAAML,MAAM,GAAGP,QAAQ,GACnBc,uBAAuB,CAAC9B,CAAC,GAAG+B,eAAe,CAAC/B,CAAC,GAC7C8B,uBAAuB,CAAC/B,CAAC,GAAGgC,eAAe,CAAChC,CAAC;MAEjD,MAAMyB,KAAK,GAAGR,QAAQ,GAClBc,uBAAuB,CAAC5B,MAAM,GAAG6B,eAAe,CAAC7B,MAAM,GACvD4B,uBAAuB,CAAC7B,KAAK,GAAG8B,eAAe,CAAC9B,KAAK;MAEzDqB,kBAAkB,CAAC;QAAEC,MAAM;QAAEC;MAAK,CAAE,CAAC;MACrCL,mBAAmB,CAACS,qBAAqB,CAAC;;GAE7C,MAAM,IAAIV,gBAAgB,EAAE;IAC3B;IACA;IACAC,mBAAmB,CAACf,SAAS,CAAC;;EAGhC;EACA,IAAIU,QAAQ,EAAE;IACZ,OAAOD,KAAK;;EAGd;EACA;EACA,MAAMmB,SAAS,GAAGX,eAAe,CAACE,MAAM,KAAK,CAAC,IAAIF,eAAe,CAACG,KAAK,KAAK,CAAC;EAE7EX,KAAK,CAACoB,IAAI,CAACC,SAAS,~~GAAGjD~~,YAAY,~~CACjC4B~~,KAAK,CAACoB,IAAI,CAACC,SAAS,EACpBnB,QAAQ,IAAIE,qBAAqB,CAACkB,IAAI,EACtCpB,QAAQ,IAAIiB,SAAS,IAAIf,qBAAqB,CAACmB,QAAQ,EACvDrB,QAAQ,KAAKC,QAAQ,GAAGC,qBAAqB,CAACD,QAAQ,GAAGC,qBAAqB,CAACoB,UAAU,CAAC,CAC3F;EAED,MAAMC,WAAW,GAAG;IAClB,CAAChD,4BAA4B,CAACC,SAAS,GAAG,GAAG8B,eAAe,CAACE,MAAM,IAAI;IACvE,CAACjC,4BAA4B,CAACE,QAAQ,GAAG,GAAG6B,eAAe,CAACG,KAAK;GAClE;EAEDX,KAAK,CAACoB,IAAI,CAACM,KAAK,GAAG;IACjB,GAAGD,WAAW;IACd,GAAGzB,KAAK,CAACoB,IAAI,CAACM;GACf;EAED,OAAO1B,KAAK;AACd,CAAC","names":["React","mergeClasses","shorthands","~~useContextSelector~~","~~TabListContext","~~tokens","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","vertical","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","base","animated","horizontal","rootCssVars","style"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { ~~useContextSelector~~ } from '~~@fluentui/react-context-selector';\nimport { TabListContext } from '~~../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n ...shorthands.overflow('visible'),\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms',\n },\n },\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n if (element) {\n const parentRect = element.parentElement?.getBoundingClientRect() \|\| { x: 0, y: 0, width: 0, height: 0 };\n const tabRect = element.getBoundingClientRect();\n\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height,\n };\n }\n return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n const element =\n value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n const { disabled, selected, vertical } = state;\n\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n const getRegisteredTabs = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.getRegisteredTabs);\n\n React.useEffect(() => {\n if (lastAnimatedFrom) {\n setAnimationValues({ offset: 0, scale: 1 });\n }\n }, [lastAnimatedFrom]);\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (\n selectedTabRect &&\n previousSelectedTabRect &&\n previousSelectedValue &&\n lastAnimatedFrom !== previousSelectedValue\n ) {\n const offset = vertical\n ? previousSelectedTabRect.y - selectedTabRect.y\n : previousSelectedTabRect.x - selectedTabRect.x;\n\n const scale = vertical\n ? previousSelectedTabRect.height / selectedTabRect.height\n : previousSelectedTabRect.width / selectedTabRect.width;\n\n setAnimationValues({ offset, scale });\n setLastAnimatedFrom(previousSelectedValue);\n }\n } else if (lastAnimatedFrom) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n state.root.className = mergeClasses(\n state.root.className,\n selected && activeIndicatorStyles.base,\n selected && animating && activeIndicatorStyles.animated,\n selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n );\n\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n };\n\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"]}
1	+ {"version":3,"mappings":"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","names":["React","mergeClasses","shorthands","useTabListContext_unstable","tokens","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","vertical","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","base","animated","horizontal","rootCssVars","style"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n ...shorthands.overflow('visible'),\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms',\n },\n },\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n if (element) {\n const parentRect = element.parentElement?.getBoundingClientRect() \|\| { x: 0, y: 0, width: 0, height: 0 };\n const tabRect = element.getBoundingClientRect();\n\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height,\n };\n }\n return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n const element =\n value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n const { disabled, selected, vertical } = state;\n\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n React.useEffect(() => {\n if (lastAnimatedFrom) {\n setAnimationValues({ offset: 0, scale: 1 });\n }\n }, [lastAnimatedFrom]);\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (\n selectedTabRect &&\n previousSelectedTabRect &&\n previousSelectedValue &&\n lastAnimatedFrom !== previousSelectedValue\n ) {\n const offset = vertical\n ? previousSelectedTabRect.y - selectedTabRect.y\n : previousSelectedTabRect.x - selectedTabRect.x;\n\n const scale = vertical\n ? previousSelectedTabRect.height / selectedTabRect.height\n : previousSelectedTabRect.width / selectedTabRect.width;\n\n setAnimationValues({ offset, scale });\n setLastAnimatedFrom(previousSelectedValue);\n }\n } else if (lastAnimatedFrom) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n state.root.className = mergeClasses(\n state.root.className,\n selected && activeIndicatorStyles.base,\n selected && animating && activeIndicatorStyles.animated,\n selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n );\n\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n };\n\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"]}

package/lib/components/TabList/TabList.js CHANGED Viewed

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { useTabList_unstable } from './useTabList';
 import { renderTabList_unstable } from './renderTabList';
 import { useTabListStyles_unstable } from './useTabListStyles';
-import { useTabListContextValues } from './useTabListContextValues';
+import { useTabListContextValues_unstable } from './useTabListContextValues';
 /**
  * A tab list provides single selection from a set of tabs.
  */
 export const TabList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTabList_unstable(props, ref);
-  const contextValues = useTabListContextValues(state);
+  const contextValues = useTabListContextValues_unstable(state);
   useTabListStyles_unstable(state);
   return renderTabList_unstable(state, contextValues);
 });

package/lib/components/TabList/TabList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAG9D,SAASC,~~uBAAuB~~,QAAQ,2BAA2B;~~AAEnE~~;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGR,mBAAmB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAME,aAAa,GAAGN,~~uBAAuB~~,CAACK,KAAK,CAAC;~~EAEpDN~~,yBAAyB,CAACM,KAAK,CAAC;EAChC,OAAOP,sBAAsB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFL,OAAO,CAACM,WAAW,GAAG,SAAS","names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","~~useTabListContextValues~~","TabList","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ~~useTabListContextValues~~ } from './useTabListContextValues';\n\n/*\n A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n const state = useTabList_unstable(props, ref);\n const contextValues = ~~useTabListContextValues~~(state);\n\n useTabListStyles_unstable(state);\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"]}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAG9D,SAASC,gCAAgC,QAAQ,2BAA2B;AAE5E;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGR,mBAAmB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAME,aAAa,GAAGN,gCAAgC,CAACK,KAAK,CAAC;EAE7DN,yBAAyB,CAACM,KAAK,CAAC;EAChC,OAAOP,sBAAsB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFL,OAAO,CAACM,WAAW,GAAG,SAAS","names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","TabList","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\n\n/*\n A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n const state = useTabList_unstable(props, ref);\n const contextValues = useTabListContextValues_unstable(state);\n\n useTabListStyles_unstable(state);\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"]}

package/lib/components/TabList/TabListContext.js CHANGED Viewed

@@ -1,6 +1,5 @@
-import { createContext } from '@fluentui/react-context-selector';
-// eslint-disable-next-line @fluentui/no-context-default-value
-export const TabListContext = /*#__PURE__*/createContext({
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+const tabListContextDefaultValue = {
   appearance: 'transparent',
   reserveSelectedTabSpace: true,
   disabled: false,
@@ -21,5 +20,8 @@ export const TabListContext = /*#__PURE__*/createContext({
   },
   size: 'medium',
   vertical: false
-});
+};
+export const TabListContext = /*#__PURE__*/createContext(undefined);
+export const TabListProvider = TabListContext.Provider;
+export const useTabListContext_unstable = selector => useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));
 //# sourceMappingURL=TabListContext.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,aAAa,QAAQ,kCAAkC;~~AAIhE;AACA~~,~~OAAO,~~MAAMC,~~cAAc~~,~~gBAAiCD,aAAa,CAAsB~~;~~EAC7FE~~,UAAU,EAAE,aAAa;EACzBC,uBAAuB,EAAE,IAAI;EAC7BC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAEC,SAAS;EACxBC,UAAU,EAAE,MAAK;IACf;EAAA,CACD;EACDC,YAAY,EAAE,MAAK;IACjB;EAAA,CACD;EACDC,QAAQ,EAAE,MAAK;IACb;EAAA,CACD;EACDC,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACLC,cAAc,EAAE;KACjB;EACH,CAAC;EACDC,IAAI,EAAE,QAAQ;EACdC,QAAQ,EAAE;CACX,CAAC","names":["createContext","~~TabListContext~~","appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\~~n//~~ ~~eslint-disable-next-line @fluentui/no-context-default-value\nexport const TabListContext~~: ~~Context<~~TabListContextValue> = ~~createContext<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"]}
1	+ {"version":3,"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAIpF,MAAMC,0BAA0B,GAAwB;EACtDC,UAAU,EAAE,aAAa;EACzBC,uBAAuB,EAAE,IAAI;EAC7BC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAEC,SAAS;EACxBC,UAAU,EAAE,MAAK;IACf;EAAA,CACD;EACDC,YAAY,EAAE,MAAK;IACjB;EAAA,CACD;EACDC,QAAQ,EAAE,MAAK;IACb;EAAA,CACD;EACDC,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACLC,cAAc,EAAE;KACjB;EACH,CAAC;EACDC,IAAI,EAAE,QAAQ;EACdC,QAAQ,EAAE;CACX;AAED,OAAO,MAAMC,cAAc,gBAAiCf,aAAa,CACvEO,SAAS,CACsB;AAEjC,OAAO,MAAMS,eAAe,GAAGD,cAAc,CAACE,QAAQ;AACtD,OAAO,MAAMC,0BAA0B,GAAOC,QAAiD,IAC7FlB,kBAAkB,CAACc,cAAc,EAAE,CAACK,GAAG,GAAGlB,0BAA0B,KAAKiB,QAAQ,CAACC,GAAG,CAAC,CAAC","names":["createContext","useContextSelector","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","TabListContext","TabListProvider","Provider","useTabListContext_unstable","selector","ctx"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/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"]}

package/lib/components/TabList/index.js CHANGED Viewed

@@ -1,6 +1,8 @@
 export * from './TabList';
 export * from './TabList.types';
+export * from './TabListContext';
 export * from './renderTabList';
 export * from './useTabList';
+export * from './useTabListContextValues';
 export * from './useTabListStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/TabList/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListStyles';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './TabListContext';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListContextValues';\nexport * from './useTabListStyles';\n"]}

package/lib/components/TabList/renderTabList.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { TabListContext } from './TabListContext';
+import { TabListProvider } from './TabListContext';
 /**
  * Render the final JSX of TabList
  */
@@ -11,7 +11,7 @@ export const renderTabList_unstable = (state, contextValues) => {
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, {
     ...slotProps.root
-  }, /*#__PURE__*/React.createElement(TabListContext.Provider, {
+  }, /*#__PURE__*/React.createElement(TabListProvider, {
     value: contextValues.tabList
   }, state.root.children));
 };

package/lib/components/TabList/renderTabList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,~~cAAc~~,QAAQ,kBAAkB;~~AAEjD~~;;;AAGA,OAAO,MAAMC,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeG,KAAK,CAAC;EAE1D,oBACEJ,oBAACM,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BR,oBAACE,~~cAAc,CAACO,QAAQ~~;~~IAACC~~,KAAK,~~EAAEL~~,aAAa,~~CAACM~~;EAAO,~~GAAGP~~,KAAK,CAACI,IAAI,~~CAACI~~,QAAQ,~~CAA2B~~,~~CAC3F~~;AAEjB,CAAC","names":["React","getSlots","~~TabListContext~~","renderTabList_unstable","state","contextValues","slots","slotProps","root","~~Provider","~~value","tabList","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { ~~TabListContext~~ } from './TabListContext';\n\n/*\n Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <~~TabListContext.Provider~~ value={contextValues.tabList}>{state.root.children}</~~TabListContext.Provider~~>\n </slots.root>\n );\n};\n"]}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,eAAe,QAAQ,kBAAkB;AAElD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeG,KAAK,CAAC;EAE1D,oBACEJ,oBAACM,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BR,oBAACE,eAAe;IAACO,KAAK,EAAEJ,aAAa,CAACK;EAAO,GAAGN,KAAK,CAACI,IAAI,CAACG,QAAQ,CAAmB,CAC3E;AAEjB,CAAC","names":["React","getSlots","TabListProvider","renderTabList_unstable","state","contextValues","slots","slotProps","root","value","tabList","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/*\n Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n </slots.root>\n );\n};\n"]}

package/lib/components/TabList/useTabListContextValues.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export function useTabListContextValues(state) {
+export function useTabListContextValues_unstable(state) {
   const {
     appearance,
     reserveSelectedTabSpace,

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAEA,OAAM,SAAUA,~~uBAAuB~~,CAACC,KAAmB;~~EACzD~~,MAAM;IACJC,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BC,UAAU;IACVC,YAAY;IACZC,QAAQ;IACRC,iBAAiB;IACjBC,IAAI;IACJC;EAAQ,CACT,GAAGX,KAAK;EAET,MAAMY,OAAO,GAAwB;IACnCX,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BG,QAAQ;IACRF,UAAU;IACVC,YAAY;IACZE,iBAAiB;IACjBC,IAAI;IACJC;GACD;EAED,OAAO;IAAEC;EAAO,CAAE;AACpB","names":["~~useTabListContextValues~~","state","appearance","reserveSelectedTabSpace","disabled","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function ~~useTabListContextValues~~(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"]}
1	+ {"version":3,"mappings":"AAEA,OAAM,SAAUA,gCAAgC,CAACC,KAAmB;EAClE,MAAM;IACJC,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BC,UAAU;IACVC,YAAY;IACZC,QAAQ;IACRC,iBAAiB;IACjBC,IAAI;IACJC;EAAQ,CACT,GAAGX,KAAK;EAET,MAAMY,OAAO,GAAwB;IACnCX,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BG,QAAQ;IACRF,UAAU;IACVC,YAAY;IACZE,iBAAiB;IACjBC,IAAI;IACJC;GACD;EAED,OAAO;IAAEC;EAAO,CAAE;AACpB","names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/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"]}

package/lib/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
 export { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';
-export { renderTabList_unstable, TabList, tabListClassNames, useTabListStyles_unstable, useTabList_unstable } from './TabList';
+export { renderTabList_unstable, TabList, TabListProvider, tabListClassNames, useTabListContext_unstable, useTabListContextValues_unstable, useTabListStyles_unstable, useTabList_unstable } from './TabList';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AACA,SAASA,kBAAkB,EAAEC,GAAG,EAAEC,aAAa,EAAEC,qBAAqB,EAAEC,eAAe,QAAQ,OAAO;AAatG,SACEC,sBAAsB,EACtBC,OAAO,EACPC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW","names":["renderTab_unstable","Tab","tabClassNames","useTabStyles_unstable","useTab_unstable","renderTabList_unstable","TabList","tabListClassNames","useTabListStyles_unstable","useTabList_unstable"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n TabRegisterData,\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListProps,\n TabListSlots,\n TabListState,\n} from './TabList';\nexport {\n renderTabList_unstable,\n TabList,\n tabListClassNames,\n useTabListStyles_unstable,\n useTabList_unstable,\n} from './TabList';\n"]}
1	+ {"version":3,"mappings":"AACA,SAASA,kBAAkB,EAAEC,GAAG,EAAEC,aAAa,EAAEC,qBAAqB,EAAEC,eAAe,QAAQ,OAAO;AAatG,SACEC,sBAAsB,EACtBC,OAAO,EACPC,eAAe,EACfC,iBAAiB,EACjBC,0BAA0B,EAC1BC,gCAAgC,EAChCC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW","names":["renderTab_unstable","Tab","tabClassNames","useTabStyles_unstable","useTab_unstable","renderTabList_unstable","TabList","TabListProvider","tabListClassNames","useTabListContext_unstable","useTabListContextValues_unstable","useTabListStyles_unstable","useTabList_unstable"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n TabRegisterData,\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListProps,\n TabListSlots,\n TabListState,\n} from './TabList';\nexport {\n renderTabList_unstable,\n TabList,\n TabListProvider,\n tabListClassNames,\n useTabListContext_unstable,\n useTabListContextValues_unstable,\n useTabListStyles_unstable,\n useTabList_unstable,\n} from './TabList';\n"]}

package/lib-amd/components/Tab/useTab.js CHANGED Viewed

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../TabList/TabListContext", "@fluentui/react-context-selector"], function (require, exports, tslib_1, React, react_utilities_1, TabListContext_1, react_context_selector_1) {
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../TabList/TabListContext"], function (require, exports, tslib_1, React, react_utilities_1, TabListContext_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useTab_unstable = void 0;
@@ -13,15 +13,15 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "..
      */
     var useTab_unstable = function (props, ref) {
         var content = props.content, _a = props.disabled, tabDisabled = _a === void 0 ? false : _a, icon = props.icon, value = props.value;
-        var appearance = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.appearance; });
-        var reserveSelectedTabSpace = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.reserveSelectedTabSpace; });
-        var listDisabled = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.disabled; });
-        var selected = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.selectedValue === value; });
-        var onRegister = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.onRegister; });
-        var onUnregister = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.onUnregister; });
-        var onSelect = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.onSelect; });
-        var size = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.size; });
-        var vertical = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return !!ctx.vertical; });
+        var appearance = TabListContext_1.useTabListContext_unstable(function (ctx) { return ctx.appearance; });
+        var reserveSelectedTabSpace = TabListContext_1.useTabListContext_unstable(function (ctx) { return ctx.reserveSelectedTabSpace; });
+        var listDisabled = TabListContext_1.useTabListContext_unstable(function (ctx) { return ctx.disabled; });
+        var selected = TabListContext_1.useTabListContext_unstable(function (ctx) { return ctx.selectedValue === value; });
+        var onRegister = TabListContext_1.useTabListContext_unstable(function (ctx) { return ctx.onRegister; });
+        var onUnregister = TabListContext_1.useTabListContext_unstable(function (ctx) { return ctx.onUnregister; });
+        var onSelect = TabListContext_1.useTabListContext_unstable(function (ctx) { return ctx.onSelect; });
+        var size = TabListContext_1.useTabListContext_unstable(function (ctx) { return ctx.size; });
+        var vertical = TabListContext_1.useTabListContext_unstable(function (ctx) { return !!ctx.vertical; });
         var disabled = listDisabled || tabDisabled;
         var innerRef = React.useRef(null);
         var onClick = react_utilities_1.useEventCallback(function (event) { return onSelect(event, { value: value }); });

package/lib-amd/components/Tab/useTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTab.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/useTab.ts"],"names":[],"mappings":";;;;~~IAOA~~;;;;;;;;OAQG;IACI,IAAM,eAAe,GAAG,UAAC,KAAe,EAAE,GAA2B;QAClE,IAAA,OAAO,GAAiD,KAAK,QAAtD,EAAE,KAA+C,KAAK,SAAvB,EAAnB,WAAW,mBAAG,KAAK,KAAA,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAEtE,IAAM,UAAU,GAAG,~~2CAAkB~~,CAAC~~,+BAAc~~,~~EAAE,~~UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,UAAU,EAAd,CAAc,CAAC,CAAC;~~QAC7E~~,IAAM,uBAAuB,GAAG,~~2CAAkB~~,CAAC~~,+BAAc~~,~~EAAE,~~UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,uBAAuB,EAA3B,CAA2B,CAAC,CAAC;~~QACvG~~,IAAM,YAAY,GAAG,~~2CAAkB~~,CAAC~~,+BAAc~~,~~EAAE,~~UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,QAAQ,EAAZ,CAAY,CAAC,CAAC;~~QAC7E~~,IAAM,QAAQ,GAAG,~~2CAAkB~~,CAAC~~,+BAAc~~,~~EAAE,~~UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,aAAa,KAAK,KAAK,EAA3B,CAA2B,CAAC,CAAC;~~QACxF~~,IAAM,UAAU,GAAG,~~2CAAkB~~,CAAC~~,+BAAc~~,~~EAAE,~~UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,UAAU,EAAd,CAAc,CAAC,CAAC;~~QAC7E~~,IAAM,YAAY,GAAG,~~2CAAkB~~,CAAC~~,+BAAc~~,~~EAAE,~~UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,YAAY,EAAhB,CAAgB,CAAC,CAAC;~~QACjF~~,IAAM,QAAQ,GAAG,~~2CAAkB~~,CAAC~~,+BAAc~~,~~EAAE,~~UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,QAAQ,EAAZ,CAAY,CAAC,CAAC;~~QACzE~~,IAAM,IAAI,GAAG,~~2CAAkB~~,CAAC~~,+BAAc~~,~~EAAE,~~UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAR,CAAQ,CAAC,CAAC;~~QACjE~~,IAAM,QAAQ,GAAG,~~2CAAkB~~,CAAC~~,+BAAc~~,~~EAAE,~~UAAA,GAAG,IAAI,OAAA,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAd,CAAc,CAAC,CAAC;~~QAC3E~~,IAAM,QAAQ,GAAG,YAAY,IAAI,WAAW,CAAC;QAE7C,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;QACjD,IAAM,OAAO,GAAG,kCAAgB,CAAC,UAAC,KAAqB,IAAK,OAAA,QAAQ,CAAC,KAAK,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,EAA1B,CAA0B,CAAC,CAAC;QAExF,KAAK,CAAC,SAAS,CAAC;YACd,UAAU,CAAC;gBACT,KAAK,OAAA;gBACL,GAAG,EAAE,QAAQ;aACd,CAAC,CAAC;YAEH,OAAO;gBACL,YAAY,CAAC,EAAE,KAAK,OAAA,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;YACzC,CAAC,CAAC;QACJ,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;QAEhD,IAAM,aAAa,GAAG,kCAAgB,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAM,gBAAgB,GAAG,kCAAgB,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACnH,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,MAAM;aAChB;YACD,IAAI,EAAE,uCAAqB,CAAC,QAAQ,sCAClC,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,QAAQ,CAAC,EACjC,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,QAAQ;gBACd,yDAAyD;gBACzD,iEAAiE;gBACjE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAG,QAAU,IAClD,KAAK,KACR,QAAQ,UAAA,EACR,OAAO,SAAA,IACP;YACF,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,KAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;YACxE,OAAO,EAAE,gBAAgB;YACzB,UAAU,YAAA;YACV,6BAA6B,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;YACvE,QAAQ,UAAA;YACR,QAAQ,UAAA;YACR,IAAI,MAAA;YACJ,KAAK,OAAA;YACL,QAAQ,UAAA;SACT,CAAC;IACJ,CAAC,CAAC;IA1DW,QAAA,eAAe,mBA0D1B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { ~~TabListContext~~ } from '../TabList/TabListContext';\nimport { ~~useContextSelector } from '@fluentui/react-context-selector';\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, value } = props;\n\n const appearance = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.appearance);\n const reserveSelectedTabSpace = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.reserveSelectedTabSpace);\n const listDisabled = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.disabled);\n const selected = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.selectedValue === value);\n const onRegister = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.onRegister);\n const onUnregister = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.onUnregister);\n const onSelect = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.onSelect);\n const size = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.size);\n const vertical = ~~useContextSelector~~(~~TabListContext,~~ ctx => !!ctx.vertical);\n const disabled = listDisabled \|\| tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onClick = useEventCallback((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 iconShorthand = resolveShorthand(icon);\n const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n return {\n components: {\n root: 'button',\n icon: 'span',\n content: 'span',\n },\n root: getNativeElementProps('button', {\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,\n }),\n icon: iconShorthand,\n iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n content: contentShorthand,\n appearance,\n contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"]}
1	+ {"version":3,"file":"useTab.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/useTab.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } 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, 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 onClick = useEventCallback((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 iconShorthand = resolveShorthand(icon);\n const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n return {\n components: {\n root: 'button',\n icon: 'span',\n content: 'span',\n },\n root: getNativeElementProps('button', {\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,\n }),\n icon: iconShorthand,\n iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n content: contentShorthand,\n appearance,\n contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"]}

package/lib-amd/components/Tab/useTabAnimatedIndicator.js CHANGED Viewed

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "@griffel/react", "@fluentui/react-context-selector", "../TabList/TabListContext", "@fluentui/react-theme"], function (require, exports, tslib_1, React, react_1, react_context_selector_1, TabListContext_1, react_theme_1) {
+define(["require", "exports", "tslib", "react", "@griffel/react", "../TabList/TabListContext", "@fluentui/react-theme"], function (require, exports, tslib_1, React, react_1, TabListContext_1, react_theme_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useTabAnimatedIndicatorStyles_unstable = void 0;
@@ -63,7 +63,7 @@ define(["require", "exports", "tslib", "react", "@griffel/react", "@fluentui/rea
         var activeIndicatorStyles = useActiveIndicatorStyles();
         var _b = React.useState(), lastAnimatedFrom = _b[0], setLastAnimatedFrom = _b[1];
         var _c = React.useState({ offset: 0, scale: 1 }), animationValues = _c[0], setAnimationValues = _c[1];
-        var getRegisteredTabs = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.getRegisteredTabs; });
+        var getRegisteredTabs = TabListContext_1.useTabListContext_unstable(function (ctx) { return ctx.getRegisteredTabs; });
         React.useEffect(function () {
             if (lastAnimatedFrom) {
                 setAnimationValues({ offset: 0, scale: 1 });

package/lib-amd/components/Tab/useTabAnimatedIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTabAnimatedIndicator.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.ts"],"names":[],"mappings":";;;;~~IASA~~,gEAAgE;IAChE,IAAM,4BAA4B,GAAG;QACnC,SAAS,EAAE,8BAA8B;QACzC,QAAQ,EAAE,6BAA6B;KACxC,CAAC;IAEF,IAAM,wBAAwB,GAAG,kBAAU,CAAC;QAC1C,IAAI,uBAEC,kBAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,CAClC;QACD,QAAQ,EAAE;YACR,SAAS,EAAE;gBACT,kBAAkB,EAAE,WAAW;gBAC/B,kBAAkB,EAAE,KAAG,oBAAM,CAAC,YAAc;gBAC5C,wBAAwB,EAAE,KAAG,oBAAM,CAAC,kBAAoB;aACzD;YACD,yCAAyC,EAAE;gBACzC,SAAS,EAAE;oBACT,kBAAkB,EAAE,MAAM;oBAC1B,kBAAkB,EAAE,QAAQ;iBAC7B;aACF;SACF;QACD,UAAU,EAAE;YACV,SAAS,EAAE;gBACT,eAAe,EAAE,MAAM;gBACvB,SAAS,EAAE,oBAAkB,4BAA4B,CAAC,SAAS,2BACxD,4BAA4B,CAAC,QAAQ,OAAI;aACrD;SACF;QACD,QAAQ,EAAE;YACR,SAAS,EAAE;gBACT,eAAe,EAAE,KAAK;gBACtB,SAAS,EAAE,oBAAkB,4BAA4B,CAAC,SAAS,+BACpD,4BAA4B,CAAC,QAAQ,OAAI;aACzD;SACF;KACF,CAAC,CAAC;IAEH,IAAM,gBAAgB,GAAG,UAAC,OAAoB;;QAC5C,IAAI,OAAO,EAAE;YACX,IAAM,UAAU,GAAG,CAAA,MAAA,OAAO,CAAC,aAAa,0CAAE,qBAAqB,EAAE,KAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;YACzG,IAAM,OAAO,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;YAEhD,OAAO;gBACL,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;gBAC3B,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;gBAC3B,KAAK,EAAE,OAAO,CAAC,KAAK;gBACpB,MAAM,EAAE,OAAO,CAAC,MAAM;aACvB,CAAC;SACH;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,IAAM,oBAAoB,GAAG,UAAC,cAA+C,EAAE,KAAgB;;QAC7F,IAAM,OAAO,GACX,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAA,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,0CAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;QACzG,OAAO,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,CAAC,CAAC;IAEF;;OAEG;IACI,IAAM,sCAAsC,GAAG,UAAC,KAAe;;QAC5D,IAAA,QAAQ,GAAyB,KAAK,SAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAE/C,IAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;QACnD,IAAA,KAA0C,KAAK,CAAC,QAAQ,EAAY,EAAnE,gBAAgB,QAAA,EAAE,mBAAmB,QAA8B,CAAC;QACrE,IAAA,KAAwC,KAAK,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAA9E,eAAe,QAAA,EAAE,kBAAkB,QAA2C,CAAC;QACtF,IAAM,iBAAiB,GAAG,~~2CAAkB~~,CAAC~~,+BAAc~~,~~EAAE,~~UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,iBAAiB,EAArB,CAAqB,CAAC,CAAC;~~QAE3F~~,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,gBAAgB,EAAE;gBACpB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;aAC7C;QACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAEvB,IAAI,QAAQ,EAAE;YACN,IAAA,KAA2D,iBAAiB,EAAE,EAA5E,qBAAqB,2BAAA,EAAE,aAAa,mBAAA,EAAE,cAAc,oBAAwB,CAAC;YACrF,IAAM,uBAAuB,GAAG,oBAAoB,CAAC,cAAc,EAAE,qBAAqB,CAAC,CAAC;YAC5F,IAAM,eAAe,GAAG,oBAAoB,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;YAE5E,IACE,eAAe;gBACf,uBAAuB;gBACvB,qBAAqB;gBACrB,gBAAgB,KAAK,qBAAqB,EAC1C;gBACA,IAAM,MAAM,GAAG,QAAQ;oBACrB,CAAC,CAAC,uBAAuB,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC;oBAC/C,CAAC,CAAC,uBAAuB,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC;gBAElD,IAAM,KAAK,GAAG,QAAQ;oBACpB,CAAC,CAAC,uBAAuB,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM;oBACzD,CAAC,CAAC,uBAAuB,CAAC,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC;gBAE1D,kBAAkB,CAAC,EAAE,MAAM,QAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;gBACtC,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;aAC5C;SACF;aAAM,IAAI,gBAAgB,EAAE;YAC3B,6EAA6E;YAC7E,yEAAyE;YACzE,mBAAmB,CAAC,SAAS,CAAC,CAAC;SAChC;QAED,oDAAoD;QACpD,IAAI,QAAQ,EAAE;YACZ,OAAO,KAAK,CAAC;SACd;QAED,6EAA6E;QAC7E,oEAAoE;QACpE,IAAM,SAAS,GAAG,eAAe,CAAC,MAAM,KAAK,CAAC,IAAI,eAAe,CAAC,KAAK,KAAK,CAAC,CAAC;QAE9E,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,KAAK,CAAC,IAAI,CAAC,SAAS,EACpB,QAAQ,IAAI,qBAAqB,CAAC,IAAI,EACtC,QAAQ,IAAI,SAAS,IAAI,qBAAqB,CAAC,QAAQ,EACvD,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAC3F,CAAC;QAEF,IAAM,WAAW;YACf,GAAC,4BAA4B,CAAC,SAAS,IAAM,eAAe,CAAC,MAAM,OAAI;YACvE,GAAC,4BAA4B,CAAC,QAAQ,IAAG,KAAG,eAAe,CAAC,KAAO;eACpE,CAAC;QAEF,KAAK,CAAC,IAAI,CAAC,KAAK,yCACX,WAAW,GACX,KAAK,CAAC,IAAI,CAAC,KAAK,CACpB,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IArEW,QAAA,sCAAsC,0CAqEjD","sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { ~~useContextSelector~~ } from '~~@fluentui/react-context-selector';\nimport { TabListContext } from '~~../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n ...shorthands.overflow('visible'),\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms',\n },\n },\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n if (element) {\n const parentRect = element.parentElement?.getBoundingClientRect() \|\| { x: 0, y: 0, width: 0, height: 0 };\n const tabRect = element.getBoundingClientRect();\n\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height,\n };\n }\n return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n const element =\n value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n const { disabled, selected, vertical } = state;\n\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n const getRegisteredTabs = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.getRegisteredTabs);\n\n React.useEffect(() => {\n if (lastAnimatedFrom) {\n setAnimationValues({ offset: 0, scale: 1 });\n }\n }, [lastAnimatedFrom]);\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (\n selectedTabRect &&\n previousSelectedTabRect &&\n previousSelectedValue &&\n lastAnimatedFrom !== previousSelectedValue\n ) {\n const offset = vertical\n ? previousSelectedTabRect.y - selectedTabRect.y\n : previousSelectedTabRect.x - selectedTabRect.x;\n\n const scale = vertical\n ? previousSelectedTabRect.height / selectedTabRect.height\n : previousSelectedTabRect.width / selectedTabRect.width;\n\n setAnimationValues({ offset, scale });\n setLastAnimatedFrom(previousSelectedValue);\n }\n } else if (lastAnimatedFrom) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n state.root.className = mergeClasses(\n state.root.className,\n selected && activeIndicatorStyles.base,\n selected && animating && activeIndicatorStyles.animated,\n selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n );\n\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n };\n\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"]}
1	+ {"version":3,"file":"useTabAnimatedIndicator.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n ...shorthands.overflow('visible'),\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms',\n },\n },\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n if (element) {\n const parentRect = element.parentElement?.getBoundingClientRect() \|\| { x: 0, y: 0, width: 0, height: 0 };\n const tabRect = element.getBoundingClientRect();\n\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height,\n };\n }\n return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n const element =\n value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n const { disabled, selected, vertical } = state;\n\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n React.useEffect(() => {\n if (lastAnimatedFrom) {\n setAnimationValues({ offset: 0, scale: 1 });\n }\n }, [lastAnimatedFrom]);\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (\n selectedTabRect &&\n previousSelectedTabRect &&\n previousSelectedValue &&\n lastAnimatedFrom !== previousSelectedValue\n ) {\n const offset = vertical\n ? previousSelectedTabRect.y - selectedTabRect.y\n : previousSelectedTabRect.x - selectedTabRect.x;\n\n const scale = vertical\n ? previousSelectedTabRect.height / selectedTabRect.height\n : previousSelectedTabRect.width / selectedTabRect.width;\n\n setAnimationValues({ offset, scale });\n setLastAnimatedFrom(previousSelectedValue);\n }\n } else if (lastAnimatedFrom) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n state.root.className = mergeClasses(\n state.root.className,\n selected && activeIndicatorStyles.base,\n selected && animating && activeIndicatorStyles.animated,\n selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n );\n\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n };\n\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"]}

package/lib-amd/components/TabList/TabList.js CHANGED Viewed

@@ -7,7 +7,7 @@ define(["require", "exports", "react", "./useTabList", "./renderTabList", "./use
      */
     exports.TabList = React.forwardRef(function (props, ref) {
         var state = useTabList_1.useTabList_unstable(props, ref);
-        var contextValues = useTabListContextValues_1.useTabListContextValues(state);
+        var contextValues = useTabListContextValues_1.useTabListContextValues_unstable(state);
         useTabListStyles_1.useTabListStyles_unstable(state);
         return renderTabList_1.renderTabList_unstable(state, contextValues);
     });

package/lib-amd/components/TabList/TabList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,OAAO,GAAsC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC9C,IAAM,aAAa,GAAG,~~iDAAuB~~,CAAC,KAAK,CAAC,CAAC;~~QAErD~~,4CAAyB,CAAC,KAAK,CAAC,CAAC;QACjC,OAAO,sCAAsB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ~~useTabListContextValues~~ } from './useTabListContextValues';\n\n/*\n A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n const state = useTabList_unstable(props, ref);\n const contextValues = ~~useTabListContextValues~~(state);\n\n useTabListStyles_unstable(state);\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"]}
1	+ {"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,OAAO,GAAsC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC9C,IAAM,aAAa,GAAG,0DAAgC,CAAC,KAAK,CAAC,CAAC;QAE9D,4CAAyB,CAAC,KAAK,CAAC,CAAC;QACjC,OAAO,sCAAsB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\n\n/*\n A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n const state = useTabList_unstable(props, ref);\n const contextValues = useTabListContextValues_unstable(state);\n\n useTabListStyles_unstable(state);\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"]}

package/lib-amd/components/TabList/TabListContext.js CHANGED Viewed

@@ -1,9 +1,8 @@
 define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.TabListContext = void 0;
-    // eslint-disable-next-line @fluentui/no-context-default-value
-    exports.TabListContext = react_context_selector_1.createContext({
+    exports.useTabListContext_unstable = exports.TabListProvider = exports.TabListContext = void 0;
+    var tabListContextDefaultValue = {
         appearance: 'transparent',
         reserveSelectedTabSpace: true,
         disabled: false,
@@ -24,6 +23,15 @@ define(["require", "exports", "@fluentui/react-context-selector"], function (req
         },
         size: 'medium',
         vertical: false,
-    });
+    };
+    exports.TabListContext = react_context_selector_1.createContext(undefined);
+    exports.TabListProvider = exports.TabListContext.Provider;
+    var useTabListContext_unstable = function (selector) {
+        return react_context_selector_1.useContextSelector(exports.TabListContext, function (ctx) {
+            if (ctx === void 0) { ctx = tabListContextDefaultValue; }
+            return selector(ctx);
+        });
+    };
+    exports.useTabListContext_unstable = useTabListContext_unstable;
 });
 //# sourceMappingURL=TabListContext.js.map

package/lib-amd/components/TabList/TabListContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabListContext.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;IAIA,~~8DAA8D;IACjD~~,~~QAAA~~,~~cAAc,GAAiC,sCAAa,CAAsB~~;~~QAC7F~~,UAAU,EAAE,aAAa;QACzB,uBAAuB,EAAE,IAAI;QAC7B,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,SAAS;QACxB,UAAU,EAAE;YACV,UAAU;QACZ,CAAC;QACD,YAAY,EAAE;YACZ,UAAU;QACZ,CAAC;QACD,QAAQ,EAAE;YACR,UAAU;QACZ,CAAC;QACD,iBAAiB,EAAE;YACjB,OAAO;gBACL,cAAc,EAAE,EAAE;aACnB,CAAC;QACJ,CAAC;QACD,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,KAAK;KAChB,CAAC,CAAC","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\~~n//~~ ~~eslint-disable-next-line @fluentui/no-context-default-value\nexport const TabListContext~~: ~~Context<~~TabListContextValue> = ~~createContext<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"]}
1	+ {"version":3,"file":"TabListContext.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;IAIA,IAAM,0BAA0B,GAAwB;QACtD,UAAU,EAAE,aAAa;QACzB,uBAAuB,EAAE,IAAI;QAC7B,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,SAAS;QACxB,UAAU,EAAE;YACV,UAAU;QACZ,CAAC;QACD,YAAY,EAAE;YACZ,UAAU;QACZ,CAAC;QACD,QAAQ,EAAE;YACR,UAAU;QACZ,CAAC;QACD,iBAAiB,EAAE;YACjB,OAAO;gBACL,cAAc,EAAE,EAAE;aACnB,CAAC;QACJ,CAAC;QACD,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,KAAK;KAChB,CAAC;IAEW,QAAA,cAAc,GAAiC,sCAAa,CACvE,SAAS,CACsB,CAAC;IAErB,QAAA,eAAe,GAAG,sBAAc,CAAC,QAAQ,CAAC;IAChD,IAAM,0BAA0B,GAAG,UAAI,QAAiD;QAC7F,OAAA,2CAAkB,CAAC,sBAAc,EAAE,UAAC,GAAgC;YAAhC,oBAAA,EAAA,gCAAgC;YAAK,OAAA,QAAQ,CAAC,GAAG,CAAC;QAAb,CAAa,CAAC;IAAvF,CAAuF,CAAC;IAD7E,QAAA,0BAA0B,8BACmD","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"]}

package/lib-amd/components/TabList/index.js CHANGED Viewed

@@ -1,10 +1,12 @@
-define(["require", "exports", "tslib", "./TabList", "./TabList.types", "./renderTabList", "./useTabList", "./useTabListStyles"], function (require, exports, tslib_1, TabList_1, TabList_types_1, renderTabList_1, useTabList_1, useTabListStyles_1) {
+define(["require", "exports", "tslib", "./TabList", "./TabList.types", "./TabListContext", "./renderTabList", "./useTabList", "./useTabListContextValues", "./useTabListStyles"], function (require, exports, tslib_1, TabList_1, TabList_types_1, TabListContext_1, renderTabList_1, useTabList_1, useTabListContextValues_1, useTabListStyles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     tslib_1.__exportStar(TabList_1, exports);
     tslib_1.__exportStar(TabList_types_1, exports);
+    tslib_1.__exportStar(TabListContext_1, exports);
     tslib_1.__exportStar(renderTabList_1, exports);
     tslib_1.__exportStar(useTabList_1, exports);
+    tslib_1.__exportStar(useTabListContextValues_1, exports);
     tslib_1.__exportStar(useTabListStyles_1, exports);
 });
 //# sourceMappingURL=index.js.map

package/lib-amd/components/TabList/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,+CAAgC;IAChC,4CAA6B;IAC7B,kDAAmC","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListStyles';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,gDAAiC;IACjC,+CAAgC;IAChC,4CAA6B;IAC7B,yDAA0C;IAC1C,kDAAmC","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './TabListContext';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListContextValues';\nexport * from './useTabListStyles';\n"]}

package/lib-amd/components/TabList/renderTabList.js CHANGED Viewed

@@ -8,7 +8,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./
     var renderTabList_unstable = function (state, contextValues) {
         var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
         return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
-            React.createElement(TabListContext_1.TabListContext.Provider, { value: contextValues.tabList }, state.root.children)));
+            React.createElement(TabListContext_1.TabListProvider, { value: contextValues.tabList }, state.root.children)));
     };
     exports.renderTabList_unstable = renderTabList_unstable;
 });

package/lib-amd/components/TabList/renderTabList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"renderTabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAmB,EAAE,aAAmC;QACvF,IAAA,KAAuB,0BAAQ,CAAe,KAAK,CAAC,EAAlD,KAAK,WAAA,EAAE,SAAS,eAAkC,CAAC;QAE3D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC~~,+BAAc~~,~~CAAC~~,~~QAAQ,~~IAAC,KAAK,EAAE,aAAa,CAAC,OAAO,IAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,~~CAA2B~~,~~CAC3F~~,CACd,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,sBAAsB,0BAQjC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { ~~TabListContext~~ } from './TabListContext';\n\n/*\n Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <~~TabListContext.Provider~~ value={contextValues.tabList}>{state.root.children}</~~TabListContext.Provider~~>\n </slots.root>\n );\n};\n"]}
1	+ {"version":3,"file":"renderTabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAmB,EAAE,aAAmC;QACvF,IAAA,KAAuB,0BAAQ,CAAe,KAAK,CAAC,EAAlD,KAAK,WAAA,EAAE,SAAS,eAAkC,CAAC;QAE3D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,gCAAe,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO,IAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAmB,CAC3E,CACd,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,sBAAsB,0BAQjC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/*\n Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n </slots.root>\n );\n};\n"]}

package/lib-amd/components/TabList/useTabListContextValues.js CHANGED Viewed

@@ -1,8 +1,8 @@
 define(["require", "exports"], function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useTabListContextValues = void 0;
-    function useTabListContextValues(state) {
+    exports.useTabListContextValues_unstable = void 0;
+    function useTabListContextValues_unstable(state) {
         var appearance = state.appearance, reserveSelectedTabSpace = state.reserveSelectedTabSpace, disabled = state.disabled, selectedKey = state.selectedValue, onRegister = state.onRegister, onUnregister = state.onUnregister, onSelect = state.onSelect, getRegisteredTabs = state.getRegisteredTabs, size = state.size, vertical = state.vertical;
         var tabList = {
             appearance: appearance,
@@ -18,6 +18,6 @@ define(["require", "exports"], function (require, exports) {
         };
         return { tabList: tabList };
     }
-    exports.useTabListContextValues = useTabListContextValues;
+    exports.useTabListContextValues_unstable = useTabListContextValues_unstable;
 });
 //# sourceMappingURL=useTabListContextValues.js.map

package/lib-amd/components/TabList/useTabListContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTabListContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":";;;;IAEA,SAAgB,~~uBAAuB~~,CAAC,KAAmB;~~QAEvD~~,IAAA,UAAU,GAUR,KAAK,WAVG,EACV,uBAAuB,GASrB,KAAK,wBATgB,EACvB,QAAQ,GAQN,KAAK,SARC,EACO,WAAW,GAOxB,KAAK,cAPmB,EAC1B,UAAU,GAMR,KAAK,WANG,EACV,YAAY,GAKV,KAAK,aALK,EACZ,QAAQ,GAIN,KAAK,SAJC,EACR,iBAAiB,GAGf,KAAK,kBAHU,EACjB,IAAI,GAEF,KAAK,KAFH,EACJ,QAAQ,GACN,KAAK,SADC,CACA;QAEV,IAAM,OAAO,GAAwB;YACnC,UAAU,YAAA;YACV,uBAAuB,yBAAA;YACvB,QAAQ,UAAA;YACR,aAAa,EAAE,WAAW;YAC1B,QAAQ,UAAA;YACR,UAAU,YAAA;YACV,YAAY,cAAA;YACZ,iBAAiB,mBAAA;YACjB,IAAI,MAAA;YACJ,QAAQ,UAAA;SACT,CAAC;QAEF,OAAO,EAAE,OAAO,SAAA,EAAE,CAAC;IACrB,CAAC;IA5BD,~~0DA4BC~~","sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function ~~useTabListContextValues~~(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"]}
1	+ {"version":3,"file":"useTabListContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":";;;;IAEA,SAAgB,gCAAgC,CAAC,KAAmB;QAEhE,IAAA,UAAU,GAUR,KAAK,WAVG,EACV,uBAAuB,GASrB,KAAK,wBATgB,EACvB,QAAQ,GAQN,KAAK,SARC,EACO,WAAW,GAOxB,KAAK,cAPmB,EAC1B,UAAU,GAMR,KAAK,WANG,EACV,YAAY,GAKV,KAAK,aALK,EACZ,QAAQ,GAIN,KAAK,SAJC,EACR,iBAAiB,GAGf,KAAK,kBAHU,EACjB,IAAI,GAEF,KAAK,KAFH,EACJ,QAAQ,GACN,KAAK,SADC,CACA;QAEV,IAAM,OAAO,GAAwB;YACnC,UAAU,YAAA;YACV,uBAAuB,yBAAA;YACvB,QAAQ,UAAA;YACR,aAAa,EAAE,WAAW;YAC1B,QAAQ,UAAA;YACR,UAAU,YAAA;YACV,YAAY,cAAA;YACZ,iBAAiB,mBAAA;YACjB,IAAI,MAAA;YACJ,QAAQ,UAAA;SACT,CAAC;QAEF,OAAO,EAAE,OAAO,SAAA,EAAE,CAAC;IACrB,CAAC;IA5BD,4EA4BC","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"]}

package/lib-amd/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 define(["require", "exports", "./Tab", "./TabList"], function (require, exports, Tab_1, TabList_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useTabList_unstable = exports.useTabListStyles_unstable = exports.tabListClassNames = exports.TabList = exports.renderTabList_unstable = exports.useTab_unstable = exports.useTabStyles_unstable = exports.tabClassNames = exports.Tab = exports.renderTab_unstable = void 0;
+    exports.useTabList_unstable = exports.useTabListStyles_unstable = exports.useTabListContextValues_unstable = exports.useTabListContext_unstable = exports.tabListClassNames = exports.TabListProvider = exports.TabList = exports.renderTabList_unstable = exports.useTab_unstable = exports.useTabStyles_unstable = exports.tabClassNames = exports.Tab = exports.renderTab_unstable = void 0;
     Object.defineProperty(exports, "renderTab_unstable", { enumerable: true, get: function () { return Tab_1.renderTab_unstable; } });
     Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_1.Tab; } });
     Object.defineProperty(exports, "tabClassNames", { enumerable: true, get: function () { return Tab_1.tabClassNames; } });
@@ -9,7 +9,10 @@ define(["require", "exports", "./Tab", "./TabList"], function (require, exports,
     Object.defineProperty(exports, "useTab_unstable", { enumerable: true, get: function () { return Tab_1.useTab_unstable; } });
     Object.defineProperty(exports, "renderTabList_unstable", { enumerable: true, get: function () { return TabList_1.renderTabList_unstable; } });
     Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return TabList_1.TabList; } });
+    Object.defineProperty(exports, "TabListProvider", { enumerable: true, get: function () { return TabList_1.TabListProvider; } });
     Object.defineProperty(exports, "tabListClassNames", { enumerable: true, get: function () { return TabList_1.tabListClassNames; } });
+    Object.defineProperty(exports, "useTabListContext_unstable", { enumerable: true, get: function () { return TabList_1.useTabListContext_unstable; } });
+    Object.defineProperty(exports, "useTabListContextValues_unstable", { enumerable: true, get: function () { return TabList_1.useTabListContextValues_unstable; } });
     Object.defineProperty(exports, "useTabListStyles_unstable", { enumerable: true, get: function () { return TabList_1.useTabListStyles_unstable; } });
     Object.defineProperty(exports, "useTabList_unstable", { enumerable: true, get: function () { return TabList_1.useTabList_unstable; } });
 });

package/lib-amd/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tabs/src/index.ts"],"names":[],"mappings":";;;;IACS,yGAAA,kBAAkB,OAAA;IAAE,0FAAA,GAAG,OAAA;IAAE,oGAAA,aAAa,OAAA;IAAE,4GAAA,qBAAqB,OAAA;IAAE,sGAAA,eAAe,OAAA;IAcrF,iHAAA,sBAAsB,OAAA;IACtB,kGAAA,OAAO,OAAA;IACP,4GAAA,iBAAiB,OAAA;IACjB,oHAAA,yBAAyB,OAAA;IACzB,8GAAA,mBAAmB,OAAA","sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n TabRegisterData,\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListProps,\n TabListSlots,\n TabListState,\n} from './TabList';\nexport {\n renderTabList_unstable,\n TabList,\n tabListClassNames,\n useTabListStyles_unstable,\n useTabList_unstable,\n} from './TabList';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tabs/src/index.ts"],"names":[],"mappings":";;;;IACS,yGAAA,kBAAkB,OAAA;IAAE,0FAAA,GAAG,OAAA;IAAE,oGAAA,aAAa,OAAA;IAAE,4GAAA,qBAAqB,OAAA;IAAE,sGAAA,eAAe,OAAA;IAcrF,iHAAA,sBAAsB,OAAA;IACtB,kGAAA,OAAO,OAAA;IACP,0GAAA,eAAe,OAAA;IACf,4GAAA,iBAAiB,OAAA;IACjB,qHAAA,0BAA0B,OAAA;IAC1B,2HAAA,gCAAgC,OAAA;IAChC,oHAAA,yBAAyB,OAAA;IACzB,8GAAA,mBAAmB,OAAA","sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n TabRegisterData,\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListProps,\n TabListSlots,\n TabListState,\n} from './TabList';\nexport {\n renderTabList_unstable,\n TabList,\n TabListProvider,\n tabListClassNames,\n useTabListContext_unstable,\n useTabListContextValues_unstable,\n useTabListStyles_unstable,\n useTabList_unstable,\n} from './TabList';\n"]}

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

@@ -7,7 +7,6 @@ exports.useTab_unstable = void 0;
 const React = /*#__PURE__*/require("react");
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 const TabListContext_1 = /*#__PURE__*/require("../TabList/TabListContext");
-const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
 /**
  * Create the state required to render Tab.
  *
@@ -24,15 +23,15 @@ const useTab_unstable = (props, ref) => {
     icon,
     value
   } = props;
-  const appearance = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, ctx => ctx.appearance);
-  const reserveSelectedTabSpace = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, ctx => ctx.reserveSelectedTabSpace);
-  const listDisabled = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, ctx => ctx.disabled);
-  const selected = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, ctx => ctx.selectedValue === value);
-  const onRegister = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, ctx => ctx.onRegister);
-  const onUnregister = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, ctx => ctx.onUnregister);
-  const onSelect = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, ctx => ctx.onSelect);
-  const size = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, ctx => ctx.size);
-  const vertical = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, ctx => !!ctx.vertical);
+  const appearance = TabListContext_1.useTabListContext_unstable(ctx => ctx.appearance);
+  const reserveSelectedTabSpace = TabListContext_1.useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);
+  const listDisabled = TabListContext_1.useTabListContext_unstable(ctx => ctx.disabled);
+  const selected = TabListContext_1.useTabListContext_unstable(ctx => ctx.selectedValue === value);
+  const onRegister = TabListContext_1.useTabListContext_unstable(ctx => ctx.onRegister);
+  const onUnregister = TabListContext_1.useTabListContext_unstable(ctx => ctx.onUnregister);
+  const onSelect = TabListContext_1.useTabListContext_unstable(ctx => ctx.onSelect);
+  const size = TabListContext_1.useTabListContext_unstable(ctx => ctx.size);
+  const vertical = TabListContext_1.useTabListContext_unstable(ctx => !!ctx.vertical);
   const disabled = listDisabled || tabDisabled;
   const innerRef = React.useRef(null);
   const onClick = react_utilities_1.useEventCallback(event => onSelect(event, {

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;~~AACA;~~AAGA;;;;;;;;;AASO,MAAMA,eAAe,GAAG,CAACC,KAAe,EAAEC,GAA2B,KAAc;EACxF,MAAM;IAAEC,OAAO;IAAEC,QAAQ,EAAEC,WAAW,GAAG,KAAK;IAAEC,IAAI;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAErE,MAAMO,UAAU,GAAGC,~~2CAAkB~~,CAACC~~,+BAAc~~,~~EAAEC,~~GAAG,IAAIA,GAAG,~~CAACH~~,UAAU,CAAC;~~EAC5E~~,~~MAAMI~~,uBAAuB,~~GAAGH~~,~~2CAAkB~~,CAACC~~,+BAAc~~,~~EAAEC,~~GAAG,IAAIA,GAAG,CAACC,uBAAuB,CAAC;~~EACtG~~,MAAMC,YAAY,~~GAAGJ~~,~~2CAAkB~~,CAACC~~,+BAAc~~,~~EAAEC,~~GAAG,IAAIA,GAAG,~~CAACP~~,QAAQ,CAAC;~~EAC5E~~,~~MAAMU~~,QAAQ,~~GAAGL~~,~~2CAAkB~~,CAACC~~,+BAAc~~,~~EAAEC,~~GAAG,IAAIA,GAAG,CAACI,aAAa,~~KAAKR~~,KAAK,CAAC;~~EACvF~~,~~MAAMS~~,UAAU,~~GAAGP~~,~~2CAAkB~~,CAACC~~,+BAAc~~,~~EAAEC,~~GAAG,IAAIA,GAAG,CAACK,UAAU,CAAC;~~EAC5E~~,MAAMC,YAAY,~~GAAGR~~,~~2CAAkB~~,CAACC~~,+BAAc~~,~~EAAEC,~~GAAG,IAAIA,GAAG,CAACM,YAAY,CAAC;~~EAChF~~,MAAMC,QAAQ,~~GAAGT~~,~~2CAAkB~~,CAACC~~,+BAAc~~,~~EAAEC,~~GAAG,IAAIA,GAAG,CAACO,QAAQ,CAAC;~~EACxE~~,MAAMC,IAAI,~~GAAGV~~,~~2CAAkB~~,CAACC~~,+BAAc~~,~~EAAEC,~~GAAG,IAAIA,GAAG,CAACQ,IAAI,CAAC;~~EAChE~~,MAAMC,QAAQ,~~GAAGX~~,~~2CAAkB~~,CAACC~~,+BAAc~~,~~EAAEC,~~GAAG,IAAI,CAAC,CAACA,GAAG,CAACS,QAAQ,CAAC;~~EAC1E~~,~~MAAMhB~~,QAAQ,~~GAAGS~~,YAAY,~~IAAIR~~,WAAW;EAE5C,~~MAAMgB~~,QAAQ,GAAGC,KAAK,CAACC,MAAM,CAAc,IAAI,CAAC;EAChD,MAAMC,OAAO,GAAGC,kCAAgB,CAAEC,KAAqB,IAAKR,QAAQ,CAACQ,KAAK,EAAE;~~IAAEnB~~;EAAK,CAAE,CAAC,CAAC;~~EAEvFe~~,KAAK,CAACK,SAAS,CAAC,MAAK;IACnBX,UAAU,CAAC;~~MACTT~~,KAAK;MACLL,GAAG,~~EAAEmB~~;KACN,CAAC;IAEF,OAAO,MAAK;MACVJ,YAAY,CAAC;~~QAAEV~~,KAAK;QAAEL,GAAG,~~EAAEmB~~;MAAQ,CAAE,CAAC;IACxC,CAAC;EACH,CAAC,EAAE,CAACL,UAAU,EAAEC,YAAY,EAAEI,QAAQ,~~EAAEd~~,KAAK,CAAC,CAAC;EAE/C,~~MAAMqB~~,aAAa,GAAGH,kCAAgB,~~CAACnB~~,IAAI,CAAC;EAC5C,~~MAAMuB~~,gBAAgB,GAAGJ,kCAAgB,~~CAACtB~~,OAAO,EAAE;~~IAAE2B~~,QAAQ,EAAE,IAAI;IAAEC,YAAY,EAAE;MAAEC,QAAQ,~~EAAE/B~~,KAAK,~~CAAC+B~~;IAAQ;EAAE,CAAE,CAAC;EAClH,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;~~MACd5B~~,IAAI,EAAE,MAAM;MACZH,OAAO,EAAE;KACV;~~IACD+B~~,IAAI,EAAET,uCAAqB,CAAC,QAAQ,EAAE;~~MACpCvB~~,GAAG,~~EAAEuB~~,+BAAa,~~CAACvB~~,GAAG,~~EAAEmB~~,QAAQ,CAAC;MACjCc,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE,QAAQ;MACd;MACA;MACA,eAAe,~~EAAEhC~~,QAAQ,~~GAAGiC~~,SAAS,GAAG,GAAGvB,QAAQ,EAAE;MACrD,~~GAAGb~~,KAAK;MACRG,QAAQ;~~MACRoB~~;KACD,CAAC;~~IACFlB~~,IAAI,~~EAAEsB~~,aAAa;IACnBU,QAAQ,EAAEC,OAAO,CAAC,cAAa,aAAbX,aAAa,uBAAbA,aAAa,CAAEI,QAAQ,KAAI,CAACH,gBAAgB,CAACG,QAAQ,CAAC;~~IACxE7B~~,OAAO,~~EAAE0B~~,gBAAgB;~~IACzBrB~~,UAAU;~~IACVgC~~,6BAA6B,EAAE5B,uBAAuB,GAAG,EAAE,GAAGyB,SAAS;~~IACvEjC~~,QAAQ;~~IACRU~~,QAAQ;IACRK,IAAI;~~IACJZ~~,KAAK;~~IACLa~~;GACD;AACH,CAAC;AA1DYqB,uBAAe","names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","value","appearance","~~react_context_selector_1","~~TabListContext_1","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onClick","react_utilities_1","event","useEffect","iconShorthand","contentShorthand","required","defaultProps","children","components","root","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { ~~TabListContext~~ } from '../TabList/TabListContext';\nimport { ~~useContextSelector } from '@fluentui/react-context-selector';\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, value } = props;\n\n const appearance = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.appearance);\n const reserveSelectedTabSpace = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.reserveSelectedTabSpace);\n const listDisabled = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.disabled);\n const selected = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.selectedValue === value);\n const onRegister = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.onRegister);\n const onUnregister = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.onUnregister);\n const onSelect = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.onSelect);\n const size = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.size);\n const vertical = ~~useContextSelector~~(~~TabListContext,~~ ctx => !!ctx.vertical);\n const disabled = listDisabled \|\| tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onClick = useEventCallback((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 iconShorthand = resolveShorthand(icon);\n const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n return {\n components: {\n root: 'button',\n icon: 'span',\n content: 'span',\n },\n root: getNativeElementProps('button', {\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,\n }),\n icon: iconShorthand,\n iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n content: contentShorthand,\n appearance,\n contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"]}
1	+ {"version":3,"mappings":"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","names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","value","appearance","TabListContext_1","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onClick","react_utilities_1","event","useEffect","iconShorthand","contentShorthand","required","defaultProps","children","components","root","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } 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, 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 onClick = useEventCallback((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 iconShorthand = resolveShorthand(icon);\n const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n return {\n components: {\n root: 'button',\n icon: 'span',\n content: 'span',\n },\n root: getNativeElementProps('button', {\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,\n }),\n icon: iconShorthand,\n iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n content: contentShorthand,\n appearance,\n contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"]}

package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js CHANGED Viewed

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTabAnimatedIndicatorStyles_unstable = void 0;
 const React = /*#__PURE__*/require("react");
 const react_1 = /*#__PURE__*/require("@griffel/react");
-const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
 const TabListContext_1 = /*#__PURE__*/require("../TabList/TabListContext");
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -81,7 +80,7 @@ const useTabAnimatedIndicatorStyles_unstable = state => {
     offset: 0,
     scale: 1
   });
-  const getRegisteredTabs = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, ctx => ctx.getRegisteredTabs);
+  const getRegisteredTabs = TabListContext_1.useTabListContext_unstable(ctx => ctx.getRegisteredTabs);
   React.useEffect(() => {
     if (lastAnimatedFrom) {
       setAnimationValues({

package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AAGA;AACA;~~AACA;~~AAEA;AAEA;AACA,MAAMA,4BAA4B,GAAG;EACnCC,SAAS,EAAE,8BAA8B;EACzCC,QAAQ,EAAE;CACX;AAED,MAAMC,wBAAwB,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAgCzC;AAEF,MAAMC,gBAAgB,GAAIC,OAAoB,IAAI;;EAChD,IAAIA,OAAO,EAAE;IACX,MAAMC,UAAU,GAAG,cAAO,CAACC,aAAa,0CAAEC,qBAAqB,EAAE,KAAI;MAAEC,CAAC,EAAE,CAAC;MAAEC,CAAC,EAAE,CAAC;MAAEC,KAAK,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAC,CAAE;IACxG,MAAMC,OAAO,GAAGR,OAAO,CAACG,qBAAqB,EAAE;IAE/C,OAAO;MACLC,CAAC,EAAEI,OAAO,CAACJ,CAAC,GAAGH,UAAU,CAACG,CAAC;MAC3BC,CAAC,EAAEG,OAAO,CAACH,CAAC,GAAGJ,UAAU,CAACI,CAAC;MAC3BC,KAAK,EAAEE,OAAO,CAACF,KAAK;MACpBC,MAAM,EAAEC,OAAO,CAACD;KACjB;;EAEH,OAAOE,SAAS;AAClB,CAAC;AAED,MAAMC,oBAAoB,GAAG,CAACC,cAA+C,EAAEC,KAAgB,KAAI;;EACjG,MAAMZ,OAAO,GACXY,KAAK,KAAKH,SAAS,IAAIG,KAAK,KAAK,IAAI,GAAG,oBAAc,CAACC,IAAI,CAACC,SAAS,CAACF,KAAK,CAAC,CAAC,0CAAEG,GAAG,CAACC,OAAO,GAAGP,SAAS;EACxG,OAAOT,OAAO,GAAGD,gBAAgB,CAACC,OAAO,CAAC,GAAGS,SAAS;AACxD,CAAC;AAED;;;AAGO,MAAMQ,sCAAsC,GAAIC,KAAe,IAAc;EAClF,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC;EAAQ,CAAE,GAAGH,KAAK;EAE9C,MAAMI,qBAAqB,GAAGzB,wBAAwB,EAAE;EACxD,MAAM,CAAC0B,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGC,KAAK,CAACC,QAAQ,EAAY;EAC1E,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAGH,KAAK,CAACC,QAAQ,CAAC;IAAEG,MAAM,EAAE,CAAC;IAAEC,KAAK,EAAE;EAAC,CAAE,CAAC;EACrF,MAAMC,iBAAiB,GAAGC,~~2CAAkB~~,CAACC~~,+BAAc~~,~~EAAEC,~~GAAG,IAAIA,GAAG,~~CAACH~~,iBAAiB,CAAC;~~EAE1FN~~,KAAK,~~CAACU~~,SAAS,CAAC,MAAK;IACnB,~~IAAIZ~~,gBAAgB,EAAE;MACpBK,kBAAkB,CAAC;QAAEC,MAAM,EAAE,CAAC;QAAEC,KAAK,EAAE;MAAC,CAAE,CAAC;;EAE/C,CAAC,EAAE,CAACP,gBAAgB,CAAC,CAAC;EAEtB,IAAIH,QAAQ,EAAE;IACZ,MAAM;~~MAAEgB~~,qBAAqB;MAAEC,aAAa;~~MAAE1B~~;IAAc,CAAE,GAAGoB,iBAAiB,EAAE;IACpF,~~MAAMO~~,uBAAuB,~~GAAG5B~~,oBAAoB,CAACC,cAAc,~~EAAEyB~~,qBAAqB,CAAC;IAC3F,MAAMG,eAAe,~~GAAG7B~~,oBAAoB,CAACC,cAAc,~~EAAE0B~~,aAAa,CAAC;IAE3E,IACEE,eAAe,IACfD,uBAAuB,IACvBF,qBAAqB,~~IACrBb~~,gBAAgB,~~KAAKa~~,qBAAqB,EAC1C;MACA,~~MAAMP~~,MAAM,GAAGR,QAAQ,~~GACnBiB~~,uBAAuB,~~CAACjC~~,CAAC,~~GAAGkC~~,eAAe,~~CAAClC~~,CAAC,~~GAC7CiC~~,uBAAuB,~~CAAClC~~,CAAC,~~GAAGmC~~,eAAe,~~CAACnC~~,CAAC;MAEjD,MAAM0B,KAAK,GAAGT,QAAQ,~~GAClBiB~~,uBAAuB,~~CAAC/B~~,MAAM,~~GAAGgC~~,eAAe,~~CAAChC~~,MAAM,~~GACvD+B~~,uBAAuB,~~CAAChC~~,KAAK,~~GAAGiC~~,eAAe,~~CAACjC~~,KAAK;MAEzDsB,kBAAkB,CAAC;QAAEC,MAAM;QAAEC;MAAK,CAAE,CAAC;MACrCN,mBAAmB,~~CAACY~~,qBAAqB,CAAC;;GAE7C,MAAM,~~IAAIb~~,gBAAgB,EAAE;IAC3B;IACA;IACAC,mBAAmB,CAACf,SAAS,CAAC;;EAGhC;EACA,IAAIU,QAAQ,EAAE;IACZ,OAAOD,KAAK;;EAGd;EACA;EACA,~~MAAMsB~~,SAAS,~~GAAGb~~,eAAe,CAACE,MAAM,KAAK,CAAC,IAAIF,eAAe,CAACG,KAAK,KAAK,CAAC;EAE7EZ,KAAK,~~CAACuB~~,IAAI,CAACC,SAAS,~~GAAG5C~~,oBAAY,CACjCoB,KAAK,~~CAACuB~~,IAAI,CAACC,SAAS,~~EACpBtB~~,QAAQ,IAAIE,qBAAqB,~~CAACqB~~,IAAI,~~EACtCvB~~,QAAQ,~~IAAIoB~~,SAAS,~~IAAIlB~~,qBAAqB,~~CAACsB~~,QAAQ,~~EACvDxB~~,QAAQ,KAAKC,QAAQ,GAAGC,qBAAqB,CAACD,QAAQ,GAAGC,qBAAqB,~~CAACuB~~,UAAU,CAAC,CAC3F;EAED,MAAMC,WAAW,GAAG;IAClB,~~CAACpD~~,4BAA4B,CAACC,SAAS,GAAG,GAAGgC,eAAe,CAACE,MAAM,IAAI;IACvE,CAACnC,4BAA4B,CAACE,QAAQ,GAAG,GAAG+B,eAAe,CAACG,KAAK;GAClE;EAEDZ,KAAK,~~CAACuB~~,IAAI,CAACM,KAAK,GAAG;IACjB,GAAGD,WAAW;IACd,~~GAAG5B~~,KAAK,~~CAACuB~~,IAAI,CAACM;GACf;EAED,~~OAAO7B~~,KAAK;AACd,CAAC;~~AArEY8B~~,8CAAsC","names":["tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","react_1","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","vertical","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","React","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","~~react_context_selector_1","~~TabListContext_1","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","base","animated","horizontal","rootCssVars","style","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { ~~useContextSelector~~ } from '~~@fluentui/react-context-selector';\nimport { TabListContext } from '~~../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n ...shorthands.overflow('visible'),\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms',\n },\n },\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n if (element) {\n const parentRect = element.parentElement?.getBoundingClientRect() \|\| { x: 0, y: 0, width: 0, height: 0 };\n const tabRect = element.getBoundingClientRect();\n\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height,\n };\n }\n return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n const element =\n value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n const { disabled, selected, vertical } = state;\n\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n const getRegisteredTabs = ~~useContextSelector~~(~~TabListContext,~~ ctx => ctx.getRegisteredTabs);\n\n React.useEffect(() => {\n if (lastAnimatedFrom) {\n setAnimationValues({ offset: 0, scale: 1 });\n }\n }, [lastAnimatedFrom]);\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (\n selectedTabRect &&\n previousSelectedTabRect &&\n previousSelectedValue &&\n lastAnimatedFrom !== previousSelectedValue\n ) {\n const offset = vertical\n ? previousSelectedTabRect.y - selectedTabRect.y\n : previousSelectedTabRect.x - selectedTabRect.x;\n\n const scale = vertical\n ? previousSelectedTabRect.height / selectedTabRect.height\n : previousSelectedTabRect.width / selectedTabRect.width;\n\n setAnimationValues({ offset, scale });\n setLastAnimatedFrom(previousSelectedValue);\n }\n } else if (lastAnimatedFrom) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n state.root.className = mergeClasses(\n state.root.className,\n selected && activeIndicatorStyles.base,\n selected && animating && activeIndicatorStyles.animated,\n selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n );\n\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n };\n\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"]}
1	+ {"version":3,"mappings":"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","names":["tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","react_1","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","vertical","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","React","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","TabListContext_1","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","base","animated","horizontal","rootCssVars","style","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n ...shorthands.overflow('visible'),\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms',\n },\n },\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n if (element) {\n const parentRect = element.parentElement?.getBoundingClientRect() \|\| { x: 0, y: 0, width: 0, height: 0 };\n const tabRect = element.getBoundingClientRect();\n\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height,\n };\n }\n return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n const element =\n value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n const { disabled, selected, vertical } = state;\n\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n React.useEffect(() => {\n if (lastAnimatedFrom) {\n setAnimationValues({ offset: 0, scale: 1 });\n }\n }, [lastAnimatedFrom]);\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (\n selectedTabRect &&\n previousSelectedTabRect &&\n previousSelectedValue &&\n lastAnimatedFrom !== previousSelectedValue\n ) {\n const offset = vertical\n ? previousSelectedTabRect.y - selectedTabRect.y\n : previousSelectedTabRect.x - selectedTabRect.x;\n\n const scale = vertical\n ? previousSelectedTabRect.height / selectedTabRect.height\n : previousSelectedTabRect.width / selectedTabRect.width;\n\n setAnimationValues({ offset, scale });\n setLastAnimatedFrom(previousSelectedValue);\n }\n } else if (lastAnimatedFrom) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n state.root.className = mergeClasses(\n state.root.className,\n selected && activeIndicatorStyles.base,\n selected && animating && activeIndicatorStyles.animated,\n selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n );\n\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n };\n\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"]}

package/lib-commonjs/components/TabList/TabList.js CHANGED Viewed

@@ -14,7 +14,7 @@ const useTabListContextValues_1 = /*#__PURE__*/require("./useTabListContextValue
  */
 exports.TabList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTabList_1.useTabList_unstable(props, ref);
-  const contextValues = useTabListContextValues_1.useTabListContextValues(state);
+  const contextValues = useTabListContextValues_1.useTabListContextValues_unstable(state);
   useTabListStyles_1.useTabListStyles_unstable(state);
   return renderTabList_1.renderTabList_unstable(state, contextValues);
 });

package/lib-commonjs/components/TabList/TabList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAGA;AAEA;;;AAGaA,eAAO,gBAAsCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGC,gCAAmB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAMG,aAAa,GAAGC,~~iDAAuB~~,CAACH,KAAK,CAAC;~~EAEpDI~~,4CAAyB,CAACJ,KAAK,CAAC;EAChC,OAAOK,sCAAsB,CAACL,KAAK,EAAEE,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFP,eAAO,CAACW,WAAW,GAAG,SAAS","names":["exports","React","forwardRef","props","ref","state","useTabList_1","contextValues","useTabListContextValues_1","useTabListStyles_1","renderTabList_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ~~useTabListContextValues~~ } from './useTabListContextValues';\n\n/*\n A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n const state = useTabList_unstable(props, ref);\n const contextValues = ~~useTabListContextValues~~(state);\n\n useTabListStyles_unstable(state);\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"]}
1	+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAGA;AAEA;;;AAGaA,eAAO,gBAAsCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGC,gCAAmB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAMG,aAAa,GAAGC,0DAAgC,CAACH,KAAK,CAAC;EAE7DI,4CAAyB,CAACJ,KAAK,CAAC;EAChC,OAAOK,sCAAsB,CAACL,KAAK,EAAEE,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFP,eAAO,CAACW,WAAW,GAAG,SAAS","names":["exports","React","forwardRef","props","ref","state","useTabList_1","contextValues","useTabListContextValues_1","useTabListStyles_1","renderTabList_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\n\n/*\n A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n const state = useTabList_unstable(props, ref);\n const contextValues = useTabListContextValues_unstable(state);\n\n useTabListStyles_unstable(state);\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"]}

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TabListContext = void 0;
+exports.useTabListContext_unstable = exports.TabListProvider = exports.TabListContext = void 0;
 const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
-// eslint-disable-next-line @fluentui/no-context-default-value
-exports.TabListContext = /*#__PURE__*/react_context_selector_1.createContext({
+const tabListContextDefaultValue = {
   appearance: 'transparent',
   reserveSelectedTabSpace: true,
   disabled: false,
@@ -27,5 +26,9 @@ exports.TabListContext = /*#__PURE__*/react_context_selector_1.createContext({
   },
   size: 'medium',
   vertical: false
-});
+};
+exports.TabListContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
+exports.TabListProvider = exports.TabListContext.Provider;
+const useTabListContext_unstable = selector => react_context_selector_1.useContextSelector(exports.TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));
+exports.useTabListContext_unstable = useTabListContext_unstable;
 //# sourceMappingURL=TabListContext.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AAIA~~;AACaA~~,~~sBAAc~~,~~gBAAiCC~~,~~sCAAa,CAAsB~~;~~EAC7FC~~,UAAU,EAAE,aAAa;EACzBC,uBAAuB,EAAE,IAAI;EAC7BC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAEC,SAAS;EACxBC,UAAU,EAAE,MAAK;IACf;EAAA,CACD;EACDC,YAAY,EAAE,MAAK;IACjB;EAAA,CACD;EACDC,QAAQ,EAAE,MAAK;IACb;EAAA,CACD;EACDC,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACLC,cAAc,EAAE;KACjB;EACH,CAAC;EACDC,IAAI,EAAE,QAAQ;EACdC,QAAQ,EAAE;CACX,CAAC","names":["~~exports~~","~~react_context_selector_1","~~appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\~~n//~~ ~~eslint-disable-next-line @fluentui/no-context-default-value\nexport const TabListContext~~: ~~Context<~~TabListContextValue> = ~~createContext<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"]}
1	+ {"version":3,"mappings":";;;;;;AAAA;AAIA,MAAMA,0BAA0B,GAAwB;EACtDC,UAAU,EAAE,aAAa;EACzBC,uBAAuB,EAAE,IAAI;EAC7BC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAEC,SAAS;EACxBC,UAAU,EAAE,MAAK;IACf;EAAA,CACD;EACDC,YAAY,EAAE,MAAK;IACjB;EAAA,CACD;EACDC,QAAQ,EAAE,MAAK;IACb;EAAA,CACD;EACDC,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACLC,cAAc,EAAE;KACjB;EACH,CAAC;EACDC,IAAI,EAAE,QAAQ;EACdC,QAAQ,EAAE;CACX;AAEYC,sBAAc,gBAAiCC,sCAAa,CACvET,SAAS,CACsB;AAEpBQ,uBAAe,GAAGA,sBAAc,CAACE,QAAQ;AAC/C,MAAMC,0BAA0B,GAAOC,QAAiD,IAC7FH,2CAAkB,CAACD,sBAAc,EAAE,CAACK,GAAG,GAAGlB,0BAA0B,KAAKiB,QAAQ,CAACC,GAAG,CAAC,CAAC;AAD5EL,kCAA0B","names":["tabListContextDefaultValue","appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","exports","react_context_selector_1","Provider","useTabListContext_unstable","selector","ctx"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/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"]}

package/lib-commonjs/components/TabList/index.js CHANGED Viewed

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 const tslib_1 = /*#__PURE__*/require("tslib");
 tslib_1.__exportStar(require("./TabList"), exports);
 tslib_1.__exportStar(require("./TabList.types"), exports);
+tslib_1.__exportStar(require("./TabListContext"), exports);
 tslib_1.__exportStar(require("./renderTabList"), exports);
 tslib_1.__exportStar(require("./useTabList"), exports);
+tslib_1.__exportStar(require("./useTabListContextValues"), exports);
 tslib_1.__exportStar(require("./useTabListStyles"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/TabList/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/index.ts"],"sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListStyles';\n"]}
1	+ {"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/index.ts"],"sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './TabListContext';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListContextValues';\nexport * from './useTabListStyles';\n"]}

package/lib-commonjs/components/TabList/renderTabList.js CHANGED Viewed

@@ -17,7 +17,7 @@ const renderTabList_unstable = (state, contextValues) => {
   } = react_utilities_1.getSlots(state);
   return React.createElement(slots.root, {
     ...slotProps.root
-  }, React.createElement(TabListContext_1.TabListContext.Provider, {
+  }, React.createElement(TabListContext_1.TabListProvider, {
     value: contextValues.tabList
   }, state.root.children));
 };

package/lib-commonjs/components/TabList/renderTabList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAEA;;;AAGO,MAAMA,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAeJ,KAAK,CAAC;EAE1D,OACEK,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACE~~,+BAAc~~,~~CAACC,QAAQ~~;IAACC,KAAK,~~EAAER~~,aAAa,~~CAACS~~;EAAO,~~GAAGV~~,KAAK,CAACM,IAAI,~~CAACK~~,QAAQ,~~CAA2B~~,~~CAC3F~~;AAEjB,CAAC;AARYC,8BAAsB","names":["renderTabList_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","root","TabListContext_1","~~Provider","~~value","tabList","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { ~~TabListContext~~ } from './TabListContext';\n\n/*\n Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <~~TabListContext.Provider~~ value={contextValues.tabList}>{state.root.children}</~~TabListContext.Provider~~>\n </slots.root>\n );\n};\n"]}
1	+ {"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAEA;;;AAGO,MAAMA,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAeJ,KAAK,CAAC;EAE1D,OACEK,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACE,gCAAe;IAACC,KAAK,EAAEP,aAAa,CAACQ;EAAO,GAAGT,KAAK,CAACM,IAAI,CAACI,QAAQ,CAAmB,CAC3E;AAEjB,CAAC;AARYC,8BAAsB","names":["renderTabList_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","root","TabListContext_1","value","tabList","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/*\n Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n </slots.root>\n );\n};\n"]}

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTabListContextValues = void 0;
-function useTabListContextValues(state) {
+exports.useTabListContextValues_unstable = void 0;
+function useTabListContextValues_unstable(state) {
   const {
     appearance,
     reserveSelectedTabSpace,
@@ -33,5 +33,5 @@ function useTabListContextValues(state) {
     tabList
   };
 }
-exports.useTabListContextValues = useTabListContextValues;
+exports.useTabListContextValues_unstable = useTabListContextValues_unstable;
 //# sourceMappingURL=useTabListContextValues.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAEA,SAAgBA,~~uBAAuB~~,CAACC,KAAmB;~~EACzD~~,MAAM;IACJC,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BC,UAAU;IACVC,YAAY;IACZC,QAAQ;IACRC,iBAAiB;IACjBC,IAAI;IACJC;EAAQ,CACT,GAAGX,KAAK;EAET,MAAMY,OAAO,GAAwB;IACnCX,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BG,QAAQ;IACRF,UAAU;IACVC,YAAY;IACZE,iBAAiB;IACjBC,IAAI;IACJC;GACD;EAED,OAAO;IAAEC;EAAO,CAAE;AACpB;AA5BAC","names":["~~useTabListContextValues~~","state","appearance","reserveSelectedTabSpace","disabled","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function ~~useTabListContextValues~~(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"]}
1	+ {"version":3,"mappings":";;;;;;AAEA,SAAgBA,gCAAgC,CAACC,KAAmB;EAClE,MAAM;IACJC,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BC,UAAU;IACVC,YAAY;IACZC,QAAQ;IACRC,iBAAiB;IACjBC,IAAI;IACJC;EAAQ,CACT,GAAGX,KAAK;EAET,MAAMY,OAAO,GAAwB;IACnCX,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BG,QAAQ;IACRF,UAAU;IACVC,YAAY;IACZE,iBAAiB;IACjBC,IAAI;IACJC;GACD;EAED,OAAO;IAAEC;EAAO,CAAE;AACpB;AA5BAC","names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/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"]}

package/lib-commonjs/index.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTabList_unstable = exports.useTabListStyles_unstable = exports.tabListClassNames = exports.TabList = exports.renderTabList_unstable = exports.useTab_unstable = exports.useTabStyles_unstable = exports.tabClassNames = exports.Tab = exports.renderTab_unstable = void 0;
+exports.useTabList_unstable = exports.useTabListStyles_unstable = exports.useTabListContextValues_unstable = exports.useTabListContext_unstable = exports.tabListClassNames = exports.TabListProvider = exports.TabList = exports.renderTabList_unstable = exports.useTab_unstable = exports.useTabStyles_unstable = exports.tabClassNames = exports.Tab = exports.renderTab_unstable = void 0;
 var Tab_1 = /*#__PURE__*/require("./Tab");
 Object.defineProperty(exports, "renderTab_unstable", {
   enumerable: true,
@@ -48,12 +48,30 @@ Object.defineProperty(exports, "TabList", {
     return TabList_1.TabList;
   }
 });
+Object.defineProperty(exports, "TabListProvider", {
+  enumerable: true,
+  get: function () {
+    return TabList_1.TabListProvider;
+  }
+});
 Object.defineProperty(exports, "tabListClassNames", {
   enumerable: true,
   get: function () {
     return TabList_1.tabListClassNames;
   }
 });
+Object.defineProperty(exports, "useTabListContext_unstable", {
+  enumerable: true,
+  get: function () {
+    return TabList_1.useTabListContext_unstable;
+  }
+});
+Object.defineProperty(exports, "useTabListContextValues_unstable", {
+  enumerable: true,
+  get: function () {
+    return TabList_1.useTabListContextValues_unstable;
+  }
+});
 Object.defineProperty(exports, "useTabListStyles_unstable", {
   enumerable: true,
   get: function () {

package/lib-commonjs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AACA;AAASA;EAAAC;EAAAC;IAAA,+BAAkB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gBAAG;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,0BAAa;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,kCAAqB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,4BAAe;EAAA;AAAA;AAavF;AACEF;EAAAC;EAAAC;IAAA,uCAAsB;EAAA;AAAA;AACtBF;EAAAC;EAAAC;IAAA,wBAAO;EAAA;AAAA;AACPF;EAAAC;EAAAC;IAAA,kCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,0CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,oCAAmB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n TabRegisterData,\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListProps,\n TabListSlots,\n TabListState,\n} from './TabList';\nexport {\n renderTabList_unstable,\n TabList,\n tabListClassNames,\n useTabListStyles_unstable,\n useTabList_unstable,\n} from './TabList';\n"]}
1	+ {"version":3,"mappings":";;;;;;AACA;AAASA;EAAAC;EAAAC;IAAA,+BAAkB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gBAAG;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,0BAAa;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,kCAAqB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,4BAAe;EAAA;AAAA;AAavF;AACEF;EAAAC;EAAAC;IAAA,uCAAsB;EAAA;AAAA;AACtBF;EAAAC;EAAAC;IAAA,wBAAO;EAAA;AAAA;AACPF;EAAAC;EAAAC;IAAA,gCAAe;EAAA;AAAA;AACfF;EAAAC;EAAAC;IAAA,kCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,2CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,iDAAgC;EAAA;AAAA;AAChCF;EAAAC;EAAAC;IAAA,0CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,oCAAmB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n TabRegisterData,\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListProps,\n TabListSlots,\n TabListState,\n} from './TabList';\nexport {\n renderTabList_unstable,\n TabList,\n TabListProvider,\n tabListClassNames,\n useTabListContext_unstable,\n useTabListContextValues_unstable,\n useTabListStyles_unstable,\n useTabList_unstable,\n} from './TabList';\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.1.8",
+  "version": "9.2.0",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,10 +31,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.5",
-    "@fluentui/react-tabster": "^9.4.0",
+    "@fluentui/react-context-selector": "^9.1.7",
+    "@fluentui/react-tabster": "^9.4.2",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.4.0",
+    "@fluentui/react-utilities": "^9.5.1",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },