@fluentui/react-tabs 9.3.16 → 9.3.17

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

@@ -1,2 +1 @@
 import * as React from 'react';
-//# sourceMappingURL=TabList.types.js.map

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

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

package/lib/components/TabList/TabListContext.js

@@ -1,24 +1,23 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 const tabListContextDefaultValue = {
-  appearance: 'transparent',
-  reserveSelectedTabSpace: true,
-  disabled: false,
-  selectedValue: undefined,
-  onRegister: () => {
-    /* noop */},
-  onUnregister: () => {
-    /* noop */},
-  onSelect: () => {
-    /* noop */},
-  getRegisteredTabs: () => {
-    return {
-      registeredTabs: {}
-    };
-  },
-  size: 'medium',
-  vertical: false
+    appearance: 'transparent',
+    reserveSelectedTabSpace: true,
+    disabled: false,
+    selectedValue: undefined,
+    onRegister: ()=>{
+    /* noop */ },
+    onUnregister: ()=>{
+    /* noop */ },
+    onSelect: ()=>{
+    /* noop */ },
+    getRegisteredTabs: ()=>{
+        return {
+            registeredTabs: {}
+        };
+    },
+    size: 'medium',
+    vertical: false
 };
-export const TabListContext = /*#__PURE__*/createContext(undefined);
+export const TabListContext = createContext(undefined);
 export const TabListProvider = TabListContext.Provider;
-export const useTabListContext_unstable = selector => useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));
-//# sourceMappingURL=TabListContext.js.map
+export const useTabListContext_unstable = (selector)=>useContextSelector(TabListContext, (ctx = tabListContextDefaultValue)=>selector(ctx));

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

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContextSelector","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","TabListContext","TabListProvider","Provider","useTabListContext_unstable","selector","ctx"],"sources":["../../../src/components/TabList/TabListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: TabListContextValue = {\n  appearance: 'transparent',\n  reserveSelectedTabSpace: true,\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n};\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue | undefined>(\n  undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n  useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ;AAIlD,MAAMC,0BAAA,GAAkD;EACtDC,UAAA,EAAY;EACZC,uBAAA,EAAyB,IAAI;EAC7BC,QAAA,EAAU,KAAK;EACfC,aAAA,EAAeC,SAAA;EACfC,UAAA,EAAYA,CAAA,KAAM;IAChB,WACF;EACAC,YAAA,EAAcA,CAAA,KAAM;IAClB,WACF;EACAC,QAAA,EAAUA,CAAA,KAAM;IACd,WACF;EACAC,iBAAA,EAAmBA,CAAA,KAAM;IACvB,OAAO;MACLC,cAAA,EAAgB,CAAC;IACnB;EACF;EACAC,IAAA,EAAM;EACNC,QAAA,EAAU;AACZ;AAEA,OAAO,MAAMC,cAAA,gBAA+Cf,aAAA,CAC1DO,SAAA;AAGF,OAAO,MAAMS,eAAA,GAAkBD,cAAA,CAAeE,QAAQ;AACtD,OAAO,MAAMC,0BAAA,GAAiCC,QAAA,IAC5ClB,kBAAA,CAAmBc,cAAA,EAAgB,CAACK,GAAA,GAAMlB,0BAA0B,KAAKiB,QAAA,CAASC,GAAA"}
+{"version":3,"sources":["TabListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: TabListContextValue = {\n  appearance: 'transparent',\n  reserveSelectedTabSpace: true,\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n};\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue | undefined>(\n  undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n  useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","TabListContext","TabListProvider","Provider","useTabListContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,MAAMC,6BAAkD;IACtDC,YAAY;IACZC,yBAAyB,IAAI;IAC7BC,UAAU,KAAK;IACfC,eAAeC;IACfC,YAAY,IAAM;IAChB,QAAQ,GACV;IACAC,cAAc,IAAM;IAClB,QAAQ,GACV;IACAC,UAAU,IAAM;IACd,QAAQ,GACV;IACAC,mBAAmB,IAAM;QACvB,OAAO;YACLC,gBAAgB,CAAC;QACnB;IACF;IACAC,MAAM;IACNC,UAAU,KAAK;AACjB;AAEA,OAAO,MAAMC,iBAA+Cf,cAC1DO,WACgC;AAElC,OAAO,MAAMS,kBAAkBD,eAAeE,QAAQ,CAAC;AACvD,OAAO,MAAMC,6BAA6B,CAAIC,WAC5ClB,mBAAmBc,gBAAgB,CAACK,MAAMlB,0BAA0B,GAAKiB,SAASC,MAAM"}

package/lib/components/TabList/index.js

@@ -5,4 +5,3 @@ export * from './renderTabList';
 export * from './useTabList';
 export * from './useTabListContextValues';
 export * from './useTabListStyles.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TabList/index.ts"],"sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './TabListContext';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListContextValues';\nexport * from './useTabListStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './TabListContext';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListContextValues';\nexport * from './useTabListStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,YAAY;AAC1B,cAAc,kBAAkB;AAChC,cAAc,mBAAmB;AACjC,cAAc,kBAAkB;AAChC,cAAc,eAAe;AAC7B,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B"}

package/lib/components/TabList/renderTabList.js

@@ -1,16 +1,11 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import { TabListProvider } from './TabListContext';
 /**
  * Render the final JSX of TabList
- */
-export const renderTabList_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(TabListProvider, {
-    value: contextValues.tabList
-  }, state.root.children));
+ */ export const renderTabList_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(TabListProvider, {
+        value: contextValues.tabList
+    }, state.root.children));
 };
-//# sourceMappingURL=renderTabList.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","TabListProvider","renderTabList_unstable","state","contextValues","slots","slotProps","root","value","tabList","children"],"sources":["../../../src/components/TabList/renderTabList.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TabListSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,eAAe,QAAQ;AAEhC;;;AAGA,OAAO,MAAMC,sBAAA,GAAyBA,CAACC,KAAA,EAAqBC,aAAA,KAAwC;EAClG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAA2BG,KAAA;EAExD,oBACEJ,aAdJ,CAcKM,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,eAC5BR,aAfN,CAeOE,eAAA;IAAgBO,KAAA,EAAOJ,aAAA,CAAcK;KAAUN,KAAA,CAAMI,IAAI,CAACG,QAAQ;AAGzE"}
+{"version":3,"sources":["renderTabList.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TabListSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","TabListProvider","renderTabList_unstable","state","contextValues","slots","slotProps","root","value","tabList","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC,gBAAwC;IAClG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA2BG;IAExD,qBACE,AAdJ,cAcKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAfN,cAeON;QAAgBO,OAAOJ,cAAcK,OAAO;OAAGN,MAAMI,IAAI,CAACG,QAAQ;AAGzE,EAAE"}

package/lib/components/TabList/useTabList.js

@@ -9,76 +9,69 @@ import { getNativeElementProps, useControllableState, useEventCallback, useMerge
  *
  * @param props - props from this instance of TabList
  * @param ref - reference to root HTMLElement of TabList
- */
-export const useTabList_unstable = (props, ref) => {
-  const {
-    appearance = 'transparent',
-    reserveSelectedTabSpace = true,
-    disabled = false,
-    onTabSelect,
-    size = 'medium',
-    vertical = false
-  } = props;
-  const innerRef = React.useRef(null);
-  const focusAttributes = useArrowNavigationGroup({
-    circular: true,
-    axis: vertical ? 'vertical' : 'horizontal',
-    memorizeCurrent: true
-  });
-  const [selectedValue, setSelectedValue] = useControllableState({
-    state: props.selectedValue,
-    defaultState: props.defaultSelectedValue,
-    initialState: undefined
-  });
-  // considered usePrevious, but it is sensitive to re-renders
-  // this could cause the previous to move to current in the case where the tab list re-renders.
-  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing
-  // renders for tabs that have not changed.
-  const currentSelectedValue = React.useRef(undefined);
-  const previousSelectedValue = React.useRef(undefined);
-  React.useEffect(() => {
-    previousSelectedValue.current = currentSelectedValue.current;
-    currentSelectedValue.current = selectedValue;
-  }, [selectedValue]);
-  const onSelect = useEventCallback((event, data) => {
-    setSelectedValue(data.value);
-    onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
-  });
-  const registeredTabs = React.useRef({});
-  const onRegister = useEventCallback(data => {
-    registeredTabs.current[JSON.stringify(data.value)] = data;
-  });
-  const onUnregister = useEventCallback(data => {
-    delete registeredTabs.current[JSON.stringify(data.value)];
-  });
-  const getRegisteredTabs = React.useCallback(() => {
+ */ export const useTabList_unstable = (props, ref)=>{
+    const { appearance ='transparent' , reserveSelectedTabSpace =true , disabled =false , onTabSelect , size ='medium' , vertical =false  } = props;
+    const innerRef = React.useRef(null);
+    const focusAttributes = useArrowNavigationGroup({
+        circular: true,
+        axis: vertical ? 'vertical' : 'horizontal',
+        memorizeCurrent: true
+    });
+    const [selectedValue, setSelectedValue] = useControllableState({
+        state: props.selectedValue,
+        defaultState: props.defaultSelectedValue,
+        initialState: undefined
+    });
+    // considered usePrevious, but it is sensitive to re-renders
+    // this could cause the previous to move to current in the case where the tab list re-renders.
+    // these refs avoid getRegisteredTabs changing when selectedValue changes and causing
+    // renders for tabs that have not changed.
+    const currentSelectedValue = React.useRef(undefined);
+    const previousSelectedValue = React.useRef(undefined);
+    React.useEffect(()=>{
+        previousSelectedValue.current = currentSelectedValue.current;
+        currentSelectedValue.current = selectedValue;
+    }, [
+        selectedValue
+    ]);
+    const onSelect = useEventCallback((event, data)=>{
+        setSelectedValue(data.value);
+        onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
+    });
+    const registeredTabs = React.useRef({});
+    const onRegister = useEventCallback((data)=>{
+        registeredTabs.current[JSON.stringify(data.value)] = data;
+    });
+    const onUnregister = useEventCallback((data)=>{
+        delete registeredTabs.current[JSON.stringify(data.value)];
+    });
+    const getRegisteredTabs = React.useCallback(()=>{
+        return {
+            selectedValue: currentSelectedValue.current,
+            previousSelectedValue: previousSelectedValue.current,
+            registeredTabs: registeredTabs.current
+        };
+    }, []);
     return {
-      selectedValue: currentSelectedValue.current,
-      previousSelectedValue: previousSelectedValue.current,
-      registeredTabs: registeredTabs.current
+        components: {
+            root: 'div'
+        },
+        root: getNativeElementProps('div', {
+            ref: useMergedRefs(ref, innerRef),
+            role: 'tablist',
+            'aria-orientation': vertical ? 'vertical' : 'horizontal',
+            ...focusAttributes,
+            ...props
+        }),
+        appearance,
+        reserveSelectedTabSpace,
+        disabled,
+        selectedValue,
+        size,
+        vertical,
+        onRegister,
+        onUnregister,
+        onSelect,
+        getRegisteredTabs
     };
-  }, []);
-  return {
-    components: {
-      root: 'div'
-    },
-    root: getNativeElementProps('div', {
-      ref: useMergedRefs(ref, innerRef),
-      role: 'tablist',
-      'aria-orientation': vertical ? 'vertical' : 'horizontal',
-      ...focusAttributes,
-      ...props
-    }),
-    appearance,
-    reserveSelectedTabSpace,
-    disabled,
-    selectedValue,
-    size,
-    vertical,
-    onRegister,
-    onUnregister,
-    onSelect,
-    getRegisteredTabs
-  };
 };
-//# sourceMappingURL=useTabList.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useArrowNavigationGroup","getNativeElementProps","useControllableState","useEventCallback","useMergedRefs","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","role"],"sources":["../../../src/components/TabList/useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getNativeElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    registeredTabs.current[JSON.stringify(data.value)] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tablist',\n      'aria-orientation': vertical ? 'vertical' : 'horizontal',\n      ...focusAttributes,\n      ...props,\n    }),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SACEC,qBAAqB,EACrBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,QACR;AAIP;;;;;;;;;AASA,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAqBC,GAAA,KAA8C;EACrG,MAAM;IACJC,UAAA,GAAa;IACbC,uBAAA,GAA0B,IAAI;IAC9BC,QAAA,GAAW,KAAK;IAChBC,WAAA;IACAC,IAAA,GAAO;IACPC,QAAA,GAAW;EAAK,CACjB,GAAGP,KAAA;EAEJ,MAAMQ,QAAA,GAAWf,KAAA,CAAMgB,MAAM,CAAc,IAAI;EAE/C,MAAMC,eAAA,GAAkBhB,uBAAA,CAAwB;IAC9CiB,QAAA,EAAU,IAAI;IACdC,IAAA,EAAML,QAAA,GAAW,aAAa,YAAY;IAC1CM,eAAA,EAAiB;EACnB;EAEA,MAAM,CAACC,aAAA,EAAeC,gBAAA,CAAiB,GAAGnB,oBAAA,CAAqB;IAC7DoB,KAAA,EAAOhB,KAAA,CAAMc,aAAa;IAC1BG,YAAA,EAAcjB,KAAA,CAAMkB,oBAAoB;IACxCC,YAAA,EAAcC;EAChB;EAEA;EACA;EACA;EACA;EACA,MAAMC,oBAAA,GAAuB5B,KAAA,CAAMgB,MAAM,CAAuBW,SAAA;EAChE,MAAME,qBAAA,GAAwB7B,KAAA,CAAMgB,MAAM,CAAuBW,SAAA;EAEjE3B,KAAA,CAAM8B,SAAS,CAAC,MAAM;IACpBD,qBAAA,CAAsBE,OAAO,GAAGH,oBAAA,CAAqBG,OAAO;IAC5DH,oBAAA,CAAqBG,OAAO,GAAGV,aAAA;EACjC,GAAG,CAACA,aAAA,CAAc;EAElB,MAAMW,QAAA,GAAW5B,gBAAA,CAAiB,CAAC6B,KAAA,EAAuBC,IAAA,KAAwB;IAChFZ,gBAAA,CAAiBY,IAAA,CAAKC,KAAK;IAC3BvB,WAAA,aAAAA,WAAA,uBAAAA,WAAA,CAAcqB,KAAA,EAAOC,IAAA;EACvB;EAEA,MAAME,cAAA,GAAiBpC,KAAA,CAAMgB,MAAM,CAAkC,CAAC;EAEtE,MAAMqB,UAAA,GAAajC,gBAAA,CAAkB8B,IAAA,IAA0B;IAC7DE,cAAA,CAAeL,OAAO,CAACO,IAAA,CAAKC,SAAS,CAACL,IAAA,CAAKC,KAAK,EAAE,GAAGD,IAAA;EACvD;EAEA,MAAMM,YAAA,GAAepC,gBAAA,CAAkB8B,IAAA,IAA0B;IAC/D,OAAOE,cAAA,CAAeL,OAAO,CAACO,IAAA,CAAKC,SAAS,CAACL,IAAA,CAAKC,KAAK,EAAE;EAC3D;EAEA,MAAMM,iBAAA,GAAoBzC,KAAA,CAAM0C,WAAW,CAAC,MAAM;IAChD,OAAO;MACLrB,aAAA,EAAeO,oBAAA,CAAqBG,OAAO;MAC3CF,qBAAA,EAAuBA,qBAAA,CAAsBE,OAAO;MACpDK,cAAA,EAAgBA,cAAA,CAAeL;IACjC;EACF,GAAG,EAAE;EAEL,OAAO;IACLY,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAM1C,qBAAA,CAAsB,OAAO;MACjCM,GAAA,EAAKH,aAAA,CAAcG,GAAA,EAAKO,QAAA;MACxB8B,IAAA,EAAM;MACN,oBAAoB/B,QAAA,GAAW,aAAa,YAAY;MACxD,GAAGG,eAAe;MAClB,GAAGV;IACL;IACAE,UAAA;IACAC,uBAAA;IACAC,QAAA;IACAU,aAAA;IACAR,IAAA;IACAC,QAAA;IACAuB,UAAA;IACAG,YAAA;IACAR,QAAA;IACAS;EACF;AACF"}
+{"version":3,"sources":["useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getNativeElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    registeredTabs.current[JSON.stringify(data.value)] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tablist',\n      'aria-orientation': vertical ? 'vertical' : 'horizontal',\n      ...focusAttributes,\n      ...props,\n    }),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"names":["React","useArrowNavigationGroup","getNativeElementProps","useControllableState","useEventCallback","useMergedRefs","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,qBAAqB,EACrBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC,MAA8C;IACrG,MAAM,EACJC,YAAa,cAAa,EAC1BC,yBAA0B,IAAI,CAAA,EAC9BC,UAAW,KAAK,CAAA,EAChBC,YAAW,EACXC,MAAO,SAAQ,EACfC,UAAW,KAAK,CAAA,EACjB,GAAGP;IAEJ,MAAMQ,WAAWf,MAAMgB,MAAM,CAAc,IAAI;IAE/C,MAAMC,kBAAkBhB,wBAAwB;QAC9CiB,UAAU,IAAI;QACdC,MAAML,WAAW,aAAa,YAAY;QAC1CM,iBAAiB,IAAI;IACvB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGnB,qBAAqB;QAC7DoB,OAAOhB,MAAMc,aAAa;QAC1BG,cAAcjB,MAAMkB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB5B,MAAMgB,MAAM,CAAuBW;IAChE,MAAME,wBAAwB7B,MAAMgB,MAAM,CAAuBW;IAEjE3B,MAAM8B,SAAS,CAAC,IAAM;QACpBD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW5B,iBAAiB,CAAC6B,OAAuBC,OAAwB;QAChFZ,iBAAiBY,KAAKC,KAAK;QAC3BvB,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAcqB,OAAOC;IACvB;IAEA,MAAME,iBAAiBpC,MAAMgB,MAAM,CAAkC,CAAC;IAEtE,MAAMqB,aAAajC,iBAAiB,CAAC8B,OAA0B;QAC7DE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACvD;IAEA,MAAMM,eAAepC,iBAAiB,CAAC8B,OAA0B;QAC/D,OAAOE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMM,oBAAoBzC,MAAM0C,WAAW,CAAC,IAAM;QAChD,OAAO;YACLrB,eAAeO,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDK,gBAAgBA,eAAeL,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLY,YAAY;YACVC,MAAM;QACR;QACAA,MAAM1C,sBAAsB,OAAO;YACjCM,KAAKH,cAAcG,KAAKO;YACxB8B,MAAM;YACN,oBAAoB/B,WAAW,aAAa,YAAY;YACxD,GAAGG,eAAe;YAClB,GAAGV,KAAK;QACV;QACAE;QACAC;QACAC;QACAU;QACAR;QACAC;QACAuB;QACAG;QACAR;QACAS;IACF;AACF,EAAE"}

package/lib/components/TabList/useTabListContextValues.js

@@ -1,30 +1,18 @@
 export function useTabListContextValues_unstable(state) {
-  const {
-    appearance,
-    reserveSelectedTabSpace,
-    disabled,
-    selectedValue: selectedKey,
-    onRegister,
-    onUnregister,
-    onSelect,
-    getRegisteredTabs,
-    size,
-    vertical
-  } = state;
-  const tabList = {
-    appearance,
-    reserveSelectedTabSpace,
-    disabled,
-    selectedValue: selectedKey,
-    onSelect,
-    onRegister,
-    onUnregister,
-    getRegisteredTabs,
-    size,
-    vertical
-  };
-  return {
-    tabList
-  };
+    const { appearance , reserveSelectedTabSpace , disabled , selectedValue: selectedKey , onRegister , onUnregister , onSelect , getRegisteredTabs , size , vertical  } = state;
+    const tabList = {
+        appearance,
+        reserveSelectedTabSpace,
+        disabled,
+        selectedValue: selectedKey,
+        onSelect,
+        onRegister,
+        onUnregister,
+        getRegisteredTabs,
+        size,
+        vertical
+    };
+    return {
+        tabList
+    };
 }
-//# sourceMappingURL=useTabListContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"sources":["../../../src/components/TabList/useTabListContextValues.tsx"],"sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues_unstable(state: TabListState): TabListContextValues {\n  const {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    size,\n    vertical,\n  } = state;\n\n  const tabList: TabListContextValue = {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    getRegisteredTabs,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"],"mappings":"AAEA,OAAO,SAASA,iCAAiCC,KAAmB,EAAwB;EAC1F,MAAM;IACJC,UAAA;IACAC,uBAAA;IACAC,QAAA;IACAC,aAAA,EAAeC,WAAA;IACfC,UAAA;IACAC,YAAA;IACAC,QAAA;IACAC,iBAAA;IACAC,IAAA;IACAC;EAAQ,CACT,GAAGX,KAAA;EAEJ,MAAMY,OAAA,GAA+B;IACnCX,UAAA;IACAC,uBAAA;IACAC,QAAA;IACAC,aAAA,EAAeC,WAAA;IACfG,QAAA;IACAF,UAAA;IACAC,YAAA;IACAE,iBAAA;IACAC,IAAA;IACAC;EACF;EAEA,OAAO;IAAEC;EAAQ;AACnB"}
+{"version":3,"sources":["useTabListContextValues.tsx"],"sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues_unstable(state: TabListState): TabListContextValues {\n  const {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    size,\n    vertical,\n  } = state;\n\n  const tabList: TabListContextValue = {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    getRegisteredTabs,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"],"names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"mappings":"AAEA,OAAO,SAASA,iCAAiCC,KAAmB,EAAwB;IAC1F,MAAM,EACJC,WAAU,EACVC,wBAAuB,EACvBC,SAAQ,EACRC,eAAeC,YAAW,EAC1BC,WAAU,EACVC,aAAY,EACZC,SAAQ,EACRC,kBAAiB,EACjBC,KAAI,EACJC,SAAQ,EACT,GAAGX;IAEJ,MAAMY,UAA+B;QACnCX;QACAC;QACAC;QACAC,eAAeC;QACfG;QACAF;QACAC;QACAE;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAQ;AACnB,CAAC"}

package/lib/components/TabList/useTabListStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tabListClassNames","root","useStyles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","d","useTabListStyles_unstable","state","styles","className"],"sources":["../../../src/components/TabList/useTabListStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\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});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n  const { vertical } = state;\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    tabListClassNames.root,\n    styles.root,\n    vertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"AACA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AAGzC,OAAO,MAAMC,iBAAA,GAAkD;EAC7DC,IAAA,EAAM;AACR;AAEA;;;AAGA,MAAMC,SAAA,gBAAYJ,QAAA;EAAAG,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;AAAA;EAAAO,CAAA;AAAA,EAgBlB;AAEA;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAAsC;EAC9E,MAAM;IAAEH;EAAQ,CAAE,GAAGG,KAAA;EAErB,MAAMC,MAAA,GAASZ,SAAA;EAEfW,KAAA,CAAMZ,IAAI,CAACc,SAAS,GAAGhB,YAAA,CACrBC,iBAAA,CAAkBC,IAAI,EACtBa,MAAA,CAAOb,IAAI,EACXS,QAAA,GAAWI,MAAA,CAAOJ,QAAQ,GAAGI,MAAA,CAAON,UAAU,EAC9CK,KAAA,CAAMZ,IAAI,CAACc,SAAS;EAGtB,OAAOF,KAAA;AACT"}
+{"version":3,"names":["__styles","mergeClasses","tabListClassNames","root","useStyles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","d","useTabListStyles_unstable","state","styles","className"],"sources":["useTabListStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\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});\n/**\n * Apply styling to the TabList slots based on the state\n */ export const useTabListStyles_unstable = (state)=>{\n    const { vertical  } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,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;AAAA;EAAAO,CAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAM;IAAEH;EAAU,CAAC,GAAGG,KAAK;EAC3B,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGhB,YAAY,CAACC,iBAAiB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAES,QAAQ,GAAGI,MAAM,CAACJ,QAAQ,GAAGI,MAAM,CAACN,UAAU,EAAEK,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC9I,OAAOF,KAAK;AAChB,CAAC"}

package/lib/index.js

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

package/lib/index.js.map

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

package/lib-commonjs/Tab.js

@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
 });
 const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./components/Tab/index"), exports);
- //# sourceMappingURL=Tab.js.map
-
-//# sourceMappingURL=Tab.js.map

package/lib-commonjs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/Tab.js"],"sourcesContent":["export * from './components/Tab/index';\n//# sourceMappingURL=Tab.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,+BAA+B"}
+{"version":3,"sources":["Tab.js"],"sourcesContent":["export * from './components/Tab/index';\n"],"names":[],"mappings":";;;;;oBAAc"}

package/lib-commonjs/TabList.js

@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
 });
 const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./components/TabList/index"), exports);
- //# sourceMappingURL=TabList.js.map
-
-//# sourceMappingURL=TabList.js.map

package/lib-commonjs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/TabList.js"],"sourcesContent":["export * from './components/TabList/index';\n//# sourceMappingURL=TabList.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,mCAAmC"}
+{"version":3,"sources":["TabList.js"],"sourcesContent":["export * from './components/TabList/index';\n"],"names":[],"mappings":";;;;;oBAAc"}

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

@@ -18,6 +18,4 @@ const Tab = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     (0, _reactSharedContexts.useCustomStyleHook_unstable)('useTabStyles_unstable')(state);
     return (0, _renderTab.renderTab_unstable)(state);
 });
-Tab.displayName = 'Tab'; //# sourceMappingURL=Tab.js.map
-
-//# sourceMappingURL=Tab.js.map
+Tab.displayName = 'Tab';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Tab/Tab.js"],"sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n  useTabStyles_unstable(state);\n  useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n  return renderTab_unstable(state);\n});\nTab.displayName = 'Tab';\n//# sourceMappingURL=Tab.js.map"],"names":["Tab","React","forwardRef","props","ref","state","useTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","renderTab_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;wBACS;2BACG;oCACG;qCACM;AAIrC,MAAMA,MAAM,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/D,MAAMC,QAAQC,IAAAA,uBAAe,EAACH,OAAOC;IACrCG,IAAAA,yCAAqB,EAACF;IACtBG,IAAAA,gDAA2B,EAAC,yBAAyBH;IACrD,OAAOI,IAAAA,6BAAkB,EAACJ;AAC5B;AACAL,IAAIU,WAAW,GAAG,OAClB,+BAA+B"}
+{"version":3,"sources":["Tab.js"],"sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * A tab provides a selectable item in a tab list.\n */ export const Tab = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useTab_unstable(props, ref);\n    useTabStyles_unstable(state);\n    useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n    return renderTab_unstable(state);\n});\nTab.displayName = 'Tab';\n"],"names":["Tab","React","forwardRef","props","ref","state","useTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","renderTab_unstable","displayName"],"mappings":";;;;+BAOiBA;;aAAAA;;;6DAPM;wBACS;2BACG;oCACG;qCACM;AAGjC,MAAMA,MAAM,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IAChE,MAAMC,QAAQC,IAAAA,uBAAe,EAACH,OAAOC;IACrCG,IAAAA,yCAAqB,EAACF;IACtBG,IAAAA,gDAA2B,EAAC,yBAAyBH;IACrD,OAAOI,IAAAA,6BAAkB,EAACJ;AAC9B;AACAL,IAAIU,WAAW,GAAG"}

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

@@ -2,6 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
- //# sourceMappingURL=Tab.types.js.map
-
-//# sourceMappingURL=Tab.types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Tab/Tab.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=Tab.types.js.map"],"names":[],"mappings":";;;;CACA,qCAAqC"}
+{"version":3,"sources":[],"names":[],"mappings":""}

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

@@ -9,6 +9,3 @@ _exportStar(require("./renderTab"), exports);
 _exportStar(require("./useTab"), exports);
 _exportStar(require("./useTabStyles.styles"), exports);
 _exportStar(require("./useTabAnimatedIndicator.styles"), exports);
- //# sourceMappingURL=index.js.map
-
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Tab/index.js"],"sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles.styles';\nexport * from './useTabAnimatedIndicator.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles.styles';\nexport * from './useTabAnimatedIndicator.styles';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA"}

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

@@ -14,6 +14,4 @@ const renderTab_unstable = (state)=>{
         ...slotProps.content,
         className: state.contentReservedSpaceClassName
     }));
-}; //# sourceMappingURL=renderTab.js.map
-
-//# sourceMappingURL=renderTab.js.map
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Tab/renderTab.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlotsNext(state);\n  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), !state.iconOnly && /*#__PURE__*/createElement(slots.content, slotProps.content), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/createElement(slots.content, {\n    ...slotProps.content,\n    className: state.contentReservedSpaceClassName\n  }));\n};\n//# sourceMappingURL=renderTab.js.map"],"names":["renderTab_unstable","state","slots","slotProps","getSlotsNext","createElement","root","icon","iconOnly","content","selected","contentReservedSpaceClassName","undefined","className"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKrCA;;aAAAA;;iCALqE;gCACrD;AAItB,MAAMA,qBAAqBC,CAAAA,QAAS;IACzC,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACH;IACjB,OAAO,WAAW,GAAEI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,IAAI,IAAI,WAAW,GAAEF,IAAAA,8BAAa,EAACH,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,GAAG,CAACN,MAAMO,QAAQ,IAAI,WAAW,GAAEH,IAAAA,8BAAa,EAACH,MAAMO,OAAO,EAAEN,UAAUM,OAAO,GAAG,CAACR,MAAMS,QAAQ,IAAI,CAACT,MAAMO,QAAQ,IAAIP,MAAMU,6BAA6B,KAAKC,aAAa,WAAW,GAAEP,IAAAA,8BAAa,EAACH,MAAMO,OAAO,EAAE;QACxV,GAAGN,UAAUM,OAAO;QACpBI,WAAWZ,MAAMU,6BAA6B;IAChD;AACF,GACA,qCAAqC"}
+{"version":3,"sources":["renderTab.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Tab\n */ export const renderTab_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), !state.iconOnly && /*#__PURE__*/ createElement(slots.content, slotProps.content), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/ createElement(slots.content, {\n        ...slotProps.content,\n        className: state.contentReservedSpaceClassName\n    }));\n};\n"],"names":["renderTab_unstable","state","slots","slotProps","getSlotsNext","createElement","root","icon","iconOnly","content","selected","contentReservedSpaceClassName","undefined","className"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACtD;AAGlB,MAAMA,qBAAqB,CAACC,QAAQ;IAC3C,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,IAAI,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,GAAG,CAACN,MAAMO,QAAQ,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMO,OAAO,EAAEN,UAAUM,OAAO,GAAG,CAACR,MAAMS,QAAQ,IAAI,CAACT,MAAMO,QAAQ,IAAIP,MAAMU,6BAA6B,KAAKC,aAAa,WAAW,GAAGP,IAAAA,8BAAa,EAACH,MAAMO,OAAO,EAAE;QAC1V,GAAGN,UAAUM,OAAO;QACpBI,WAAWZ,MAAMU,6BAA6B;IAClD;AACJ"}

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

@@ -78,6 +78,4 @@ const useTab_unstable = (props, ref)=>{
         value,
         vertical
     };
-}; //# sourceMappingURL=useTab.js.map
-
-//# sourceMappingURL=useTab.js.map
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Tab/useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props, ref) => {\n  const {\n    content,\n    disabled: tabDisabled = false,\n    icon,\n    onClick,\n    value\n  } = props;\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n  const size = useTabListContext_unstable(ctx => ctx.size);\n  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n  const innerRef = React.useRef(null);\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, event => onSelect(event, {\n    value\n  })));\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef\n    });\n    return () => {\n      onUnregister({\n        value,\n        ref: innerRef\n      });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n  const iconShorthand = resolveShorthand(icon);\n  const contentShorthand = resolveShorthand(content, {\n    required: true,\n    defaultProps: {\n      children: props.children\n    }\n  });\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: onTabClick\n    }),\n    icon: iconShorthand,\n    iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : 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//# sourceMappingURL=useTab.js.map"],"names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onTabClick","useEventCallback","mergeCallbacks","event","useEffect","iconShorthand","resolveShorthand","contentShorthand","required","defaultProps","children","components","root","getNativeElementProps","useMergedRefs","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName"],"mappings":";;;;+BAYaA;;aAAAA;;;6DAZU;gCACkF;gCAC9D;AAUpC,MAAMA,kBAAkB,CAACC,OAAOC,MAAQ;IAC7C,MAAM,EACJC,QAAO,EACPC,UAAUC,cAAc,KAAK,CAAA,EAC7BC,KAAI,EACJC,QAAO,EACPC,MAAK,EACN,GAAGP;IACJ,MAAMQ,aAAaC,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIF,UAAU;IACnE,MAAMG,0BAA0BF,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeH,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIP,QAAQ;IACnE,MAAMU,WAAWJ,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAII,aAAa,KAAKP;IACzE,MAAMQ,aAAaN,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIK,UAAU;IACnE,MAAMC,eAAeP,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,WAAWR,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOT,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIQ,IAAI;IACvD,MAAMC,WAAWV,IAAAA,0CAA0B,EAACC,CAAAA,MAAO,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMhB,WAAWS,gBAAgBR;IACjC,MAAMgB,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAMC,aAAaC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACnB,SAASoB,CAAAA,QAAST,SAASS,OAAO;YACnFnB;QACF;IACAc,OAAMM,SAAS,CAAC,IAAM;QACpBZ,WAAW;YACTR;YACAN,KAAKmB;QACP;QACA,OAAO,IAAM;YACXJ,aAAa;gBACXT;gBACAN,KAAKmB;YACP;QACF;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUb;KAAM;IAC9C,MAAMqB,gBAAgBC,IAAAA,gCAAgB,EAACxB;IACvC,MAAMyB,mBAAmBD,IAAAA,gCAAgB,EAAC3B,SAAS;QACjD6B,UAAU,IAAI;QACdC,cAAc;YACZC,UAAUjC,MAAMiC,QAAQ;QAC1B;IACF;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;YACN9B,MAAM;YACNH,SAAS;QACX;QACAiC,MAAMC,IAAAA,qCAAqB,EAAC,UAAU;YACpCnC,KAAKoC,IAAAA,6BAAa,EAACpC,KAAKmB;YACxBkB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBpC,WAAWqC,YAAY,CAAC,EAAE3B,SAAS,CAAC;YACrD,GAAGb,KAAK;YACRG;YACAG,SAASiB;QACX;QACAlB,MAAMuB;QACNa,UAAUC,QAAQ,AAACd,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcK,QAAQ,AAAD,KAAM,CAACH,iBAAiBG,QAAQ;QACtI/B,SAAS4B;QACTtB;QACAmC,+BAA+BhC,0BAA0B,KAAK6B,SAAS;QACvErC;QACAU;QACAK;QACAX;QACAY;IACF;AACF,GACA,kCAAkC"}
+{"version":3,"sources":["useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */ export const useTab_unstable = (props, ref)=>{\n    const { content , disabled: tabDisabled = false , icon , onClick , value  } = props;\n    const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);\n    const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);\n    const listDisabled = useTabListContext_unstable((ctx)=>ctx.disabled);\n    const selected = useTabListContext_unstable((ctx)=>ctx.selectedValue === value);\n    const onRegister = useTabListContext_unstable((ctx)=>ctx.onRegister);\n    const onUnregister = useTabListContext_unstable((ctx)=>ctx.onUnregister);\n    const onSelect = useTabListContext_unstable((ctx)=>ctx.onSelect);\n    const size = useTabListContext_unstable((ctx)=>ctx.size);\n    const vertical = useTabListContext_unstable((ctx)=>!!ctx.vertical);\n    const disabled = listDisabled || tabDisabled;\n    const innerRef = React.useRef(null);\n    const onTabClick = useEventCallback(mergeCallbacks(onClick, (event)=>onSelect(event, {\n            value\n        })));\n    React.useEffect(()=>{\n        onRegister({\n            value,\n            ref: innerRef\n        });\n        return ()=>{\n            onUnregister({\n                value,\n                ref: innerRef\n            });\n        };\n    }, [\n        onRegister,\n        onUnregister,\n        innerRef,\n        value\n    ]);\n    const iconShorthand = resolveShorthand(icon);\n    const contentShorthand = resolveShorthand(content, {\n        required: true,\n        defaultProps: {\n            children: props.children\n        }\n    });\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: onTabClick\n        }),\n        icon: iconShorthand,\n        iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : 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"],"names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onTabClick","useEventCallback","mergeCallbacks","event","useEffect","iconShorthand","resolveShorthand","contentShorthand","required","defaultProps","children","components","root","getNativeElementProps","useMergedRefs","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;gCACkF;gCAC9D;AAShC,MAAMA,kBAAkB,CAACC,OAAOC,MAAM;IAC7C,MAAM,EAAEC,QAAO,EAAGC,UAAUC,cAAc,KAAK,CAAA,EAAGC,KAAI,EAAGC,QAAO,EAAGC,MAAK,EAAG,GAAGP;IAC9E,MAAMQ,aAAaC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACnE,MAAMG,0BAA0BF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIP,QAAQ;IACnE,MAAMU,WAAWJ,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAII,aAAa,KAAKP;IACzE,MAAMQ,aAAaN,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIK,UAAU;IACnE,MAAMC,eAAeP,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIM,YAAY;IACvE,MAAMC,WAAWR,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOT,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIQ,IAAI;IACvD,MAAMC,WAAWV,IAAAA,0CAA0B,EAAC,CAACC,MAAM,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMhB,WAAWS,gBAAgBR;IACjC,MAAMgB,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAMC,aAAaC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACnB,SAAS,CAACoB,QAAQT,SAASS,OAAO;YAC7EnB;QACJ;IACJc,OAAMM,SAAS,CAAC,IAAI;QAChBZ,WAAW;YACPR;YACAN,KAAKmB;QACT;QACA,OAAO,IAAI;YACPJ,aAAa;gBACTT;gBACAN,KAAKmB;YACT;QACJ;IACJ,GAAG;QACCL;QACAC;QACAI;QACAb;KACH;IACD,MAAMqB,gBAAgBC,IAAAA,gCAAgB,EAACxB;IACvC,MAAMyB,mBAAmBD,IAAAA,gCAAgB,EAAC3B,SAAS;QAC/C6B,UAAU,IAAI;QACdC,cAAc;YACVC,UAAUjC,MAAMiC,QAAQ;QAC5B;IACJ;IACA,OAAO;QACHC,YAAY;YACRC,MAAM;YACN9B,MAAM;YACNH,SAAS;QACb;QACAiC,MAAMC,IAAAA,qCAAqB,EAAC,UAAU;YAClCnC,KAAKoC,IAAAA,6BAAa,EAACpC,KAAKmB;YACxBkB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBpC,WAAWqC,YAAY,CAAC,EAAE3B,SAAS,CAAC;YACrD,GAAGb,KAAK;YACRG;YACAG,SAASiB;QACb;QACAlB,MAAMuB;QACNa,UAAUC,QAAQ,AAACd,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcK,QAAQ,AAAD,KAAM,CAACH,iBAAiBG,QAAQ;QACtI/B,SAAS4B;QACTtB;QACAmC,+BAA+BhC,0BAA0B,KAAK6B,SAAS;QACvErC;QACAU;QACAK;QACAX;QACAY;IACJ;AACJ"}

package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.js

@@ -145,5 +145,3 @@ const useTabAnimatedIndicatorStyles_unstable = (state)=>{
     };
     return state;
 }; //# sourceMappingURL=useTabAnimatedIndicator.styles.js.map
-
-//# sourceMappingURL=useTabAnimatedIndicator.styles.js.map