253 lines
14 KiB
TypeScript
253 lines
14 KiB
TypeScript
|
import { ComponentProps } from '@fluentui/react-utilities';
|
||
|
|
import type { ComponentState } from '@fluentui/react-utilities';
|
||
|
|
import type { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts';
|
||
|
|
import type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers';
|
||
|
|
import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
|
||
|
|
import type { PartialTheme } from '@fluentui/react-theme';
|
||
|
|
import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
|
||
|
|
import * as React_2 from 'react';
|
||
|
|
import type { Slot } from '@fluentui/react-utilities';
|
||
|
|
import { SlotClassNames } from '@fluentui/react-utilities';
|
||
|
|
import { Theme } from '@fluentui/tokens';
|
||
|
|
import type { ThemeClassNameContextValue_unstable } from '@fluentui/react-shared-contexts';
|
||
|
|
import type { ThemeContextValue_unstable } from '@fluentui/react-shared-contexts';
|
||
|
|
import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-shared-contexts';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Creates a CSS rule from a theme object.
|
||
|
|
*
|
||
|
|
* Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
|
||
|
|
*/
|
||
|
|
export declare function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string;
|
||
|
|
|
||
|
|
export declare const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentProps<FluentProviderSlots>, "dir"> & {
|
||
|
|
applyStylesToPortals?: boolean | undefined;
|
||
|
|
customStyleHooks_unstable?: Partial<{
|
||
|
|
useAccordionHeaderStyles_unstable: (state: unknown) => void;
|
||
|
|
useAccordionItemStyles_unstable: (state: unknown) => void;
|
||
|
|
useAccordionPanelStyles_unstable: (state: unknown) => void;
|
||
|
|
useAccordionStyles_unstable: (state: unknown) => void;
|
||
|
|
useAvatarStyles_unstable: (state: unknown) => void;
|
||
|
|
useAvatarGroupStyles_unstable: (state: unknown) => void;
|
||
|
|
useAvatarGroupItemStyles_unstable: (state: unknown) => void;
|
||
|
|
useAvatarGroupPopoverStyles_unstable: (state: unknown) => void;
|
||
|
|
useBadgeStyles_unstable: (state: unknown) => void;
|
||
|
|
useCounterBadgeStyles_unstable: (state: unknown) => void;
|
||
|
|
useCardHeaderStyles_unstable: (state: unknown) => void;
|
||
|
|
useCardStyles_unstable: (state: unknown) => void;
|
||
|
|
useCardFooterStyles_unstable: (state: unknown) => void;
|
||
|
|
useCardPreviewStyles_unstable: (state: unknown) => void;
|
||
|
|
usePresenceBadgeStyles_unstable: (state: unknown) => void;
|
||
|
|
useButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useCompoundButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useSplitButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useToggleButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useCheckboxStyles_unstable: (state: unknown) => void;
|
||
|
|
useComboboxStyles_unstable: (state: unknown) => void;
|
||
|
|
useDropdownStyles_unstable: (state: unknown) => void;
|
||
|
|
useListboxStyles_unstable: (state: unknown) => void;
|
||
|
|
useListStyles_unstable: (state: unknown) => void;
|
||
|
|
useListItemStyles_unstable: (state: unknown) => void;
|
||
|
|
useListItemButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useOptionStyles_unstable: (state: unknown) => void;
|
||
|
|
useOptionGroupStyles_unstable: (state: unknown) => void;
|
||
|
|
useDividerStyles_unstable: (state: unknown) => void;
|
||
|
|
useInputStyles_unstable: (state: unknown) => void;
|
||
|
|
useImageStyles_unstable: (state: unknown) => void;
|
||
|
|
useLabelStyles_unstable: (state: unknown) => void;
|
||
|
|
useLinkStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuDividerStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuGroupHeaderStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuGroupStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuItemCheckboxStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuItemSwitchStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuItemRadioStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuItemStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuItemLinkStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuListStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuPopoverStyles_unstable: (state: unknown) => void;
|
||
|
|
useMenuSplitGroupStyles_unstable: (state: unknown) => void;
|
||
|
|
usePersonaStyles_unstable: (state: unknown) => void;
|
||
|
|
usePopoverSurfaceStyles_unstable: (state: unknown) => void;
|
||
|
|
useRadioGroupStyles_unstable: (state: unknown) => void;
|
||
|
|
useRadioStyles_unstable: (state: unknown) => void;
|
||
|
|
useSelectStyles_unstable: (state: unknown) => void;
|
||
|
|
useSliderStyles_unstable: (state: unknown) => void;
|
||
|
|
useSpinButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useSpinnerStyles_unstable: (state: unknown) => void;
|
||
|
|
useSwitchStyles_unstable: (state: unknown) => void;
|
||
|
|
useTabStyles_unstable: (state: unknown) => void;
|
||
|
|
useTabListStyles_unstable: (state: unknown) => void;
|
||
|
|
useTextStyles_unstable: (state: unknown) => void;
|
||
|
|
useTextareaStyles_unstable: (state: unknown) => void;
|
||
|
|
useTooltipStyles_unstable: (state: unknown) => void;
|
||
|
|
useDialogTitleStyles_unstable: (state: unknown) => void;
|
||
|
|
useDialogBodyStyles_unstable: (state: unknown) => void;
|
||
|
|
useDialogActionsStyles_unstable: (state: unknown) => void;
|
||
|
|
useDialogSurfaceStyles_unstable: (state: unknown) => void;
|
||
|
|
useDialogContentStyles_unstable: (state: unknown) => void;
|
||
|
|
useProgressBarStyles_unstable: (state: unknown) => void;
|
||
|
|
useToolbarButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useToolbarRadioButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useToolbarGroupStyles_unstable: (state: unknown) => void;
|
||
|
|
useToolbarToggleButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useToolbarDividerStyles_unstable: (state: unknown) => void;
|
||
|
|
useToolbarStyles_unstable: (state: unknown) => void;
|
||
|
|
useTableCellStyles_unstable: (state: unknown) => void;
|
||
|
|
useTableRowStyles_unstable: (state: unknown) => void;
|
||
|
|
useTableBodyStyles_unstable: (state: unknown) => void;
|
||
|
|
useTableStyles_unstable: (state: unknown) => void;
|
||
|
|
useTableHeaderStyles_unstable: (state: unknown) => void;
|
||
|
|
useTableHeaderCellStyles_unstable: (state: unknown) => void;
|
||
|
|
useTableResizeHandleStyles_unstable: (state: unknown) => void;
|
||
|
|
useTableSelectionCellStyles_unstable: (state: unknown) => void;
|
||
|
|
useTableCellActionsStyles_unstable: (state: unknown) => void;
|
||
|
|
useTableCellLayoutStyles_unstable: (state: unknown) => void;
|
||
|
|
useDataGridCellStyles_unstable: (state: unknown) => void;
|
||
|
|
useDataGridRowStyles_unstable: (state: unknown) => void;
|
||
|
|
useDataGridBodyStyles_unstable: (state: unknown) => void;
|
||
|
|
useDataGridStyles_unstable: (state: unknown) => void;
|
||
|
|
useDataGridHeaderStyles_unstable: (state: unknown) => void;
|
||
|
|
useDataGridHeaderCellStyles_unstable: (state: unknown) => void;
|
||
|
|
useDataGridSelectionCellStyles_unstable: (state: unknown) => void;
|
||
|
|
useDrawerStyles_unstable: (state: unknown) => void;
|
||
|
|
useDrawerInlineStyles_unstable: (state: unknown) => void;
|
||
|
|
useDrawerOverlayStyles_unstable: (state: unknown) => void;
|
||
|
|
useInlineDrawerStyles_unstable: (state: unknown) => void;
|
||
|
|
useOverlayDrawerStyles_unstable: (state: unknown) => void;
|
||
|
|
useDrawerHeaderStyles_unstable: (state: unknown) => void;
|
||
|
|
useDrawerHeaderNavigationStyles_unstable: (state: unknown) => void;
|
||
|
|
useDrawerHeaderTitleStyles_unstable: (state: unknown) => void;
|
||
|
|
useDrawerBodyStyles_unstable: (state: unknown) => void;
|
||
|
|
useDrawerFooterStyles_unstable: (state: unknown) => void;
|
||
|
|
useInteractionTagStyles_unstable: (state: unknown) => void;
|
||
|
|
useInteractionTagPrimaryStyles_unstable: (state: unknown) => void;
|
||
|
|
useInteractionTagSecondaryStyles_unstable: (state: unknown) => void;
|
||
|
|
useTagStyles_unstable: (state: unknown) => void;
|
||
|
|
useTagGroupStyles_unstable: (state: unknown) => void;
|
||
|
|
useBreadcrumbStyles_unstable: (state: unknown) => void;
|
||
|
|
useBreadcrumbButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useBreadcrumbItemStyles_unstable: (state: unknown) => void;
|
||
|
|
useBreadcrumbDividerStyles_unstable: (state: unknown) => void;
|
||
|
|
useMessageBarStyles_unstable: (state: unknown) => void;
|
||
|
|
useMessageBarBodyStyles_unstable: (state: unknown) => void;
|
||
|
|
useMessageBarTitleStyles_unstable: (state: unknown) => void;
|
||
|
|
useMessageBarActionsStyles_unstable: (state: unknown) => void;
|
||
|
|
useMessageBarGroupStyles_unstable: (state: unknown) => void;
|
||
|
|
useToasterStyles_unstable: (state: unknown) => void;
|
||
|
|
useTeachingPopoverStyles_unstable: (state: unknown) => void;
|
||
|
|
useTeachingPopoverActionsStyles_unstable: (state: unknown) => void;
|
||
|
|
useTeachingPopoverBodyStyles_unstable: (state: unknown) => void;
|
||
|
|
useTeachingPopoverButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useTeachingPopoverCarouselStyles_unstable: (state: unknown) => void;
|
||
|
|
useTeachingPopoverHeaderStyles_unstable: (state: unknown) => void;
|
||
|
|
useTeachingPopoverPageCountStyles_unstable: (state: unknown) => void;
|
||
|
|
useTeachingPopoverSurfaceStyles_unstable: (state: unknown) => void;
|
||
|
|
useTeachingPopoverTitleStyles_unstable: (state: unknown) => void;
|
||
|
|
useTimePickerCompatStyles_unstable: (state: unknown) => void;
|
||
|
|
useTagPickerInputStyles_unstable: (state: unknown) => void;
|
||
|
|
useTagPickerButtonStyles_unstable: (state: unknown) => void;
|
||
|
|
useTagPickerControlStyles_unstable: (state: unknown) => void;
|
||
|
|
useTagPickerGroupStyles_unstable: (state: unknown) => void;
|
||
|
|
useTagPickerListStyles_unstable: (state: unknown) => void;
|
||
|
|
useTagPickerOptionStyles_unstable: (state: unknown) => void;
|
||
|
|
useTagPickerOptionGroupStyles_unstable: (state: unknown) => void;
|
||
|
|
useColorSwatchStyles_unstable: (state: unknown) => void;
|
||
|
|
useImageSwatchStyles_unstable: (state: unknown) => void;
|
||
|
|
useEmptySwatchStyles_unstable: (state: unknown) => void;
|
||
|
|
useSwatchPickerRowStyles_unstable: (state: unknown) => void;
|
||
|
|
useSwatchPickerStyles_unstable: (state: unknown) => void;
|
||
|
|
}> | undefined;
|
||
|
|
dir?: "ltr" | "rtl" | undefined;
|
||
|
|
targetDocument?: Document | undefined;
|
||
|
|
theme?: Partial<Theme> | undefined;
|
||
|
|
overrides_unstable?: OverridesContextValue_unstable | undefined;
|
||
|
|
} & React_2.RefAttributes<HTMLElement>>;
|
||
|
|
|
||
|
|
export declare const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
|
||
|
|
|
||
|
|
export declare type FluentProviderContextValues = Pick<FluentProviderState, 'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'> & {
|
||
|
|
provider: ProviderContextValue_unstable;
|
||
|
|
themeClassName: ThemeClassNameContextValue_unstable;
|
||
|
|
textDirection: 'ltr' | 'rtl';
|
||
|
|
iconDirection: IconDirectionContextValue;
|
||
|
|
tooltip: TooltipVisibilityContextValue_unstable;
|
||
|
|
};
|
||
|
|
|
||
|
|
export declare type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue_unstable;
|
||
|
|
|
||
|
|
export declare type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {
|
||
|
|
/**
|
||
|
|
* Passes styles applied to a component down to portals if enabled.
|
||
|
|
* @default true
|
||
|
|
*/
|
||
|
|
applyStylesToPortals?: boolean;
|
||
|
|
/** Sets the hooks for custom styling components. */
|
||
|
|
customStyleHooks_unstable?: FluentProviderCustomStyleHooks;
|
||
|
|
/** Sets the direction of text & generated styles. */
|
||
|
|
dir?: 'ltr' | 'rtl';
|
||
|
|
/** Provides the document, can be undefined during SSR render. */
|
||
|
|
targetDocument?: Document;
|
||
|
|
/** Sets the theme used in a scope. */
|
||
|
|
theme?: PartialTheme;
|
||
|
|
overrides_unstable?: OverridesContextValue_unstable;
|
||
|
|
};
|
||
|
|
|
||
|
|
export declare type FluentProviderSlots = {
|
||
|
|
root: Slot<'div'>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export declare type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>> & {
|
||
|
|
theme: ThemeContextValue_unstable;
|
||
|
|
themeClassName: string;
|
||
|
|
/**
|
||
|
|
* Props used to render SSR theme variables style element
|
||
|
|
*/
|
||
|
|
serverStyleProps: {
|
||
|
|
/**
|
||
|
|
* CSS rule containing CSS variables
|
||
|
|
*/
|
||
|
|
cssRule: string;
|
||
|
|
/**
|
||
|
|
* Additional attributes applied to the style element
|
||
|
|
*/
|
||
|
|
attributes: Record<string, string>;
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Render the final JSX of FluentProvider
|
||
|
|
*/
|
||
|
|
export declare const renderFluentProvider_unstable: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Create the state required to render FluentProvider.
|
||
|
|
*
|
||
|
|
* The returned state can be modified with hooks such as useFluentProviderStyles_unstable,
|
||
|
|
* before being passed to renderFluentProvider_unstable.
|
||
|
|
*
|
||
|
|
* @param props - props from this instance of FluentProvider
|
||
|
|
* @param ref - reference to root HTMLElement of FluentProvider
|
||
|
|
*/
|
||
|
|
export declare const useFluentProvider_unstable: (props: FluentProviderProps, ref: React_2.Ref<HTMLElement>) => FluentProviderState;
|
||
|
|
|
||
|
|
export declare function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues;
|
||
|
|
|
||
|
|
/** Applies style classnames to slots */
|
||
|
|
export declare const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
|
||
|
|
* @internal
|
||
|
|
* @returns CSS class to apply the rule
|
||
|
|
*/
|
||
|
|
export declare const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & {
|
||
|
|
rendererAttributes: Record<string, string>;
|
||
|
|
}) => {
|
||
|
|
styleTagId: string;
|
||
|
|
rule: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export { }
|