@fluentui/react-tabs 9.12.2 → 9.12.4
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.
- package/CHANGELOG.md +30 -2
- package/dist/index.d.cts +352 -0
- package/lib/Tab.js +1 -1
- package/lib/Tab.js.map +1 -1
- package/lib/TabList.js +1 -1
- package/lib/TabList.js.map +1 -1
- package/lib/components/Tab/Tab.js +5 -5
- package/lib/components/Tab/Tab.js.map +1 -1
- package/lib/components/Tab/index.js +5 -5
- package/lib/components/Tab/index.js.map +1 -1
- package/lib/components/Tab/renderTab.js +1 -1
- package/lib/components/Tab/useTab.js +4 -4
- package/lib/components/Tab/useTab.js.map +1 -1
- package/lib/components/Tab/useTabAnimatedIndicator.styles.js +5 -5
- package/lib/components/Tab/useTabAnimatedIndicator.styles.js.map +1 -1
- package/lib/components/Tab/useTabAnimatedIndicator.styles.raw.js +5 -5
- package/lib/components/Tab/useTabAnimatedIndicator.styles.raw.js.map +1 -1
- package/lib/components/Tab/useTabStyles.styles.js +5 -10
- package/lib/components/Tab/useTabStyles.styles.js.map +1 -1
- package/lib/components/Tab/useTabStyles.styles.raw.js +5 -8
- package/lib/components/Tab/useTabStyles.styles.raw.js.map +1 -1
- package/lib/components/TabList/TabList.js +6 -6
- package/lib/components/TabList/TabList.js.map +1 -1
- package/lib/components/TabList/TabListContext.js +1 -1
- package/lib/components/TabList/index.js +6 -6
- package/lib/components/TabList/index.js.map +1 -1
- package/lib/components/TabList/renderTabList.js +2 -2
- package/lib/components/TabList/renderTabList.js.map +1 -1
- package/lib/components/TabList/useTabList.js +3 -3
- package/lib/components/TabList/useTabListContextValues.js +1 -1
- package/lib/components/TabList/useTabListStyles.styles.js +2 -4
- package/lib/components/TabList/useTabListStyles.styles.js.map +1 -1
- package/lib/components/TabList/useTabListStyles.styles.raw.js +2 -3
- package/lib/components/TabList/useTabListStyles.styles.raw.js.map +1 -1
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib-commonjs/{Tab.js → Tab.cjs} +1 -1
- package/lib-commonjs/{Tab.js.map → Tab.cjs.map} +1 -1
- package/lib-commonjs/{TabList.js → TabList.cjs} +1 -1
- package/lib-commonjs/{TabList.js.map → TabList.cjs.map} +1 -1
- package/lib-commonjs/components/Tab/{Tab.js → Tab.cjs} +3 -3
- package/lib-commonjs/components/Tab/{Tab.js.map → Tab.cjs.map} +1 -1
- package/lib-commonjs/components/Tab/{index.js → index.cjs} +5 -5
- package/lib-commonjs/components/Tab/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Tab/{useTab.js → useTab.cjs} +11 -11
- package/lib-commonjs/components/Tab/{useTab.js.map → useTab.cjs.map} +1 -1
- package/lib-commonjs/components/Tab/{useTabAnimatedIndicator.styles.js → useTabAnimatedIndicator.styles.cjs} +1 -1
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.cjs.map +1 -0
- package/lib-commonjs/components/Tab/{useTabAnimatedIndicator.styles.raw.js → useTabAnimatedIndicator.styles.raw.cjs} +1 -1
- package/lib-commonjs/components/Tab/{useTabAnimatedIndicator.styles.raw.js.map → useTabAnimatedIndicator.styles.raw.cjs.map} +1 -1
- package/lib-commonjs/components/Tab/{useTabStyles.styles.js → useTabStyles.styles.cjs} +2 -4
- package/lib-commonjs/components/Tab/useTabStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/Tab/{useTabStyles.styles.raw.js → useTabStyles.styles.raw.cjs} +2 -5
- package/lib-commonjs/components/Tab/useTabStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/components/TabList/{TabList.js → TabList.cjs} +4 -4
- package/lib-commonjs/components/TabList/{TabList.js.map → TabList.cjs.map} +1 -1
- package/lib-commonjs/components/TabList/{index.js → index.cjs} +6 -6
- package/lib-commonjs/components/TabList/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/TabList/{renderTabList.js → renderTabList.cjs} +1 -1
- package/lib-commonjs/components/TabList/{renderTabList.js.map → renderTabList.cjs.map} +1 -1
- package/lib-commonjs/components/TabList/{useTabListStyles.styles.js → useTabListStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/TabList/useTabListStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/TabList/{useTabListStyles.styles.raw.js → useTabListStyles.styles.raw.cjs} +0 -1
- package/lib-commonjs/components/TabList/useTabListStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/{index.js → index.cjs} +2 -2
- package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
- package/package.json +19 -13
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.js.map +0 -1
- package/lib-commonjs/components/Tab/useTabStyles.styles.js.map +0 -1
- package/lib-commonjs/components/Tab/useTabStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/TabList/useTabListStyles.styles.js.map +0 -1
- package/lib-commonjs/components/TabList/useTabListStyles.styles.raw.js.map +0 -1
- /package/lib-commonjs/components/Tab/{Tab.types.js → Tab.types.cjs} +0 -0
- /package/lib-commonjs/components/Tab/{Tab.types.js.map → Tab.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Tab/{renderTab.js → renderTab.cjs} +0 -0
- /package/lib-commonjs/components/Tab/{renderTab.js.map → renderTab.cjs.map} +0 -0
- /package/lib-commonjs/components/TabList/{TabList.types.js → TabList.types.cjs} +0 -0
- /package/lib-commonjs/components/TabList/{TabList.types.js.map → TabList.types.cjs.map} +0 -0
- /package/lib-commonjs/components/TabList/{TabListContext.js → TabListContext.cjs} +0 -0
- /package/lib-commonjs/components/TabList/{TabListContext.js.map → TabListContext.cjs.map} +0 -0
- /package/lib-commonjs/components/TabList/{useTabList.js → useTabList.cjs} +0 -0
- /package/lib-commonjs/components/TabList/{useTabList.js.map → useTabList.cjs.map} +0 -0
- /package/lib-commonjs/components/TabList/{useTabListContextValues.js → useTabListContextValues.cjs} +0 -0
- /package/lib-commonjs/components/TabList/{useTabListContextValues.js.map → useTabListContextValues.cjs.map} +0 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { useTabList_unstable } from
|
|
4
|
-
import { renderTabList_unstable } from
|
|
5
|
-
import { useTabListStyles_unstable } from
|
|
6
|
-
import { useTabListContextValues_unstable } from
|
|
7
|
-
import { useCustomStyleHook_unstable } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useTabList_unstable } from "./useTabList.js";
|
|
4
|
+
import { renderTabList_unstable } from "./renderTabList.js";
|
|
5
|
+
import { useTabListStyles_unstable } from "./useTabListStyles.styles.js";
|
|
6
|
+
import { useTabListContextValues_unstable } from "./useTabListContextValues.js";
|
|
7
|
+
import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
|
|
8
8
|
/**
|
|
9
9
|
* A tab list provides single selection from a set of tabs.
|
|
10
10
|
*/ export const TabList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TabList/TabList.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles.styles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCustomStyleHook_unstable('useTabListStyles_unstable')(state);\n\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","useCustomStyleHook_unstable","TabList","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/TabList/TabList.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles.styles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCustomStyleHook_unstable('useTabListStyles_unstable')(state);\n\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","useCustomStyleHook_unstable","TabList","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,kBAAe;AACnD,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,yBAAyB,QAAQ,+BAA4B;AAGtE,SAASC,gCAAgC,QAAQ,+BAA4B;AAC7E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,iCAAiCM;IAEvDP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { createContext, useContextSelector } from
|
|
2
|
+
import { createContext, useContextSelector } from "@fluentui/react-context-selector";
|
|
3
3
|
const tabListContextDefaultValue = {
|
|
4
4
|
appearance: 'transparent',
|
|
5
5
|
reserveSelectedTabSpace: true,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { TabList } from
|
|
2
|
-
export { TabListContext, TabListProvider, useTabListContext_unstable } from
|
|
3
|
-
export { renderTabList_unstable } from
|
|
4
|
-
export { useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable } from
|
|
5
|
-
export { useTabListContextValues_unstable } from
|
|
6
|
-
export { tabListClassNames, useTabListStyles_unstable } from
|
|
1
|
+
export { TabList } from "./TabList.js";
|
|
2
|
+
export { TabListContext, TabListProvider, useTabListContext_unstable } from "./TabListContext.js";
|
|
3
|
+
export { renderTabList_unstable } from "./renderTabList.js";
|
|
4
|
+
export { useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable } from "./useTabList.js";
|
|
5
|
+
export { useTabListContextValues_unstable } from "./useTabListContextValues.js";
|
|
6
|
+
export { tabListClassNames, useTabListStyles_unstable } from "./useTabListStyles.styles.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TabList/index.ts"],"sourcesContent":["export { TabList } from './TabList';\nexport type {\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListBaseProps,\n TabListProps,\n TabListSlots,\n TabListBaseState,\n TabListState,\n TabRegisterData,\n} from './TabList.types';\nexport { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';\nexport { renderTabList_unstable } from './renderTabList';\nexport { useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable } from './useTabList';\nexport { useTabListContextValues_unstable } from './useTabListContextValues';\nexport { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';\n"],"names":["TabList","TabListContext","TabListProvider","useTabListContext_unstable","renderTabList_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable","useTabListContextValues_unstable","tabListClassNames","useTabListStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/TabList/index.ts"],"sourcesContent":["export { TabList } from './TabList';\nexport type {\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListBaseProps,\n TabListProps,\n TabListSlots,\n TabListBaseState,\n TabListState,\n TabRegisterData,\n} from './TabList.types';\nexport { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';\nexport { renderTabList_unstable } from './renderTabList';\nexport { useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable } from './useTabList';\nexport { useTabListContextValues_unstable } from './useTabListContextValues';\nexport { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';\n"],"names":["TabList","TabListContext","TabListProvider","useTabListContext_unstable","renderTabList_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable","useTabListContextValues_unstable","tabListClassNames","useTabListStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAY;AAepC,SAASC,cAAc,EAAEC,eAAe,EAAEC,0BAA0B,QAAQ,sBAAmB;AAC/F,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,EAAEC,+BAA+B,QAAQ,kBAAe;AAC7G,SAASC,gCAAgC,QAAQ,+BAA4B;AAC7E,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,+BAA4B"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
-
import { assertSlots } from
|
|
3
|
-
import { TabListProvider } from
|
|
2
|
+
import { assertSlots } from "@fluentui/react-utilities";
|
|
3
|
+
import { TabListProvider } from "./TabListContext.js";
|
|
4
4
|
/**
|
|
5
5
|
* Render the final JSX of TabList
|
|
6
6
|
*/ export const renderTabList_unstable = (state, contextValues)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TabList/renderTabList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabListBaseState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListBaseState, contextValues: TabListContextValues): JSXElement => {\n assertSlots<TabListSlots>(state);\n\n return (\n <state.root>\n <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","TabListProvider","renderTabList_unstable","state","contextValues","root","value","tabList","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,eAAe,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/TabList/renderTabList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabListBaseState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListBaseState, contextValues: TabListContextValues): JSXElement => {\n assertSlots<TabListSlots>(state);\n\n return (\n <state.root>\n <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","TabListProvider","renderTabList_unstable","state","contextValues","root","value","tabList","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,eAAe,QAAQ,sBAAmB;AAEnD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAyBC;IAC9DJ,YAA0BG;IAE1B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACJ;YAAgBK,OAAOF,cAAcG,OAAO;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAGzE,EAAE"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { useArrowNavigationGroup } from
|
|
4
|
-
import { useControllableState, useEventCallback, useMergedRefs, slot } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useArrowNavigationGroup } from "@fluentui/react-tabster";
|
|
4
|
+
import { useControllableState, useEventCallback, useMergedRefs, slot } from "@fluentui/react-utilities";
|
|
5
5
|
/**
|
|
6
6
|
* Create the state required to render TabList.
|
|
7
7
|
*
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
2
|
+
import * as React from "react";
|
|
3
3
|
export function useTabListContextValues_unstable(state) {
|
|
4
4
|
const { appearance, reserveSelectedTabSpace, disabled, selectTabOnFocus, selectedValue: selectedKey, onRegister, onUnregister, onSelect, getRegisteredTabs, size, vertical } = state;
|
|
5
5
|
const tabList = React.useMemo(()=>({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { __styles, mergeClasses } from
|
|
4
|
-
import { tokens } from
|
|
3
|
+
import { __styles, mergeClasses } from "@griffel/react";
|
|
4
|
+
import { tokens } from "@fluentui/react-theme";
|
|
5
5
|
export const tabListClassNames = {
|
|
6
6
|
root: 'fui-TabList'
|
|
7
7
|
};
|
|
@@ -45,8 +45,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
45
45
|
* Apply styling to the TabList slots based on the state
|
|
46
46
|
*/
|
|
47
47
|
export const useTabListStyles_unstable = state => {
|
|
48
|
-
'use no memo';
|
|
49
|
-
|
|
50
48
|
const {
|
|
51
49
|
appearance,
|
|
52
50
|
vertical,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","tabListClassNames","root","useStyles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","roundedSmall","i8kkvl","Belr9w4","rmohyg","rounded","d","p","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"sources":["useTabListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","tabListClassNames","root","useStyles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","roundedSmall","i8kkvl","Belr9w4","rmohyg","rounded","d","p","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"sources":["useTabListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const tabListClassNames = {\n root: 'fui-TabList'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'nowrap',\n position: 'relative'\n },\n horizontal: {\n alignItems: 'stretch',\n flexDirection: 'row'\n },\n vertical: {\n alignItems: 'stretch',\n flexDirection: 'column'\n },\n roundedSmall: {\n gap: tokens.spacingHorizontalSNudge\n },\n rounded: {\n gap: tokens.spacingHorizontalS\n }\n});\n/**\n * Apply styling to the TabList slots based on the state\n */ export const useTabListStyles_unstable = (state)=>{\n const { appearance, vertical, size } = state;\n const styles = useStyles();\n const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded), state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;IAAAL,OAAA;EAAA;EAAAM,QAAA;IAAAD,OAAA;IAAAL,OAAA;EAAA;EAAAO,YAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAH,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAM;IAAEC,UAAU;IAAEV,QAAQ;IAAEW;EAAK,CAAC,GAAGF,KAAK;EAC5C,MAAMG,MAAM,GAAGpB,SAAS,CAAC,CAAC;EAC1B,MAAMqB,SAAS,GAAGH,UAAU,KAAK,iBAAiB,IAAIA,UAAU,KAAK,iBAAiB;EACtF;EACAD,KAAK,CAAClB,IAAI,CAACuB,SAAS,GAAG1B,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEqB,MAAM,CAACrB,IAAI,EAAES,QAAQ,GAAGY,MAAM,CAACZ,QAAQ,GAAGY,MAAM,CAACd,UAAU,EAAEe,SAAS,KAAKF,IAAI,KAAK,OAAO,GAAGC,MAAM,CAACX,YAAY,GAAGW,MAAM,CAACP,OAAO,CAAC,EAAEI,KAAK,CAAClB,IAAI,CAACuB,SAAS,CAAC;EACtN,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { makeStyles, mergeClasses } from
|
|
3
|
-
import { tokens } from
|
|
2
|
+
import { makeStyles, mergeClasses } from "@griffel/react";
|
|
3
|
+
import { tokens } from "@fluentui/react-theme";
|
|
4
4
|
export const tabListClassNames = {
|
|
5
5
|
root: 'fui-TabList'
|
|
6
6
|
};
|
|
@@ -32,7 +32,6 @@ export const tabListClassNames = {
|
|
|
32
32
|
/**
|
|
33
33
|
* Apply styling to the TabList slots based on the state
|
|
34
34
|
*/ export const useTabListStyles_unstable = (state)=>{
|
|
35
|
-
'use no memo';
|
|
36
35
|
const { appearance, vertical, size } = state;
|
|
37
36
|
const styles = useStyles();
|
|
38
37
|
const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TabList/useTabListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'nowrap',\n position: 'relative',\n },\n horizontal: {\n alignItems: 'stretch',\n flexDirection: 'row',\n },\n vertical: {\n alignItems: 'stretch',\n flexDirection: 'column',\n },\n roundedSmall: {\n gap: tokens.spacingHorizontalSNudge,\n },\n rounded: {\n gap: tokens.spacingHorizontalS,\n },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/TabList/useTabListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'nowrap',\n position: 'relative',\n },\n horizontal: {\n alignItems: 'stretch',\n flexDirection: 'row',\n },\n vertical: {\n alignItems: 'stretch',\n flexDirection: 'column',\n },\n roundedSmall: {\n gap: tokens.spacingHorizontalSNudge,\n },\n rounded: {\n gap: tokens.spacingHorizontalS,\n },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n const { appearance, vertical, size } = state;\n\n const styles = useStyles();\n\n const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n tabListClassNames.root,\n styles.root,\n vertical ? styles.vertical : styles.horizontal,\n isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded),\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tabListClassNames","root","useStyles","display","flexDirection","flexShrink","flexWrap","position","horizontal","alignItems","vertical","roundedSmall","gap","spacingHorizontalSNudge","rounded","spacingHorizontalS","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,UAAU;QACVC,UAAU;IACZ;IACAC,YAAY;QACVC,YAAY;QACZL,eAAe;IACjB;IACAM,UAAU;QACRD,YAAY;QACZL,eAAe;IACjB;IACAO,cAAc;QACZC,KAAKb,OAAOc,uBAAuB;IACrC;IACAC,SAAS;QACPF,KAAKb,OAAOgB,kBAAkB;IAChC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC,MAAM,EAAEC,UAAU,EAAER,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAEvC,MAAMG,SAASlB;IAEf,MAAMmB,YAAYH,eAAe,qBAAqBA,eAAe;IAErE,oDAAoD;IACpDD,MAAMhB,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,kBAAkBC,IAAI,EACtBmB,OAAOnB,IAAI,EACXS,WAAWU,OAAOV,QAAQ,GAAGU,OAAOZ,UAAU,EAC9Ca,aAAcF,CAAAA,SAAS,UAAUC,OAAOT,YAAY,GAAGS,OAAON,OAAO,AAAD,GACpEG,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
package/lib/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { renderTab_unstable, Tab, tabClassNames, tabReservedSpaceClassNames, useTabAnimatedIndicatorStyles_unstable, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, useTabStyles_unstable, useTab_unstable, useTabBase_unstable } from
|
|
2
|
-
export { renderTabList_unstable, TabList, TabListProvider, tabListClassNames, useTabListContext_unstable, useTabListContextValues_unstable, useTabListStyles_unstable, useTabList_unstable, useTabListA11yBehavior_unstable, useTabListBase_unstable } from
|
|
1
|
+
export { renderTab_unstable, Tab, tabClassNames, tabReservedSpaceClassNames, useTabAnimatedIndicatorStyles_unstable, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, useTabStyles_unstable, useTab_unstable, useTabBase_unstable } from "./Tab.js";
|
|
2
|
+
export { renderTabList_unstable, TabList, TabListProvider, tabListClassNames, useTabListContext_unstable, useTabListContextValues_unstable, useTabListStyles_unstable, useTabList_unstable, useTabListA11yBehavior_unstable, useTabListBase_unstable } from "./TabList.js";
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue, TabBaseProps, TabBaseState } from './Tab';\nexport {\n renderTab_unstable,\n Tab,\n tabClassNames,\n tabReservedSpaceClassNames,\n useTabAnimatedIndicatorStyles_unstable,\n useTabButtonStyles_unstable,\n useTabContentStyles_unstable,\n useTabIndicatorStyles_unstable,\n useTabStyles_unstable,\n useTab_unstable,\n useTabBase_unstable,\n} 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 TabListBaseProps,\n TabListBaseState,\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 useTabListA11yBehavior_unstable,\n useTabListBase_unstable,\n} from './TabList';\n"],"names":["renderTab_unstable","Tab","tabClassNames","tabReservedSpaceClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable","useTabBase_unstable","renderTabList_unstable","TabList","TabListProvider","tabListClassNames","useTabListContext_unstable","useTabListContextValues_unstable","useTabListStyles_unstable","useTabList_unstable","useTabListA11yBehavior_unstable","useTabListBase_unstable"],"mappings":"AACA,SACEA,kBAAkB,EAClBC,GAAG,EACHC,aAAa,EACbC,0BAA0B,EAC1BC,sCAAsC,EACtCC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,EACrBC,eAAe,EACfC,mBAAmB,QACd,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue, TabBaseProps, TabBaseState } from './Tab';\nexport {\n renderTab_unstable,\n Tab,\n tabClassNames,\n tabReservedSpaceClassNames,\n useTabAnimatedIndicatorStyles_unstable,\n useTabButtonStyles_unstable,\n useTabContentStyles_unstable,\n useTabIndicatorStyles_unstable,\n useTabStyles_unstable,\n useTab_unstable,\n useTabBase_unstable,\n} 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 TabListBaseProps,\n TabListBaseState,\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 useTabListA11yBehavior_unstable,\n useTabListBase_unstable,\n} from './TabList';\n"],"names":["renderTab_unstable","Tab","tabClassNames","tabReservedSpaceClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable","useTabBase_unstable","renderTabList_unstable","TabList","TabListProvider","tabListClassNames","useTabListContext_unstable","useTabListContextValues_unstable","useTabListStyles_unstable","useTabList_unstable","useTabListA11yBehavior_unstable","useTabListBase_unstable"],"mappings":"AACA,SACEA,kBAAkB,EAClBC,GAAG,EACHC,aAAa,EACbC,0BAA0B,EAC1BC,sCAAsC,EACtCC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,EACrBC,eAAe,EACfC,mBAAmB,QACd,WAAQ;AAef,SACEC,sBAAsB,EACtBC,OAAO,EACPC,eAAe,EACfC,iBAAiB,EACjBC,0BAA0B,EAC1BC,gCAAgC,EAChCC,yBAAyB,EACzBC,mBAAmB,EACnBC,+BAA+B,EAC/BC,uBAAuB,QAClB,eAAY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Tab.ts"],"sourcesContent":["export type {\n TabInternalSlots,\n TabBaseProps,\n TabProps,\n TabSlots,\n TabBaseState,\n TabState,\n TabValue,\n} from './components/Tab/index';\nexport {\n Tab,\n renderTab_unstable,\n tabClassNames,\n tabReservedSpaceClassNames,\n useTabAnimatedIndicatorStyles_unstable,\n useTabButtonStyles_unstable,\n useTabContentStyles_unstable,\n useTabIndicatorStyles_unstable,\n useTabStyles_unstable,\n useTab_unstable,\n useTabBase_unstable,\n} from './components/Tab/index';\n"],"names":["Tab","renderTab_unstable","tabClassNames","tabReservedSpaceClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable","useTabBase_unstable"],"mappings":";;;;;;;;;;;IAUEA;yBAAG;;;eACHC,yBAAkB;;;eAClBC,oBAAa;;;eACbC,iCAA0B;;;eAC1BC,6CAAsC;;uBAMnB;eAAnBM;;;eALAL,kCAA2B;;;eAC3BC,mCAA4B;;kCACE;eAA9BC;;;eACAC,4BAAqB;;;eACrBC,sBAAe;;;uBAEV,
|
|
1
|
+
{"version":3,"sources":["../src/Tab.ts"],"sourcesContent":["export type {\n TabInternalSlots,\n TabBaseProps,\n TabProps,\n TabSlots,\n TabBaseState,\n TabState,\n TabValue,\n} from './components/Tab/index';\nexport {\n Tab,\n renderTab_unstable,\n tabClassNames,\n tabReservedSpaceClassNames,\n useTabAnimatedIndicatorStyles_unstable,\n useTabButtonStyles_unstable,\n useTabContentStyles_unstable,\n useTabIndicatorStyles_unstable,\n useTabStyles_unstable,\n useTab_unstable,\n useTabBase_unstable,\n} from './components/Tab/index';\n"],"names":["Tab","renderTab_unstable","tabClassNames","tabReservedSpaceClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable","useTabBase_unstable"],"mappings":";;;;;;;;;;;IAUEA;yBAAG;;;eACHC,yBAAkB;;;eAClBC,oBAAa;;;eACbC,iCAA0B;;;eAC1BC,6CAAsC;;uBAMnB;eAAnBM;;;eALAL,kCAA2B;;;eAC3BC,mCAA4B;;kCACE;eAA9BC;;;eACAC,4BAAqB;;;eACrBC,sBAAe;;;uBAEV,4BAAyB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/TabList.ts"],"sourcesContent":["export type {\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListBaseProps,\n TabListProps,\n TabListSlots,\n TabListBaseState,\n TabListState,\n TabRegisterData,\n} from './components/TabList/index';\nexport {\n TabList,\n TabListContext,\n TabListProvider,\n renderTabList_unstable,\n tabListClassNames,\n useTabListContextValues_unstable,\n useTabListContext_unstable,\n useTabListStyles_unstable,\n useTabList_unstable,\n useTabListBase_unstable,\n useTabListA11yBehavior_unstable,\n} from './components/TabList/index';\n"],"names":["TabList","TabListContext","TabListProvider","renderTabList_unstable","tabListClassNames","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable"],"mappings":";;;;;;;;;;;IAeEA;6BAAO;;;eACPC,qBAAc;;;eACdC,sBAAe;;;eACfC,6BAAsB;;;eACtBC,wBAAiB;;;eAMjBM,sCAA+B;;2BADR;eAAvBD;;;eAJAJ,uCAAgC;;8BACN;eAA1BC;;;eACAC,gCAAyB;;;eACzBC,0BAAmB;;;uBAGd,
|
|
1
|
+
{"version":3,"sources":["../src/TabList.ts"],"sourcesContent":["export type {\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListBaseProps,\n TabListProps,\n TabListSlots,\n TabListBaseState,\n TabListState,\n TabRegisterData,\n} from './components/TabList/index';\nexport {\n TabList,\n TabListContext,\n TabListProvider,\n renderTabList_unstable,\n tabListClassNames,\n useTabListContextValues_unstable,\n useTabListContext_unstable,\n useTabListStyles_unstable,\n useTabList_unstable,\n useTabListBase_unstable,\n useTabListA11yBehavior_unstable,\n} from './components/TabList/index';\n"],"names":["TabList","TabListContext","TabListProvider","renderTabList_unstable","tabListClassNames","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable"],"mappings":";;;;;;;;;;;IAeEA;6BAAO;;;eACPC,qBAAc;;;eACdC,sBAAe;;;eACfC,6BAAsB;;;eACtBC,wBAAiB;;;eAMjBM,sCAA+B;;2BADR;eAAvBD;;;eAJAJ,uCAAgC;;8BACN;eAA1BC;;;eACAC,gCAAyB;;;eACzBC,0BAAmB;;;uBAGd,gCAA6B"}
|
|
@@ -11,9 +11,9 @@ Object.defineProperty(exports, "Tab", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useTab = require("./useTab");
|
|
15
|
-
const _renderTab = require("./renderTab");
|
|
16
|
-
const _useTabStylesstyles = require("./useTabStyles.styles");
|
|
14
|
+
const _useTab = require("./useTab.cjs");
|
|
15
|
+
const _renderTab = require("./renderTab.cjs");
|
|
16
|
+
const _useTabStylesstyles = require("./useTabStyles.styles.cjs");
|
|
17
17
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
18
18
|
const Tab = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
19
19
|
const state = (0, _useTab.useTab_unstable)(props, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;wBACC,
|
|
1
|
+
{"version":3,"sources":["../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;wBACC,cAAW;2BACR,iBAAc;oCACX,2BAAwB;qCAGlB,kCAAkC;AAKvE,MAAMK,MAAAA,WAAAA,GAAqCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,YAAQR,uBAAAA,EAAgBM,OAAOC;QAErCL,yCAAAA,EAAsBM;QAEtBL,gDAAAA,EAA4B,yBAAyBK;IAErD,WAAOP,6BAAAA,EAAmBO;AAC5B,GAAG;AAEHJ,IAAIK,WAAW,GAAG"}
|
|
@@ -46,8 +46,8 @@ _export(exports, {
|
|
|
46
46
|
return _useTab.useTab_unstable;
|
|
47
47
|
}
|
|
48
48
|
});
|
|
49
|
-
const _Tab = require("./Tab");
|
|
50
|
-
const _renderTab = require("./renderTab");
|
|
51
|
-
const _useTab = require("./useTab");
|
|
52
|
-
const _useTabStylesstyles = require("./useTabStyles.styles");
|
|
53
|
-
const _useTabAnimatedIndicatorstyles = require("./useTabAnimatedIndicator.styles");
|
|
49
|
+
const _Tab = require("./Tab.cjs");
|
|
50
|
+
const _renderTab = require("./renderTab.cjs");
|
|
51
|
+
const _useTab = require("./useTab.cjs");
|
|
52
|
+
const _useTabStylesstyles = require("./useTabStyles.styles.cjs");
|
|
53
|
+
const _useTabAnimatedIndicatorstyles = require("./useTabAnimatedIndicator.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Tab/index.ts"],"sourcesContent":["export { Tab } from './Tab';\nexport type { TabInternalSlots, TabBaseProps, TabProps, TabSlots, TabBaseState, TabState, TabValue } from './Tab.types';\nexport { renderTab_unstable } from './renderTab';\nexport { useTab_unstable, useTabBase_unstable, useTabA11yBehavior_unstable } from './useTab';\nexport {\n tabClassNames,\n tabReservedSpaceClassNames,\n useTabButtonStyles_unstable,\n useTabContentStyles_unstable,\n useTabIndicatorStyles_unstable,\n useTabStyles_unstable,\n} from './useTabStyles.styles';\nexport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n"],"names":["Tab","renderTab_unstable","useTab_unstable","useTabBase_unstable","useTabA11yBehavior_unstable","tabClassNames","tabReservedSpaceClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTabAnimatedIndicatorStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;uBAAG;;;eAEHC,6BAAkB;;;eAGzBI,iCAAa;;8BACa;eAA1BC;;;eAH6CF,mCAA2B;;0CAS3B;eAAtCO;;;eATiBR,2BAAmB;;+BAIhB;eAA3BI;;IACAC,4BAA4B;;;;eAC5BC,kDAA8B;;;eAC9BC,yCAAqB;;;eAPdR,uBAAe;;;qBAHJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/Tab/index.ts"],"sourcesContent":["export { Tab } from './Tab';\nexport type { TabInternalSlots, TabBaseProps, TabProps, TabSlots, TabBaseState, TabState, TabValue } from './Tab.types';\nexport { renderTab_unstable } from './renderTab';\nexport { useTab_unstable, useTabBase_unstable, useTabA11yBehavior_unstable } from './useTab';\nexport {\n tabClassNames,\n tabReservedSpaceClassNames,\n useTabButtonStyles_unstable,\n useTabContentStyles_unstable,\n useTabIndicatorStyles_unstable,\n useTabStyles_unstable,\n} from './useTabStyles.styles';\nexport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n"],"names":["Tab","renderTab_unstable","useTab_unstable","useTabBase_unstable","useTabA11yBehavior_unstable","tabClassNames","tabReservedSpaceClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTabAnimatedIndicatorStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;uBAAG;;;eAEHC,6BAAkB;;;eAGzBI,iCAAa;;8BACa;eAA1BC;;;eAH6CF,mCAA2B;;0CAS3B;eAAtCO;;;eATiBR,2BAAmB;;+BAIhB;eAA3BI;;IACAC,4BAA4B;;;;eAC5BC,kDAA8B;;;eAC9BC,yCAAqB;;;eAPdR,uBAAe;;;qBAHJ,WAAQ;2BAEO,iBAAc;wBACiC,cAAW;oCAQtF,2BAAwB;+CACwB,sCAAmC"}
|
|
@@ -24,14 +24,14 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
24
24
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
25
25
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
26
26
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
27
|
-
const
|
|
27
|
+
const _index = require("../TabList/index.cjs");
|
|
28
28
|
const useTab_unstable = (props, ref)=>{
|
|
29
29
|
const { content } = props;
|
|
30
30
|
const state = useTabBase_unstable(props, ref);
|
|
31
31
|
const focusAttributes = useTabA11yBehavior_unstable(state);
|
|
32
|
-
const appearance = (0,
|
|
33
|
-
const reserveSelectedTabSpace = (0,
|
|
34
|
-
const size = (0,
|
|
32
|
+
const appearance = (0, _index.useTabListContext_unstable)((ctx)=>ctx.appearance);
|
|
33
|
+
const reserveSelectedTabSpace = (0, _index.useTabListContext_unstable)((ctx)=>ctx.reserveSelectedTabSpace);
|
|
34
|
+
const size = (0, _index.useTabListContext_unstable)((ctx)=>{
|
|
35
35
|
var _ctx_size;
|
|
36
36
|
return (_ctx_size = ctx.size) !== null && _ctx_size !== void 0 ? _ctx_size : 'medium';
|
|
37
37
|
});
|
|
@@ -62,13 +62,13 @@ const useTab_unstable = (props, ref)=>{
|
|
|
62
62
|
};
|
|
63
63
|
const useTabBase_unstable = (props, ref)=>{
|
|
64
64
|
const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value, ...rest } = props;
|
|
65
|
-
const selectTabOnFocus = (0,
|
|
66
|
-
const listDisabled = (0,
|
|
67
|
-
const selected = (0,
|
|
68
|
-
const onRegister = (0,
|
|
69
|
-
const onUnregister = (0,
|
|
70
|
-
const onSelect = (0,
|
|
71
|
-
const vertical = (0,
|
|
65
|
+
const selectTabOnFocus = (0, _index.useTabListContext_unstable)((ctx)=>ctx.selectTabOnFocus);
|
|
66
|
+
const listDisabled = (0, _index.useTabListContext_unstable)((ctx)=>ctx.disabled);
|
|
67
|
+
const selected = (0, _index.useTabListContext_unstable)((ctx)=>ctx.selectedValue === value);
|
|
68
|
+
const onRegister = (0, _index.useTabListContext_unstable)((ctx)=>ctx.onRegister);
|
|
69
|
+
const onUnregister = (0, _index.useTabListContext_unstable)((ctx)=>ctx.onUnregister);
|
|
70
|
+
const onSelect = (0, _index.useTabListContext_unstable)((ctx)=>ctx.onSelect);
|
|
71
|
+
const vertical = (0, _index.useTabListContext_unstable)((ctx)=>!!ctx.vertical);
|
|
72
72
|
const disabled = listDisabled || tabDisabled;
|
|
73
73
|
const innerRef = _react.useRef(null);
|
|
74
74
|
const onSelectCallback = (event)=>onSelect(event, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type TabsterDOMAttribute, useTabsterAttributes } from '@fluentui/react-tabster';\nimport { mergeCallbacks, useEventCallback, useMergedRefs, slot, omit } from '@fluentui/react-utilities';\nimport type { TabProps, TabState, TabBaseProps, TabBaseState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList';\nimport type { SelectTabEvent } from '../TabList';\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 } = props;\n\n const state = useTabBase_unstable(props, ref);\n const focusAttributes = useTabA11yBehavior_unstable(state);\n\n const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n const size = useTabListContext_unstable(ctx => ctx.size ?? 'medium');\n\n const contentReservedSpace: typeof content =\n content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n\n return {\n ...state,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components: { ...state.components, contentReservedSpace: 'span' },\n root: {\n ...focusAttributes,\n ...state.root,\n },\n contentReservedSpace: slot.optional(contentReservedSpace, {\n renderByDefault: !state.selected && !state.iconOnly && reserveSelectedTabSpace,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n appearance,\n size,\n };\n};\n\n/**\n * Create the based state required to render Tab without design specifics and focus attributes.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTabBase_unstable = (props: TabBaseProps, ref: React.Ref<HTMLElement>): TabBaseState => {\n const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value, ...rest } = props;\n\n const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n const disabled = listDisabled || tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n React.useEffect(() => {\n onRegister({\n value,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, value]);\n\n const iconSlot = slot.optional(icon, { elementType: 'span' });\n const contentSlot = slot.always(content, {\n defaultProps: { children: props.children },\n elementType: 'span',\n });\n const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n return {\n components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n root: slot.always(\n {\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}` as 'true' | 'false'),\n value,\n ...rest,\n disabled,\n onClick: onTabClick,\n onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n },\n { elementType: 'button' },\n ) as TabBaseState['root'],\n icon: iconSlot,\n iconOnly,\n content: contentSlot,\n disabled,\n selected,\n value,\n vertical,\n };\n};\n\n/**\n * Hook to return a11y attributes to a Tab based on selected state.\n * Should be applied on the button with role=\"tab\".\n *\n * @param selected - whether the Tab is selected\n * @returns Tabster DOM attributes\n */\nexport const useTabA11yBehavior_unstable = ({ selected }: Pick<TabBaseState, 'selected'>): TabsterDOMAttribute => {\n return useTabsterAttributes({\n focusable: { isDefault: selected },\n });\n};\n"],"names":["React","useTabsterAttributes","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","state","useTabBase_unstable","focusAttributes","useTabA11yBehavior_unstable","appearance","ctx","reserveSelectedTabSpace","size","contentReservedSpace","components","root","optional","renderByDefault","selected","iconOnly","defaultProps","children","elementType","disabled","tabDisabled","icon","onClick","onFocus","value","rest","selectTabOnFocus","listDisabled","selectedValue","onRegister","onUnregister","onSelect","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","useEffect","iconSlot","contentSlot","always","Boolean","role","type","undefined","focusable","isDefault"],"mappings":"AAAA;;;;;;;;;;;;+BA4Hae;;;IArEAF,mBAAAA;;;IArCAL,eAAAA;;;;;iEAhBU,QAAQ;8BACgC,0BAA0B;gCACb,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type TabsterDOMAttribute, useTabsterAttributes } from '@fluentui/react-tabster';\nimport { mergeCallbacks, useEventCallback, useMergedRefs, slot, omit } from '@fluentui/react-utilities';\nimport type { TabProps, TabState, TabBaseProps, TabBaseState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList';\nimport type { SelectTabEvent } from '../TabList';\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 } = props;\n\n const state = useTabBase_unstable(props, ref);\n const focusAttributes = useTabA11yBehavior_unstable(state);\n\n const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n const size = useTabListContext_unstable(ctx => ctx.size ?? 'medium');\n\n const contentReservedSpace: typeof content =\n content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n\n return {\n ...state,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components: { ...state.components, contentReservedSpace: 'span' },\n root: {\n ...focusAttributes,\n ...state.root,\n },\n contentReservedSpace: slot.optional(contentReservedSpace, {\n renderByDefault: !state.selected && !state.iconOnly && reserveSelectedTabSpace,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n appearance,\n size,\n };\n};\n\n/**\n * Create the based state required to render Tab without design specifics and focus attributes.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTabBase_unstable = (props: TabBaseProps, ref: React.Ref<HTMLElement>): TabBaseState => {\n const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value, ...rest } = props;\n\n const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n const disabled = listDisabled || tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n React.useEffect(() => {\n onRegister({\n value,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, value]);\n\n const iconSlot = slot.optional(icon, { elementType: 'span' });\n const contentSlot = slot.always(content, {\n defaultProps: { children: props.children },\n elementType: 'span',\n });\n const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n return {\n components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n root: slot.always(\n {\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}` as 'true' | 'false'),\n value,\n ...rest,\n disabled,\n onClick: onTabClick,\n onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n },\n { elementType: 'button' },\n ) as TabBaseState['root'],\n icon: iconSlot,\n iconOnly,\n content: contentSlot,\n disabled,\n selected,\n value,\n vertical,\n };\n};\n\n/**\n * Hook to return a11y attributes to a Tab based on selected state.\n * Should be applied on the button with role=\"tab\".\n *\n * @param selected - whether the Tab is selected\n * @returns Tabster DOM attributes\n */\nexport const useTabA11yBehavior_unstable = ({ selected }: Pick<TabBaseState, 'selected'>): TabsterDOMAttribute => {\n return useTabsterAttributes({\n focusable: { isDefault: selected },\n });\n};\n"],"names":["React","useTabsterAttributes","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","state","useTabBase_unstable","focusAttributes","useTabA11yBehavior_unstable","appearance","ctx","reserveSelectedTabSpace","size","contentReservedSpace","components","root","optional","renderByDefault","selected","iconOnly","defaultProps","children","elementType","disabled","tabDisabled","icon","onClick","onFocus","value","rest","selectTabOnFocus","listDisabled","selectedValue","onRegister","onUnregister","onSelect","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","useEffect","iconSlot","contentSlot","always","Boolean","role","type","undefined","focusable","isDefault"],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@ Object.defineProperty(exports, "useTabAnimatedIndicatorStyles_unstable", {
|
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
14
|
const _react1 = require("@griffel/react");
|
|
15
|
-
const _TabListContext = require("../TabList/TabListContext");
|
|
15
|
+
const _TabListContext = require("../TabList/TabListContext.cjs");
|
|
16
16
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
17
17
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
18
18
|
const tabIndicatorCssVars_unstable = {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["'use client';\nimport * as React from \"react\";\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { useTabListContext_unstable } from \"../TabList/TabListContext.js\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { useAnimationFrame } from \"@fluentui/react-utilities\";\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};\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n 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});\nconst calculateTabRect = (element)=>{\n if (element) {\n var _element_parentElement;\n const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n };\n const tabRect = element.getBoundingClientRect();\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};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n var _registeredTabs_JSON_stringify;\n const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value)=>value != null;\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n const { disabled, selected, vertical } = state;\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n const [animationValues, setAnimationValues] = React.useState({\n offset: 0,\n scale: 1\n });\n const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n const [requestAnimationFrame] = useAnimationFrame();\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n if (selectedTabRect && previousSelectedTabRect) {\n const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n setAnimationValues({\n offset,\n scale\n });\n setLastAnimatedFrom(previousSelectedValue);\n // Reset the animation values after the animation is complete\n requestAnimationFrame(()=>setAnimationValues({\n offset: 0,\n scale: 1\n }));\n }\n }\n } else if (isValueDefined(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 // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.style = {\n ...rootCssVars,\n ...state.root.style\n };\n return state;\n};\n"],"names":["React","__styles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","Bu93a1u","Bdasjez","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@ Object.defineProperty(exports, "useTabAnimatedIndicatorStyles_unstable", {
|
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
14
|
const _react1 = require("@griffel/react");
|
|
15
|
-
const _TabListContext = require("../TabList/TabListContext");
|
|
15
|
+
const _TabListContext = require("../TabList/TabListContext.cjs");
|
|
16
16
|
const _reacttheme = require("@fluentui/react-theme");
|
|
17
17
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
18
18
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Tab/useTabAnimatedIndicator.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport type { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\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 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 = isValueDefined(value) ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value: TabValue) => value != null;\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 const [requestAnimationFrame] = useAnimationFrame();\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n\n if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (selectedTabRect && previousSelectedTabRect) {\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 // Reset the animation values after the animation is complete\n requestAnimationFrame(() => setAnimationValues({ offset: 0, scale: 1 }));\n }\n }\n } else if (isValueDefined(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 // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"],"names":["React","makeStyles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","overflow","animated","transitionProperty","transitionDuration","durationSlow","transitionTimingFunction","curveDecelerateMax","horizontal","transformOrigin","transform","vertical","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"mappings":"AAAA;;;;;+BA6EayC;;;;;;;iEA3EU,QAAQ;wBAGU,iBAAiB;gCACf
|
|
1
|
+
{"version":3,"sources":["../src/components/Tab/useTabAnimatedIndicator.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport type { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\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 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 = isValueDefined(value) ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value: TabValue) => value != null;\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 const [requestAnimationFrame] = useAnimationFrame();\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n\n if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (selectedTabRect && previousSelectedTabRect) {\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 // Reset the animation values after the animation is complete\n requestAnimationFrame(() => setAnimationValues({ offset: 0, scale: 1 }));\n }\n }\n } else if (isValueDefined(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 // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"],"names":["React","makeStyles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","overflow","animated","transitionProperty","transitionDuration","durationSlow","transitionTimingFunction","curveDecelerateMax","horizontal","transformOrigin","transform","vertical","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"mappings":"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"}
|
|
@@ -30,7 +30,7 @@ _export(exports, {
|
|
|
30
30
|
}
|
|
31
31
|
});
|
|
32
32
|
const _react = require("@griffel/react");
|
|
33
|
-
const _useTabAnimatedIndicatorstyles = require("./useTabAnimatedIndicator.styles");
|
|
33
|
+
const _useTabAnimatedIndicatorstyles = require("./useTabAnimatedIndicator.styles.cjs");
|
|
34
34
|
const tabClassNames = {
|
|
35
35
|
root: 'fui-Tab',
|
|
36
36
|
icon: 'fui-Tab__icon',
|
|
@@ -1197,13 +1197,13 @@ const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
1197
1197
|
});
|
|
1198
1198
|
const useTabStyles_unstable = (state)=>{
|
|
1199
1199
|
'use no memo';
|
|
1200
|
+
// justified: compiler would optimize useTabStyles_unstable — manual opt-out to preserve runtime behavior
|
|
1200
1201
|
useTabIndicatorStyles_unstable(state);
|
|
1201
1202
|
useTabButtonStyles_unstable(state, state.root);
|
|
1202
1203
|
useTabContentStyles_unstable(state);
|
|
1203
1204
|
return state;
|
|
1204
1205
|
};
|
|
1205
1206
|
const useTabIndicatorStyles_unstable = (state)=>{
|
|
1206
|
-
'use no memo';
|
|
1207
1207
|
const rootStyles = useRootStyles();
|
|
1208
1208
|
const pendingIndicatorStyles = usePendingIndicatorStyles();
|
|
1209
1209
|
const activeIndicatorStyles = useActiveIndicatorStyles();
|
|
@@ -1223,7 +1223,6 @@ const useTabIndicatorStyles_unstable = (state)=>{
|
|
|
1223
1223
|
return state;
|
|
1224
1224
|
};
|
|
1225
1225
|
const useTabButtonStyles_unstable = (state, slot)=>{
|
|
1226
|
-
'use no memo';
|
|
1227
1226
|
const rootStyles = useRootStyles();
|
|
1228
1227
|
const focusStyles = useFocusStyles();
|
|
1229
1228
|
const circularStyles = useCircularAppearanceStyles();
|
|
@@ -1263,7 +1262,6 @@ const useTabButtonStyles_unstable = (state, slot)=>{
|
|
|
1263
1262
|
return state;
|
|
1264
1263
|
};
|
|
1265
1264
|
const useTabContentStyles_unstable = (state)=>{
|
|
1266
|
-
'use no memo';
|
|
1267
1265
|
const iconStyles = useIconStyles();
|
|
1268
1266
|
const contentStyles = useContentStyles();
|
|
1269
1267
|
const { selected, size } = state;
|