@fluentui/react-tabs 1.0.0-beta.97 → 9.0.0-beta.10

package/dist/react-tabs.d.ts

@@ -1,197 +1,243 @@
-import { IButtonProps } from '@fluentui/react/lib/Button';
-import { IKeytipProps } from '@fluentui/react';
-import { IRefObject } from '@fluentui/utilities';
-import { IRenderFunction } from '@fluentui/utilities';
-import { IStyle } from '@fluentui/style-utilities';
-import { IStyleFunctionOrObject } from '@fluentui/utilities';
-import { ITheme } from '@fluentui/style-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
+
+export declare type RegisterTabEventHandler = (data: TabRegisterData) => void;
+
+/**
+ * Render the final JSX of Tab
+ */
+export declare const renderTab_unstable: (state: TabState) => JSX.Element;
 
 /**
- * {@docCategory Tabs}
- * Display mode for the tabs
+ * Render the final JSX of TabList
  */
-export declare type TabFormatType = 'links' | 'tabs';
+export declare const renderTabList_unstable: (state: TabListState, contextValues: TabListContextValues) => JSX.Element;
+
+export declare type SelectTabData = {
+    /**
+     * The value of the selected tab.
+     */
+    value: TabValue;
+};
+
+export declare type SelectTabEvent<E = HTMLElement> = React_2.MouseEvent<E> | React_2.KeyboardEvent<E>;
 
-export declare class TabItem extends React_2.Component<TabItemProps, {}> {
-    constructor(props: TabItemProps);
-    render(): JSX.Element;
-}
+export declare type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;
 
 /**
- * {@docCategory Tabs}
+ * A tab provides a selectable item in a tab list.
  */
-export declare interface TabItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
+export declare const Tab: ForwardRefComponent<TabProps>;
+
+export declare const tabClassName: string;
+
+export declare const tabClassNames: SlotClassNames<TabSlots>;
+
+declare type TabCommons = {
     /**
-     * Gets the component ref.
+     * A tab can be set to disable interaction.
+     * @default false
      */
-    componentRef?: IRefObject<{}>;
+    disabled?: boolean;
     /**
-     * The text displayed of each tab.
+     * The value that identifies this tab when selected.
      */
-    headerText?: string;
+    value: TabValue;
+};
+
+/**
+ * A tab list provides single selection from a set of tabs.
+ */
+export declare const TabList: ForwardRefComponent<TabListProps>;
+
+export declare const tabListClassName: string;
+
+export declare const tabListClassNames: SlotClassNames<TabListSlots>;
+
+declare type TabListCommons = {
     /**
-     * Props for the header command button. This provides a way to pass in native props, such as data-* and aria-*,
-     * for each tab element.
+     * A tab list can supports 'transparent' and 'subtle' appearance.
+     *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
+     *- 'transparent': No background and border styling
+     * The appearance affects each of the contained tabs.
+     * @default 'transparent'
      */
-    headerButtonProps?: IButtonProps | {
-        [key: string]: string | number | boolean;
-    };
+    appearance?: 'transparent' | 'subtle';
     /**
-     * An required key to uniquely identify a tab item.
-     *
-     * Note: The 'key' from react props cannot be used inside component.
+     * A tab list can be set to disable interaction.
+     * @default false
      */
-    itemKey?: string;
+    disabled?: boolean;
     /**
-     * The aria label of each tab which will read by screen reader instead of headerText.
-     *
-     * Note that unless you have compelling requirements you should not override aria-label.
+     * Raised when a tab is selected.
      */
-    ariaLabel?: string;
+    onTabSelect?: SelectTabEventHandler;
     /**
-     * Defines an optional item count displayed in parentheses just after the `headerText`.
-     *
-     * Examples: completed (4), Unread (99+)
+     * The value of the currently selected tab.
      */
-    itemCount?: number | string;
+    selectedValue?: TabValue;
     /**
-     * An optional icon to show next to the tab.
+     * A tab list can be either 'small' or 'medium' size.
+     * The size affects each of the contained tabs.
+     * @default 'medium'
      */
-    itemIcon?: string;
+    size?: 'small' | 'medium';
     /**
-     * Optional custom renderer for the tab
+     * A tab list can arrange its tabs vertically.
+     * @default false
      */
-    onRenderTab?: IRenderFunction<TabItemProps>;
+    vertical?: boolean;
+};
+
+export declare type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | 'selectedValue'> & Required<Pick<TabListCommons, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
+    /** A callback to allow a tab to register itself with the tab list. */
+    onRegister: RegisterTabEventHandler;
+    /** A callback to allow a tab to unregister itself with the tab list. */
+    onUnregister: RegisterTabEventHandler;
     /**
-     * Optional keytip for this TabItem
+     * A callback to allow a tab to select itself when pressed.
      */
-    keytipProps?: IKeytipProps;
+    onSelect: SelectTabEventHandler;
     /**
-     * Defines whether to always render the tab item (regardless of whether it is selected or not).
-     * Useful if you're rendering content that is expensive to mount.
-     *
-     * @defaultvalue false
+     * Gets the registered tab data along with current and previous selected values.
      */
-    alwaysRender?: boolean;
-}
+    getRegisteredTabs: () => {
+        selectedValue?: TabValue;
+        previousSelectedValue?: TabValue;
+        registeredTabs: Record<string, TabRegisterData>;
+    };
+};
 
 /**
- * The Tabs control and related tabs pattern are used for navigating frequently accessed,
- * distinct content categories. Tabs allow for navigation between two or more content
- * views and relies on text headers to articulate the different sections of content.
+ * Context values used in rendering TabList.
  */
-export declare const Tabs: React_2.FunctionComponent<TabsProps>;
-
-export declare const TabsBase: React_2.FunctionComponent<TabsProps>;
+export declare type TabListContextValues = {
+    /**
+     * The context of the tab list available to each tab.
+     */
+    tabList: TabListContextValue;
+};
 
 /**
- * {@docCategory Tabs}
+ * TabList Props
  */
-export declare interface TabsImperativeHandle {
+export declare type TabListProps = ComponentProps<TabListSlots> & TabListCommons & {
     /**
-     * Sets focus to the first tab.
+     * The value of the tab to be selected by default.
+     * Typically useful when the selectedValue is uncontrolled.
      */
-    focus(): void;
-}
+    defaultSelectedValue?: TabValue;
+};
+
+export declare type TabListSlots = {
+    /**
+     * The slot associated with the root element of this tab list.
+     */
+    root: Slot<'div'>;
+};
 
 /**
- * {@docCategory Tabs}
- * Size of the tabs
+ * State used in rendering TabList.
  */
-export declare type TabSizeType = 'normal' | 'large';
+export declare type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;
 
 /**
- * {@docCategory Tabs}
+ * Tab Props
  */
-export declare interface TabsProps extends React_2.HTMLAttributes<HTMLDivElement>, React_2.RefAttributes<HTMLDivElement> {
-    /**
-     * Optional callback to access the TabsImperativeHandle interface. Use this instead of ref for accessing
-     * the public methods and properties of the component.
-     */
-    componentRef?: React_2.RefObject<TabsImperativeHandle>;
-    /**
-     * Call to provide customized styling that will layer on top of the variant rules.
-     */
-    styles?: IStyleFunctionOrObject<TabsStyleProps, TabsStyles>;
+export declare type TabProps = ComponentProps<Partial<TabSlots>> & TabCommons;
+
+export declare type TabRegisterData = {
     /**
-     * Theme provided by High-Order Component.
+     * The value of the tab.
      */
-    theme?: ITheme;
+    value: TabValue;
     /**
-     * Additional css class to apply to the Tabs
-     * @defaultvalue undefined
+     * The reference to the tab HTML element.
      */
-    className?: string;
+    ref: React_2.RefObject<HTMLElement>;
+};
+
+export declare type TabSlots = {
     /**
-     * Default selected TabItem key. Only provide this if the Tabs is an uncontrolled component;
-     * otherwise, use the `selectedKey` property.
+     * Root of the component.
      */
-    defaultSelectedKey?: string;
+    root: Slot<'button'>;
     /**
-     * Key of the selected tab item. Updating this will override the selected tab state.
-     * Only provide this if the Tabs is a controlled component where you are maintaining the
-     * current state; otherwise, use `defaultSelectedKey`.
+     * Icon that renders before the content.
      */
-    selectedKey?: string | null;
+    icon?: Slot<'span'>;
     /**
-     * Callback for when the selected tab item is changed.
+     * Component children are placed in this slot
+     * Avoid using the `children` property in this slot in favour of Component children whenever possible.
      */
-    onTabClick?: (item?: TabItem, ev?: React_2.MouseEvent<HTMLElement>) => void;
+    content: NonNullable<Slot<'span'>>;
+};
+
+/**
+ * State used in rendering Tab
+ */
+export declare type TabState = ComponentState<TabSlots> & Omit<TabCommons, 'disabled'> & Required<Pick<TabCommons, 'disabled'>> & {
     /**
-     * Tab size (normal, large)
+     * A tab supports 'transparent' and 'subtle' appearance.
      */
-    tabSize?: TabSizeType;
+    appearance?: 'transparent' | 'subtle';
     /**
-     * Tab format (links, tabs)
+     * A tab can have only an icon slot filled and no content.
      */
-    tabFormat?: TabFormatType;
+    iconOnly: boolean;
     /**
-     * Overflow behavior when there is not enough room to display all of the tabs
-     * * none: Tabs will overflow the container and may not be visible
-     * * menu: Display an overflow menu that contains the tabs that don't fit
-     *
-     * @default none
+     * If this tab is selected
      */
-    overflowBehavior?: 'none' | 'menu';
+    selected: boolean;
     /**
-     * Whether to skip rendering the tabpanel with the content of the selected tab.
-     * Use this prop if you plan to separately render the tab content
-     * and don't want to leave an empty tabpanel in the page that may confuse Screen Readers.
+     * A tab can be either 'small' or 'medium' size.
      */
-    headersOnly?: boolean;
+    size: 'small' | 'medium';
     /**
-     * Callback to customize how IDs are generated for each tab header.
-     * Useful if you're rendering content outside and need to connect aria-labelledby.
+     * A tab can arrange its content based on if the tabs in the list are arranged vertically.
      */
-    getTabId?: (itemKey: string, index: number) => string;
-}
+    vertical: boolean;
+};
 
 /**
- * {@docCategory Tabs}
+ * Any value that identifies a specific tab.
  */
-export declare type TabsStyleProps = Required<Pick<TabsProps, 'theme'>> & Pick<TabsProps, 'className'> & {
-    tabSize?: TabSizeType;
-    tabFormat?: TabFormatType;
-};
+export declare type TabValue = unknown;
+
+/**
+ * Create the state required to render Tab.
+ *
+ * The returned state can be modified with hooks such as useTabStyles_unstable,
+ * before being passed to renderTab_unstable.
+ *
+ * @param props - props from this instance of Tab
+ * @param ref - reference to root HTMLElement of Tab
+ */
+export declare const useTab_unstable: (props: TabProps, ref: React_2.Ref<HTMLElement>) => TabState;
+
+/**
+ * Create the state required to render TabList.
+ *
+ * The returned state can be modified with hooks such as useTabListStyles_unstable,
+ * before being passed to renderTabList_unstable.
+ *
+ * @param props - props from this instance of TabList
+ * @param ref - reference to root HTMLElement of TabList
+ */
+export declare const useTabList_unstable: (props: TabListProps, ref: React_2.Ref<HTMLElement>) => TabListState;
+
+/**
+ * Apply styling to the TabList slots based on the state
+ */
+export declare const useTabListStyles_unstable: (state: TabListState) => TabListState;
 
 /**
- * {@docCategory Tabs}
+ * Apply styling to the Tab slots based on the state
  */
-export declare interface TabsStyles {
-    /**
-     * Style for the root element.
-     */
-    root: IStyle;
-    tab: IStyle;
-    tabIsSelected: IStyle;
-    tabContent: IStyle;
-    text: IStyle;
-    count: IStyle;
-    icon: IStyle;
-    tabInMenu: IStyle;
-    overflowMenuButton: IStyle;
-    itemContainer?: IStyle;
-}
+export declare const useTabStyles_unstable: (state: TabState) => TabState;
 
 export { }

package/lib/Tab.d.ts

@@ -0,0 +1 @@
+export * from './components/Tab/index';

package/lib/Tab.js

@@ -0,0 +1,2 @@
+export * from './components/Tab/index';
+//# sourceMappingURL=Tab.js.map

package/lib/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"../src/","sources":["Tab.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './components/Tab/index';\n"]}

package/lib/TabList.d.ts

@@ -0,0 +1 @@
+export * from './components/TabList/index';

package/lib/TabList.js

@@ -0,0 +1,2 @@
+export * from './components/TabList/index';
+//# sourceMappingURL=TabList.js.map

package/lib/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sourceRoot":"../src/","sources":["TabList.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/TabList/index';\n"]}

package/lib/components/Tab/Tab.d.ts

@@ -0,0 +1,6 @@
+import type { TabProps } from './Tab.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * A tab provides a selectable item in a tab list.
+ */
+export declare const Tab: ForwardRefComponent<TabProps>;

package/lib/components/Tab/Tab.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useTab_unstable } from './useTab';
+import { renderTab_unstable } from './renderTab';
+import { useTabStyles_unstable } from './useTabStyles';
+/**
+ * A tab provides a selectable item in a tab list.
+ */
+
+export const Tab = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTab_unstable(props, ref);
+  useTabStyles_unstable(state);
+  return renderTab_unstable(state);
+});
+Tab.displayName = 'Tab';
+//# sourceMappingURL=Tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,UAAhC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,GAAG,gBAAkC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChF,QAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AAEA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AACA,SAAO,kBAAkB,CAAC,KAAD,CAAzB;AACD,CALiD,CAA3C;AAOP,GAAG,CAAC,WAAJ,GAAkB,KAAlB","sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"sourceRoot":"../src/"}

package/lib/components/Tab/Tab.types.d.ts

@@ -0,0 +1,61 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+/**
+ * Any value that identifies a specific tab.
+ */
+export declare type TabValue = unknown;
+export declare type TabSlots = {
+    /**
+     * Root of the component.
+     */
+    root: Slot<'button'>;
+    /**
+     * Icon that renders before the content.
+     */
+    icon?: Slot<'span'>;
+    /**
+     * Component children are placed in this slot
+     * Avoid using the `children` property in this slot in favour of Component children whenever possible.
+     */
+    content: NonNullable<Slot<'span'>>;
+};
+declare type TabCommons = {
+    /**
+     * A tab can be set to disable interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The value that identifies this tab when selected.
+     */
+    value: TabValue;
+};
+/**
+ * Tab Props
+ */
+export declare type TabProps = ComponentProps<Partial<TabSlots>> & TabCommons;
+/**
+ * State used in rendering Tab
+ */
+export declare type TabState = ComponentState<TabSlots> & Omit<TabCommons, 'disabled'> & Required<Pick<TabCommons, 'disabled'>> & {
+    /**
+     * A tab supports 'transparent' and 'subtle' appearance.
+     */
+    appearance?: 'transparent' | 'subtle';
+    /**
+     * A tab can have only an icon slot filled and no content.
+     */
+    iconOnly: boolean;
+    /**
+     * If this tab is selected
+     */
+    selected: boolean;
+    /**
+     * A tab can be either 'small' or 'medium' size.
+     */
+    size: 'small' | 'medium';
+    /**
+     * A tab can arrange its content based on if the tabs in the list are arranged vertically.
+     */
+    vertical: boolean;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tab.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.types.js","sourceRoot":"../src/","sources":["components/Tab/Tab.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'button'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\ntype TabCommons = {\n  /**\n   * A tab can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The value that identifies this tab when selected.\n   */\n  value: TabValue;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = ComponentProps<Partial<TabSlots>> & TabCommons;\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabSlots> &\n  Omit<TabCommons, 'disabled'> &\n  Required<Pick<TabCommons, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent' and 'subtle' appearance.\n     */\n    appearance?: 'transparent' | 'subtle';\n    /**\n     * A tab can have only an icon slot filled and no content.\n     */\n    iconOnly: boolean;\n    /**\n     * If this tab is selected\n     */\n    selected: boolean;\n    /**\n     * A tab can be either 'small' or 'medium' size.\n     */\n    size: 'small' | 'medium';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n"]}

package/lib/components/Tab/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Tab';
+export * from './Tab.types';
+export * from './renderTab';
+export * from './useTab';
+export * from './useTabStyles';
+export * from './useTabAnimatedIndicator';

package/lib/components/Tab/index.js

@@ -0,0 +1,7 @@
+export * from './Tab';
+export * from './Tab.types';
+export * from './renderTab';
+export * from './useTab';
+export * from './useTabStyles';
+export * from './useTabAnimatedIndicator';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Tab/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles';\nexport * from './useTabAnimatedIndicator';\n"]}

package/lib/components/Tab/renderTab.d.ts

@@ -0,0 +1,5 @@
+import type { TabState } from './Tab.types';
+/**
+ * Render the final JSX of Tab
+ */
+export declare const renderTab_unstable: (state: TabState) => JSX.Element;

package/lib/components/Tab/renderTab.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Tab
+ */
+
+export const renderTab_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
+  }), !state.iconOnly && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
+  }));
+};
+//# sourceMappingURL=renderTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/renderTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;AACpD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAW,KAAX,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,CAAC,KAAK,CAAC,QAAP,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAFtB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n  const { slots, slotProps } = getSlots<TabSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!state.iconOnly && <slots.content {...slotProps.content} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Tab/useTab.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { TabProps, TabState } from './Tab.types';
+/**
+ * Create the state required to render Tab.
+ *
+ * The returned state can be modified with hooks such as useTabStyles_unstable,
+ * before being passed to renderTab_unstable.
+ *
+ * @param props - props from this instance of Tab
+ * @param ref - reference to root HTMLElement of Tab
+ */
+export declare const useTab_unstable: (props: TabProps, ref: React.Ref<HTMLElement>) => TabState;

package/lib/components/Tab/useTab.js

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { TabListContext } from '../TabList/TabListContext';
+import { useContextSelector } from '@fluentui/react-context-selector';
+/**
+ * Create the state required to render Tab.
+ *
+ * The returned state can be modified with hooks such as useTabStyles_unstable,
+ * before being passed to renderTab_unstable.
+ *
+ * @param props - props from this instance of Tab
+ * @param ref - reference to root HTMLElement of Tab
+ */
+
+export const useTab_unstable = (props, ref) => {
+  const {
+    content,
+    disabled: tabDisabled = false,
+    icon,
+    value
+  } = props;
+  const appearance = useContextSelector(TabListContext, ctx => ctx.appearance);
+  const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);
+  const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);
+  const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);
+  const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);
+  const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);
+  const size = useContextSelector(TabListContext, ctx => ctx.size);
+  const vertical = useContextSelector(TabListContext, ctx => !!ctx.vertical);
+  const disabled = listDisabled || tabDisabled;
+  const innerRef = React.useRef(null);
+  const onClick = useEventCallback(event => onSelect(event, {
+    value
+  }));
+  React.useEffect(() => {
+    onRegister({
+      value,
+      ref: innerRef
+    });
+    return () => {
+      onUnregister({
+        value,
+        ref: innerRef
+      });
+    };
+  }, [onRegister, onUnregister, innerRef, value]);
+  const iconShorthand = resolveShorthand(icon);
+  const contentShorthand = resolveShorthand(content, {
+    required: true,
+    defaultProps: {
+      children: props.children
+    }
+  });
+  return {
+    components: {
+      root: 'button',
+      icon: 'span',
+      content: 'span'
+    },
+    root: getNativeElementProps('button', {
+      ref: useMergedRefs(ref, innerRef),
+      role: 'tab',
+      ...props,
+      disabled,
+      onClick
+    }),
+    icon: iconShorthand,
+    iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
+    content: contentShorthand,
+    appearance,
+    disabled,
+    selected,
+    size,
+    value,
+    vertical
+  };
+};
+//# sourceMappingURL=useTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, disabled: tabDisabled = false, icon, value } = props;\n\n  const appearance = useContextSelector(TabListContext, ctx => ctx.appearance);\n  const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);\n  const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);\n  const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);\n  const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);\n  const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);\n  const size = useContextSelector(TabListContext, ctx => ctx.size);\n  const vertical = useContextSelector(TabListContext, ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onClick = useEventCallback((event: SelectTabEvent) => onSelect(event, { value }));\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconShorthand = resolveShorthand(icon);\n  const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n  return {\n    components: {\n      root: 'button',\n      icon: 'span',\n      content: 'span',\n    },\n    root: getNativeElementProps('button', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tab',\n      ...props,\n      disabled,\n      onClick,\n    }),\n    icon: iconShorthand,\n    iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n    content: contentShorthand,\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"sourceRoot":"../src/"}