@fluentui/react-tabs 9.1.4 → 9.1.5

package/CHANGELOG.json

@@ -2,7 +2,60 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Wed, 21 Dec 2022 10:17:16 GMT",
+      "date": "Wed, 04 Jan 2023 01:35:55 GMT",
+      "tag": "@fluentui/react-tabs_v9.1.5",
+      "version": "9.1.5",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
+            "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
+            "comment": "chore(scripts): move index.ts to  to follow sub-folder domain packaging"
+          }
+        ],
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.4",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.3.5",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.3.1",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 21 Dec 2022 10:20:33 GMT",
       "tag": "@fluentui/react-tabs_v9.1.4",
       "version": "9.1.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Wed, 21 Dec 2022 10:17:16 GMT and should not be manually modified.
+This log was last generated on Wed, 04 Jan 2023 01:35:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.1.5)
+
+Wed, 04 Jan 2023 01:35:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.1.4..@fluentui/react-tabs_v9.1.5)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+
 ## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.1.4)
 
-Wed, 21 Dec 2022 10:17:16 GMT 
+Wed, 21 Dec 2022 10:20:33 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.1.3..@fluentui/react-tabs_v9.1.4)
 
 ### Patches

package/lib/components/Tab/Tab.js

@@ -5,7 +5,6 @@ import { useTabStyles_unstable } from './useTabStyles';
 /**
  * A tab provides a selectable item in a tab list.
  */
-
 export const Tab = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTab_unstable(props, ref);
   useTabStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,UAAhC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,GAAG,gBAAkC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChF,MAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;EAEA,qBAAqB,CAAC,KAAD,CAArB;EACA,OAAO,kBAAkB,CAAC,KAAD,CAAzB;AACD,CALiD,CAA3C;AAOP,GAAG,CAAC,WAAJ,GAAkB,KAAlB","sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,QAAQ,UAAU;AAC1C,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,qBAAqB,QAAQ,gBAAgB;AAItD;;;AAGA,OAAO,MAAMC,GAAG,gBAAkCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChF,MAAMC,KAAK,GAAGP,eAAe,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEzCJ,qBAAqB,CAACK,KAAK,CAAC;EAC5B,OAAON,kBAAkB,CAACM,KAAK,CAAC;AAClC,CAAC,CAAC;AAEFJ,GAAG,CAACK,WAAW,GAAG,KAAK","names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","Tab","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/Tab.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"]}

package/lib/components/Tab/renderTab.js

@@ -3,16 +3,19 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Tab
  */
-
 export const renderTab_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
-  }), !state.iconOnly && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
-  }), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content,
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
+    ...slotProps.icon
+  }), !state.iconOnly && /*#__PURE__*/React.createElement(slots.content, {
+    ...slotProps.content
+  }), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/React.createElement(slots.content, {
+    ...slotProps.content,
     className: state.contentReservedSpaceClassName
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/Tab/renderTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;EACpD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAW,KAAX,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,CAAC,KAAK,CAAC,QAAP,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAFtB,EAGG,CAAC,KAAK,CAAC,QAAP,IAAmB,CAAC,KAAK,CAAC,QAA1B,IAAsC,KAAK,CAAC,6BAAN,KAAwC,SAA9E,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC,OAAf;IAAwB,SAAS,EAAE,KAAK,CAAC;EAAzC,CAAd,CAJJ,CADF;AASD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n  const { slots, slotProps } = getSlots<TabSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!state.iconOnly && <slots.content {...slotProps.content} />}\n      {!state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && (\n        <slots.content {...slotProps.content} className={state.contentReservedSpaceClassName} />\n      )}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,kBAAkB,GAAIC,KAAe,IAAI;EACpD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAWE,KAAK,CAAC;EAEtD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,IAAI,iBAAIP,oBAACI,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI,EAChD,CAACJ,KAAK,CAACK,QAAQ,iBAAIR,oBAACI,KAAK,CAACK,OAAO;IAAA,GAAKJ,SAAS,CAACI;EAAO,EAAI,EAC3D,CAACN,KAAK,CAACO,QAAQ,IAAI,CAACP,KAAK,CAACK,QAAQ,IAAIL,KAAK,CAACQ,6BAA6B,KAAKC,SAAS,iBACtFZ,oBAACI,KAAK,CAACK,OAAO;IAAA,GAAKJ,SAAS,CAACI,OAAO;IAAEI,SAAS,EAAEV,KAAK,CAACQ;EAA6B,EACrF,CACU;AAEjB,CAAC","names":["React","getSlots","renderTab_unstable","state","slots","slotProps","root","icon","iconOnly","content","selected","contentReservedSpaceClassName","undefined","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/renderTab.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n  const { slots, slotProps } = getSlots<TabSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!state.iconOnly && <slots.content {...slotProps.content} />}\n      {!state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && (\n        <slots.content {...slotProps.content} className={state.contentReservedSpaceClassName} />\n      )}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/Tab/useTab.js

@@ -11,7 +11,6 @@ import { useContextSelector } from '@fluentui/react-context-selector';
  * @param props - props from this instance of Tab
  * @param ref - reference to root HTMLElement of Tab
  */
-
 export const useTab_unstable = (props, ref) => {
   const {
     content,

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

@@ -1 +1 @@
-{"version":3,"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 { 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"],"sourceRoot":"../src/"}
+{"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"]}

package/lib/components/Tab/useTabAnimatedIndicator.js

@@ -2,45 +2,42 @@ 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 { tokens } from '@fluentui/react-theme'; // eslint-disable-next-line @typescript-eslint/naming-convention
-
+import { tokens } from '@fluentui/react-theme';
+// eslint-disable-next-line @typescript-eslint/naming-convention
 const tabIndicatorCssVars_unstable = {
   offsetVar: '--fui-Tab__indicator--offset',
   scaleVar: '--fui-Tab__indicator--scale'
 };
-
 const useActiveIndicatorStyles = /*#__PURE__*/__styles({
-  "base": {
-    "B68tc82": "f1mtd64y",
-    "Bmxbyg5": "f1y7q3j9"
+  base: {
+    B68tc82: "f1mtd64y",
+    Bmxbyg5: "f1y7q3j9"
   },
-  "animated": {
-    "Ba2ppi3": "fhwpy7i",
-    "F2fol1": "f6zz20j",
-    "B1dyfl9": "f1ai4sc1",
-    "B0vmy72": "f9qxlq5",
-    "u9bimw": "f1aql376"
+  animated: {
+    Ba2ppi3: "fhwpy7i",
+    F2fol1: "f6zz20j",
+    B1dyfl9: "f1ai4sc1",
+    B0vmy72: "f9qxlq5",
+    u9bimw: "f1aql376"
   },
-  "horizontal": {
-    "sjv3b2": ["fug4aj8", "f1i5xzg7"],
-    "b1kco5": "f1q7ujh"
+  horizontal: {
+    sjv3b2: ["fug4aj8", "f1i5xzg7"],
+    b1kco5: "f1q7ujh"
   },
-  "vertical": {
-    "sjv3b2": "f1hqboyk",
-    "b1kco5": "f1dxupa6"
+  vertical: {
+    sjv3b2: "f1hqboyk",
+    b1kco5: "f1dxupa6"
   }
 }, {
-  "d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fhwpy7i::after{transition-property:transform;}", ".f6zz20j::after{transition-duration:var(--durationSlow);}", ".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}", ".fug4aj8::after{transform-origin:left;}", ".f1i5xzg7::after{transform-origin:right;}", ".f1q7ujh::after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".f1hqboyk::after{transform-origin:top;}", ".f1dxupa6::after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
-  "m": [["@media (prefers-reduced-motion: reduce){.f9qxlq5::after{transition-property:none;}}", {
-    "m": "(prefers-reduced-motion: reduce)"
+  d: [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fhwpy7i::after{transition-property:transform;}", ".f6zz20j::after{transition-duration:var(--durationSlow);}", ".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}", ".fug4aj8::after{transform-origin:left;}", ".f1i5xzg7::after{transform-origin:right;}", ".f1q7ujh::after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".f1hqboyk::after{transform-origin:top;}", ".f1dxupa6::after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
+  m: [["@media (prefers-reduced-motion: reduce){.f9qxlq5::after{transition-property:none;}}", {
+    m: "(prefers-reduced-motion: reduce)"
   }], ["@media (prefers-reduced-motion: reduce){.f1aql376::after{transition-duration:0.01ms;}}", {
-    "m": "(prefers-reduced-motion: reduce)"
+    m: "(prefers-reduced-motion: reduce)"
   }]]
 });
-
 const calculateTabRect = element => {
   var _a;
-
   if (element) {
     const parentRect = ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
       x: 0,
@@ -56,21 +53,16 @@ const calculateTabRect = element => {
       height: tabRect.height
     };
   }
-
   return undefined;
 };
-
 const getRegisteredTabRect = (registeredTabs, value) => {
   var _a;
-
   const element = value !== undefined && value !== null ? (_a = registeredTabs[JSON.stringify(value)]) === null || _a === void 0 ? void 0 : _a.ref.current : undefined;
   return element ? calculateTabRect(element) : undefined;
 };
 /**
  * Adds additional styling to the active tab selection indicator to create a sliding animation.
  */
-
-
 export const useTabAnimatedIndicatorStyles_unstable = state => {
   const {
     disabled,
@@ -92,7 +84,6 @@ export const useTabAnimatedIndicatorStyles_unstable = state => {
       });
     }
   }, [lastAnimatedFrom]);
-
   if (selected) {
     const {
       previousSelectedValue,
@@ -101,7 +92,6 @@ export const useTabAnimatedIndicatorStyles_unstable = state => {
     } = getRegisteredTabs();
     const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
     const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
-
     if (selectedTabRect && previousSelectedTabRect && previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {
       const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;
       const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;
@@ -115,22 +105,21 @@ export const useTabAnimatedIndicatorStyles_unstable = state => {
     // need to clear the last animated from so that if this tab is selected again
     // from the same previous tab as last time, that animation still happens.
     setLastAnimatedFrom(undefined);
-  } // do not apply any animation if the tab is disabled
-
-
+  }
+  // do not apply any animation if the tab is disabled
   if (disabled) {
     return state;
-  } // the animation should only happen as the selection indicator returns to its
+  }
+  // the animation should only happen as the selection indicator returns to its
   // original position and not when set at the previous tabs position.
-
-
   const animating = animationValues.offset === 0 && animationValues.scale === 1;
   state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));
   const rootCssVars = {
     [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,
     [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`
   };
-  state.root.style = { ...rootCssVars,
+  state.root.style = {
+    ...rootCssVars,
     ...state.root.style
   };
   return state;

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

@@ -1 +1 @@
-{"version":3,"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 { 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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","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"]}