@fluentui/react-tabs 9.0.0-beta.9 → 9.0.0-rc.4

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

@@ -1,61 +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<'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-commonjs/components/Tab/index.d.ts

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

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/useTabAnimatedIndicator.d.ts

@@ -1,5 +0,0 @@
-import type { TabState } from './Tab.types';
-/**
- * Adds additional styling to the active tab selection indicator to create a sliding animation.
- */
-export declare const useTabAnimatedIndicatorStyles_unstable: (state: TabState) => TabState;

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

@@ -1,8 +0,0 @@
-import type { TabSlots, TabState } from './Tab.types';
-import { SlotClassNames } from '@fluentui/react-utilities';
-export declare const tabClassNames: SlotClassNames<TabSlots>;
-export declare const tabClassName: string;
-/**
- * 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,104 +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 TabRegisterData = {
-    /**
-     * The value of the tab.
-     */
-    value: TabValue;
-    /**
-     * The reference to the tab HTML element.
-     */
-    ref: React.RefObject<HTMLElement>;
-};
-export declare type RegisterTabEventHandler = (data: TabRegisterData) => 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';
-    /**
-     * A tab list can be set to disable interaction.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * 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' | '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;
-    /**
-     * A callback to allow a tab to select itself when pressed.
-     */
-    onSelect: SelectTabEventHandler;
-    /**
-     * Gets the registered tab data along with current and previous selected values.
-     */
-    getRegisteredTabs: () => {
-        selectedValue?: TabValue;
-        previousSelectedValue?: TabValue;
-        registeredTabs: Record<string, TabRegisterData>;
-    };
-};
-/**
- * Context values used in rendering TabList.
- */
-export declare type TabListContextValues = {
-    /**
-     * The context of the tab list available to each tab.
-     */
-    tabList: TabListContextValue;
-};
-/**
- * State used in rendering TabList.
- */
-export declare type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;
-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,8 +0,0 @@
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TabListSlots, TabListState } from './TabList.types';
-export declare const tabListClassNames: SlotClassNames<TabListSlots>;
-export declare const tabListClassName: string;
-/**
- * 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,4 +0,0 @@
-export type { TabProps, TabSlots, TabState, TabValue } from './Tab';
-export { renderTab_unstable, Tab, tabClassName, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';
-export type { TabRegisterData, RegisterTabEventHandler, SelectTabData, SelectTabEvent, SelectTabEventHandler, TabListContextValue, TabListContextValues, TabListProps, TabListSlots, TabListState, } from './TabList';
-export { renderTabList_unstable, TabList, tabListClassName, tabListClassNames, useTabListStyles_unstable, useTabList_unstable, } from './TabList';

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

@@ -1,62 +0,0 @@
-export declare const pendingContentSizeTokens: {
-    body1: {
-        fontSize: string;
-        fontWeight: string;
-        lineHeight: string;
-    };
-    body1Strong: {
-        fontSize: string;
-        fontWeight: string;
-        lineHeight: string;
-    };
-};
-export declare const pendingSpacingTokens: {
-    none: string;
-    xxs: string;
-    xs: string;
-    sNudge: string;
-    s: string;
-    mNudge: string;
-    m: string;
-    l: string;
-    xl: string;
-    xxl: string;
-    xxxl: string;
-};
-export declare const pendingAnimationDurationTokens: {
-    ultraFast: string;
-    faster: string;
-    fast: string;
-    normal: string;
-    slow: string;
-    slower: string;
-    ultraSlow: string;
-};
-export declare const pendingAnimationEasingTokens: {
-    accelerateMax: string;
-    accelerateMid: string;
-    accelerateMin: string;
-    declerateMax: string;
-    decelerateMid: string;
-    decelarateMin: string;
-    maxEasyEase: string;
-    easyEase: string;
-    linear: string;
-};
-/**
- * Provides shared values between tab style hooks
- * useTabStyles
- * useTabAnimatedIndicator
- */
-export declare const tabIndicatorPadding: {
-    mediumHorizontal: string;
-    mediumVertical: string;
-    smallHorizontal: string;
-    smallVertical: string;
-};
-export declare const tabIndicatorStrokeWidths: {
-    mediumHorizontal: string;
-    mediumVertical: string;
-    smallHorizontal: string;
-    smallVertical: string;
-};

package/lib-commonjs/tab.constants.js

@@ -1,75 +0,0 @@
-"use strict"; // TODO: Constants prefixed with pending should be replaced with design tokens
-// These values were taken from the design token superset figma
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.tabIndicatorStrokeWidths = exports.tabIndicatorPadding = exports.pendingAnimationEasingTokens = exports.pendingAnimationDurationTokens = exports.pendingSpacingTokens = exports.pendingContentSizeTokens = void 0;
-
-const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
-exports.pendingContentSizeTokens = {
-  // Only body sizes are defined here currently
-  body1: {
-    fontSize: react_theme_1.tokens.fontSizeBase300,
-    fontWeight: react_theme_1.tokens.fontWeightRegular,
-    lineHeight: react_theme_1.tokens.lineHeightBase300
-  },
-  body1Strong: {
-    fontSize: react_theme_1.tokens.fontSizeBase300,
-    fontWeight: react_theme_1.tokens.fontWeightSemibold,
-    lineHeight: react_theme_1.tokens.lineHeightBase300
-  }
-};
-exports.pendingSpacingTokens = {
-  none: '0',
-  xxs: '2px',
-  xs: '4px',
-  sNudge: '6px',
-  s: '8px',
-  mNudge: '10px',
-  m: '12px',
-  l: '16px',
-  xl: '20px',
-  xxl: '24px',
-  xxxl: '32px'
-};
-exports.pendingAnimationDurationTokens = {
-  ultraFast: '50ms',
-  faster: '100ms',
-  fast: '150ms',
-  normal: '200ms',
-  slow: '300ms',
-  slower: '400ms',
-  ultraSlow: '500ms'
-};
-exports.pendingAnimationEasingTokens = {
-  accelerateMax: 'cubic-bezier(1,0,1,1)',
-  accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',
-  accelerateMin: 'cubic-bezier(0.8,0,1,1)',
-  declerateMax: 'cubic-bezier(0,0,0,1)',
-  decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',
-  decelarateMin: 'cubic-bezier(0.33,0,0.1,1)',
-  maxEasyEase: 'cubic-bezier(0.8,0,0.1,1)',
-  easyEase: 'cubic-bezier(0.33,0,0.67,1)',
-  linear: 'cubic-bezier(0,0,1,1)'
-};
-/**
- * Provides shared values between tab style hooks
- * useTabStyles
- * useTabAnimatedIndicator
- */
-
-exports.tabIndicatorPadding = {
-  mediumHorizontal: exports.pendingSpacingTokens.m,
-  mediumVertical: exports.pendingSpacingTokens.s,
-  smallHorizontal: exports.pendingSpacingTokens.sNudge,
-  smallVertical: exports.pendingSpacingTokens.xs
-};
-exports.tabIndicatorStrokeWidths = {
-  mediumHorizontal: react_theme_1.tokens.strokeWidthThicker,
-  mediumVertical: react_theme_1.tokens.strokeWidthThicker,
-  smallHorizontal: react_theme_1.tokens.strokeWidthThick,
-  smallVertical: react_theme_1.tokens.strokeWidthThicker
-};
-//# sourceMappingURL=tab.constants.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["tab.constants.ts"],"names":[],"mappings":"cAAA;AACA;;;;;;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEa,OAAA,CAAA,wBAAA,GAA2B;AACtC;AACA,EAAA,KAAK,EAAE;AACL,IAAA,QAAQ,EAAE,aAAA,CAAA,MAAA,CAAO,eADZ;AAEL,IAAA,UAAU,EAAE,aAAA,CAAA,MAAA,CAAO,iBAFd;AAGL,IAAA,UAAU,EAAE,aAAA,CAAA,MAAA,CAAO;AAHd,GAF+B;AAOtC,EAAA,WAAW,EAAE;AACX,IAAA,QAAQ,EAAE,aAAA,CAAA,MAAA,CAAO,eADN;AAEX,IAAA,UAAU,EAAE,aAAA,CAAA,MAAA,CAAO,kBAFR;AAGX,IAAA,UAAU,EAAE,aAAA,CAAA,MAAA,CAAO;AAHR;AAPyB,CAA3B;AAcA,OAAA,CAAA,oBAAA,GAAuB;AAClC,EAAA,IAAI,EAAE,GAD4B;AAElC,EAAA,GAAG,EAAE,KAF6B;AAGlC,EAAA,EAAE,EAAE,KAH8B;AAIlC,EAAA,MAAM,EAAE,KAJ0B;AAKlC,EAAA,CAAC,EAAE,KAL+B;AAMlC,EAAA,MAAM,EAAE,MAN0B;AAOlC,EAAA,CAAC,EAAE,MAP+B;AAQlC,EAAA,CAAC,EAAE,MAR+B;AASlC,EAAA,EAAE,EAAE,MAT8B;AAUlC,EAAA,GAAG,EAAE,MAV6B;AAWlC,EAAA,IAAI,EAAE;AAX4B,CAAvB;AAcA,OAAA,CAAA,8BAAA,GAAiC;AAC5C,EAAA,SAAS,EAAE,MADiC;AAE5C,EAAA,MAAM,EAAE,OAFoC;AAG5C,EAAA,IAAI,EAAE,OAHsC;AAI5C,EAAA,MAAM,EAAE,OAJoC;AAK5C,EAAA,IAAI,EAAE,OALsC;AAM5C,EAAA,MAAM,EAAE,OANoC;AAO5C,EAAA,SAAS,EAAE;AAPiC,CAAjC;AAUA,OAAA,CAAA,4BAAA,GAA+B;AAC1C,EAAA,aAAa,EAAE,uBAD2B;AAE1C,EAAA,aAAa,EAAE,2BAF2B;AAG1C,EAAA,aAAa,EAAE,yBAH2B;AAI1C,EAAA,YAAY,EAAE,uBAJ4B;AAK1C,EAAA,aAAa,EAAE,6BAL2B;AAM1C,EAAA,aAAa,EAAE,4BAN2B;AAO1C,EAAA,WAAW,EAAE,2BAP6B;AAQ1C,EAAA,QAAQ,EAAE,6BARgC;AAS1C,EAAA,MAAM,EAAE;AATkC,CAA/B;AAYb;;;;AAIG;;AACU,OAAA,CAAA,mBAAA,GAAsB;AACjC,EAAA,gBAAgB,EAAE,OAAA,CAAA,oBAAA,CAAqB,CADN;AAEjC,EAAA,cAAc,EAAE,OAAA,CAAA,oBAAA,CAAqB,CAFJ;AAGjC,EAAA,eAAe,EAAE,OAAA,CAAA,oBAAA,CAAqB,MAHL;AAIjC,EAAA,aAAa,EAAE,OAAA,CAAA,oBAAA,CAAqB;AAJH,CAAtB;AAOA,OAAA,CAAA,wBAAA,GAA2B;AACtC,EAAA,gBAAgB,EAAE,aAAA,CAAA,MAAA,CAAO,kBADa;AAEtC,EAAA,cAAc,EAAE,aAAA,CAAA,MAAA,CAAO,kBAFe;AAGtC,EAAA,eAAe,EAAE,aAAA,CAAA,MAAA,CAAO,gBAHc;AAItC,EAAA,aAAa,EAAE,aAAA,CAAA,MAAA,CAAO;AAJgB,CAA3B","sourcesContent":["// TODO: Constants prefixed with pending should be replaced with design tokens\n// These values were taken from the design token superset figma\n\nimport { tokens } from '@fluentui/react-theme';\n\nexport const pendingContentSizeTokens = {\n  // Only body sizes are defined here currently\n  body1: {\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  body1Strong: {\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase300,\n  },\n};\n\nexport const pendingSpacingTokens = {\n  none: '0',\n  xxs: '2px',\n  xs: '4px',\n  sNudge: '6px',\n  s: '8px',\n  mNudge: '10px',\n  m: '12px',\n  l: '16px',\n  xl: '20px',\n  xxl: '24px',\n  xxxl: '32px',\n};\n\nexport const pendingAnimationDurationTokens = {\n  ultraFast: '50ms',\n  faster: '100ms',\n  fast: '150ms',\n  normal: '200ms',\n  slow: '300ms',\n  slower: '400ms',\n  ultraSlow: '500ms',\n};\n\nexport const pendingAnimationEasingTokens = {\n  accelerateMax: 'cubic-bezier(1,0,1,1)',\n  accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n  accelerateMin: 'cubic-bezier(0.8,0,1,1)',\n  declerateMax: 'cubic-bezier(0,0,0,1)',\n  decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n  decelarateMin: 'cubic-bezier(0.33,0,0.1,1)',\n  maxEasyEase: 'cubic-bezier(0.8,0,0.1,1)',\n  easyEase: 'cubic-bezier(0.33,0,0.67,1)',\n  linear: 'cubic-bezier(0,0,1,1)',\n};\n\n/**\n * Provides shared values between tab style hooks\n * useTabStyles\n * useTabAnimatedIndicator\n */\nexport const tabIndicatorPadding = {\n  mediumHorizontal: pendingSpacingTokens.m,\n  mediumVertical: pendingSpacingTokens.s,\n  smallHorizontal: pendingSpacingTokens.sNudge,\n  smallVertical: pendingSpacingTokens.xs,\n};\n\nexport const tabIndicatorStrokeWidths = {\n  mediumHorizontal: tokens.strokeWidthThicker,\n  mediumVertical: tokens.strokeWidthThicker,\n  smallHorizontal: tokens.strokeWidthThick,\n  smallVertical: tokens.strokeWidthThicker,\n};\n"],"sourceRoot":"../src/"}