@fluentui/react-tabs 9.0.0-beta.8 → 9.0.0-rc.3

package/lib/TabList.d.ts

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

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

@@ -1,6 +0,0 @@
-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.types.d.ts

@@ -1,52 +0,0 @@
-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<'div'>;
-    /**
-     * 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 = {
-    /**
-     * 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> & TabCommons & {
-    /**
-     * A tab supports 'transparent' and 'subtle' appearance.
-     */
-    appearance?: string;
-    /**
-     * 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/index.d.ts

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

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

@@ -1,5 +0,0 @@
-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/useTab.d.ts

@@ -1,12 +0,0 @@
-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/useTabStyles.d.ts

@@ -1,6 +0,0 @@
-import type { TabState } from './Tab.types';
-export declare const tabClassName = "fui-Tab";
-/**
- * Apply styling to the Tab slots based on the state
- */
-export declare const useTabStyles_unstable: (state: TabState) => TabState;

package/lib/components/TabList/TabList.d.ts

@@ -1,6 +0,0 @@
-import type { TabListProps } from './TabList.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-/**
- * A tab list provides single selection from a set of tabs.
- */
-export declare const TabList: ForwardRefComponent<TabListProps>;

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

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TabValue } from '../Tab/Tab.types';
-export declare type RegisterTabData = {
-    /**
-     * The value of the selected tab.
-     */
-    value: TabValue;
-    ref: React.RefObject<HTMLElement>;
-};
-export declare type RegisterTabEventHandler = (data: RegisterTabData) => void;
-export declare type SelectTabData = {
-    /**
-     * The value of the selected tab.
-     */
-    value: TabValue;
-};
-export declare type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
-export declare type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;
-export declare type TabListSlots = {
-    /**
-     * The slot associated with the root element of this tab list.
-     */
-    root: Slot<'div'>;
-};
-declare type TabListCommons = {
-    /**
-     * 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'
-     */
-    appearance?: 'transparent' | 'subtle';
-    /**
-     * Raised when a tab is selected.
-     */
-    onTabSelect?: SelectTabEventHandler;
-    /**
-     * The value of the currently selected tab.
-     */
-    selectedValue?: TabValue;
-    /**
-     * A tab list can be either 'small' or 'medium' size.
-     * The size affects each of the contained tabs.
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium';
-    /**
-     * A tab list can arrange its tabs vertically.
-     * @default false
-     */
-    vertical?: boolean;
-};
-/**
- * TabList Props
- */
-export declare type TabListProps = ComponentProps<TabListSlots> & TabListCommons & {
-    /**
-     * The value of the tab to be selected by default.
-     * Typically useful when the selectedValue is uncontrolled.
-     */
-    defaultSelectedValue?: TabValue;
-};
-export declare type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | 'selectedValue'> & Required<Pick<TabListCommons, 'appearance' | '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;
-    /**
-     * A callback to allow a tab to select itself when pressed.
-     */
-    onSelect: SelectTabEventHandler;
-};
-/**
- * Context values used in rendering TabList.
- */
-export declare type TabListContextValues = {
-    /**
-     * The context of the tab list available to each tab.
-     */
-    tabList: TabListContextValue;
-};
-/**
- * A bounding rectangle of a tab
- */
-export declare type TabContentRect = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
-/**
- * State used in rendering TabList.
- */
-export declare type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue & {
-    selectedTabRect?: TabContentRect;
-};
-export {};

package/lib/components/TabList/TabListContext.d.ts

@@ -1,3 +0,0 @@
-import type { Context } from '@fluentui/react-context-selector';
-import { TabListContextValue } from './TabList.types';
-export declare const TabListContext: Context<TabListContextValue>;

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

@@ -1,5 +0,0 @@
-export * from './TabList';
-export * from './TabList.types';
-export * from './renderTabList';
-export * from './useTabList';
-export * from './useTabListStyles';

package/lib/components/TabList/renderTabList.d.ts

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

package/lib/components/TabList/useTabList.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { TabListProps, TabListState } from './TabList.types';
-/**
- * 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.Ref<HTMLElement>) => TabListState;

package/lib/components/TabList/useTabListContextValues.d.ts

@@ -1,2 +0,0 @@
-import { TabListContextValues, TabListState } from './TabList.types';
-export declare function useTabListContextValues(state: TabListState): TabListContextValues;

package/lib/components/TabList/useTabListStyles.d.ts

@@ -1,9 +0,0 @@
-import type { TabListState } from './TabList.types';
-export declare const tabListClassName = "fui-TabList";
-export declare const tabListSelectionIndicatorName = "fui-TabList_SelectionIndicator";
-export declare const indicatorOffsetVar = "--selection-indicator-offset";
-export declare const indicatorLengthVar = "--selection-indicator-length";
-/**
- * Apply styling to the TabList slots based on the state
- */
-export declare const useTabListStyles_unstable: (state: TabListState) => TabListState;

package/lib/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Tab';
-export * from './TabList';

package/lib/tab.constants.d.ts

@@ -1,15 +0,0 @@
-export declare const tabPendingDesignTokens: {
-    tabPadding: {
-        medium: string;
-        small: string;
-    };
-    indicatorThickness: string;
-    gap: {
-        medium: string;
-        small: string;
-    };
-    contentPadding: {
-        medium: string;
-        small: string;
-    };
-};

package/lib/tab.constants.js

@@ -1,17 +0,0 @@
-// TODO: These constants should be replaced with design tokens
-export const tabPendingDesignTokens = {
-  tabPadding: {
-    medium: '10px',
-    small: '6px'
-  },
-  indicatorThickness: '2px',
-  gap: {
-    medium: '6px',
-    small: '2px'
-  },
-  contentPadding: {
-    medium: '2px',
-    small: '2px'
-  }
-};
-//# sourceMappingURL=tab.constants.js.map

package/lib/tab.constants.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["tab.constants.ts"],"names":[],"mappings":"AAAA;AACA,OAAO,MAAM,sBAAsB,GAAG;AACpC,EAAA,UAAU,EAAE;AACV,IAAA,MAAM,EAAE,MADE;AAEV,IAAA,KAAK,EAAE;AAFG,GADwB;AAKpC,EAAA,kBAAkB,EAAE,KALgB;AAMpC,EAAA,GAAG,EAAE;AAAE,IAAA,MAAM,EAAE,KAAV;AAAiB,IAAA,KAAK,EAAE;AAAxB,GAN+B;AAOpC,EAAA,cAAc,EAAE;AACd,IAAA,MAAM,EAAE,KADM;AAEd,IAAA,KAAK,EAAE;AAFO;AAPoB,CAA/B","sourcesContent":["// TODO: These constants should be replaced with design tokens\nexport const tabPendingDesignTokens = {\n  tabPadding: {\n    medium: '10px',\n    small: '6px',\n  },\n  indicatorThickness: '2px',\n  gap: { medium: '6px', small: '2px' },\n  contentPadding: {\n    medium: '2px',\n    small: '2px',\n  },\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Tab.d.ts

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

package/lib-commonjs/TabList.d.ts

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

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

@@ -1,6 +0,0 @@
-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-commonjs/components/Tab/Tab.types.d.ts

@@ -1,52 +0,0 @@
-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<'div'>;
-    /**
-     * 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 = {
-    /**
-     * 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> & TabCommons & {
-    /**
-     * A tab supports 'transparent' and 'subtle' appearance.
-     */
-    appearance?: string;
-    /**
-     * 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-commonjs/components/Tab/index.d.ts

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

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

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

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

@@ -1,12 +0,0 @@
-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-commonjs/components/Tab/useTabStyles.d.ts

@@ -1,6 +0,0 @@
-import type { TabState } from './Tab.types';
-export declare const tabClassName = "fui-Tab";
-/**
- * Apply styling to the Tab slots based on the state
- */
-export declare const useTabStyles_unstable: (state: TabState) => TabState;

package/lib-commonjs/components/TabList/TabList.d.ts

@@ -1,6 +0,0 @@
-import type { TabListProps } from './TabList.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-/**
- * A tab list provides single selection from a set of tabs.
- */
-export declare const TabList: ForwardRefComponent<TabListProps>;

package/lib-commonjs/components/TabList/TabList.types.d.ts

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TabValue } from '../Tab/Tab.types';
-export declare type RegisterTabData = {
-    /**
-     * The value of the selected tab.
-     */
-    value: TabValue;
-    ref: React.RefObject<HTMLElement>;
-};
-export declare type RegisterTabEventHandler = (data: RegisterTabData) => void;
-export declare type SelectTabData = {
-    /**
-     * The value of the selected tab.
-     */
-    value: TabValue;
-};
-export declare type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
-export declare type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;
-export declare type TabListSlots = {
-    /**
-     * The slot associated with the root element of this tab list.
-     */
-    root: Slot<'div'>;
-};
-declare type TabListCommons = {
-    /**
-     * 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'
-     */
-    appearance?: 'transparent' | 'subtle';
-    /**
-     * Raised when a tab is selected.
-     */
-    onTabSelect?: SelectTabEventHandler;
-    /**
-     * The value of the currently selected tab.
-     */
-    selectedValue?: TabValue;
-    /**
-     * A tab list can be either 'small' or 'medium' size.
-     * The size affects each of the contained tabs.
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium';
-    /**
-     * A tab list can arrange its tabs vertically.
-     * @default false
-     */
-    vertical?: boolean;
-};
-/**
- * TabList Props
- */
-export declare type TabListProps = ComponentProps<TabListSlots> & TabListCommons & {
-    /**
-     * The value of the tab to be selected by default.
-     * Typically useful when the selectedValue is uncontrolled.
-     */
-    defaultSelectedValue?: TabValue;
-};
-export declare type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | 'selectedValue'> & Required<Pick<TabListCommons, 'appearance' | '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;
-    /**
-     * A callback to allow a tab to select itself when pressed.
-     */
-    onSelect: SelectTabEventHandler;
-};
-/**
- * Context values used in rendering TabList.
- */
-export declare type TabListContextValues = {
-    /**
-     * The context of the tab list available to each tab.
-     */
-    tabList: TabListContextValue;
-};
-/**
- * A bounding rectangle of a tab
- */
-export declare type TabContentRect = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
-/**
- * State used in rendering TabList.
- */
-export declare type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue & {
-    selectedTabRect?: TabContentRect;
-};
-export {};

package/lib-commonjs/components/TabList/TabListContext.d.ts

@@ -1,3 +0,0 @@
-import type { Context } from '@fluentui/react-context-selector';
-import { TabListContextValue } from './TabList.types';
-export declare const TabListContext: Context<TabListContextValue>;

package/lib-commonjs/components/TabList/index.d.ts

@@ -1,5 +0,0 @@
-export * from './TabList';
-export * from './TabList.types';
-export * from './renderTabList';
-export * from './useTabList';
-export * from './useTabListStyles';

package/lib-commonjs/components/TabList/renderTabList.d.ts

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

package/lib-commonjs/components/TabList/useTabList.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { TabListProps, TabListState } from './TabList.types';
-/**
- * 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.Ref<HTMLElement>) => TabListState;

package/lib-commonjs/components/TabList/useTabListContextValues.d.ts

@@ -1,2 +0,0 @@
-import { TabListContextValues, TabListState } from './TabList.types';
-export declare function useTabListContextValues(state: TabListState): TabListContextValues;

package/lib-commonjs/components/TabList/useTabListStyles.d.ts

@@ -1,9 +0,0 @@
-import type { TabListState } from './TabList.types';
-export declare const tabListClassName = "fui-TabList";
-export declare const tabListSelectionIndicatorName = "fui-TabList_SelectionIndicator";
-export declare const indicatorOffsetVar = "--selection-indicator-offset";
-export declare const indicatorLengthVar = "--selection-indicator-length";
-/**
- * Apply styling to the TabList slots based on the state
- */
-export declare const useTabListStyles_unstable: (state: TabListState) => TabListState;

package/lib-commonjs/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Tab';
-export * from './TabList';

package/lib-commonjs/tab.constants.d.ts

@@ -1,15 +0,0 @@
-export declare const tabPendingDesignTokens: {
-    tabPadding: {
-        medium: string;
-        small: string;
-    };
-    indicatorThickness: string;
-    gap: {
-        medium: string;
-        small: string;
-    };
-    contentPadding: {
-        medium: string;
-        small: string;
-    };
-};

package/lib-commonjs/tab.constants.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.tabPendingDesignTokens = void 0; // TODO: These constants should be replaced with design tokens
-
-exports.tabPendingDesignTokens = {
-  tabPadding: {
-    medium: '10px',
-    small: '6px'
-  },
-  indicatorThickness: '2px',
-  gap: {
-    medium: '6px',
-    small: '2px'
-  },
-  contentPadding: {
-    medium: '2px',
-    small: '2px'
-  }
-};
-//# sourceMappingURL=tab.constants.js.map

package/lib-commonjs/tab.constants.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["tab.constants.ts"],"names":[],"mappings":";;;;;yCAAA;;AACa,OAAA,CAAA,sBAAA,GAAyB;AACpC,EAAA,UAAU,EAAE;AACV,IAAA,MAAM,EAAE,MADE;AAEV,IAAA,KAAK,EAAE;AAFG,GADwB;AAKpC,EAAA,kBAAkB,EAAE,KALgB;AAMpC,EAAA,GAAG,EAAE;AAAE,IAAA,MAAM,EAAE,KAAV;AAAiB,IAAA,KAAK,EAAE;AAAxB,GAN+B;AAOpC,EAAA,cAAc,EAAE;AACd,IAAA,MAAM,EAAE,KADM;AAEd,IAAA,KAAK,EAAE;AAFO;AAPoB,CAAzB","sourcesContent":["// TODO: These constants should be replaced with design tokens\nexport const tabPendingDesignTokens = {\n  tabPadding: {\n    medium: '10px',\n    small: '6px',\n  },\n  indicatorThickness: '2px',\n  gap: { medium: '6px', small: '2px' },\n  contentPadding: {\n    medium: '2px',\n    small: '2px',\n  },\n};\n"],"sourceRoot":"../src/"}