Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

322
node_modules/@fluentui/react-accordion/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,322 @@
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { ContextSelector } from '@fluentui/react-context-selector';
import { FC } from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import { Provider } from 'react';
import { ProviderProps } from 'react';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
/**
* Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
*/
export declare const Accordion: ForwardRefComponent<AccordionProps> & (<TItem>(props: AccordionProps<TItem>) => JSXElement);
export declare type AccordionBaseProps<Value = AccordionItemValue> = Omit<AccordionProps<Value>, 'navigation'>;
export declare type AccordionBaseState<Value = AccordionItemValue> = Omit<AccordionState<Value>, 'navigation'>;
export declare const accordionClassNames: SlotClassNames<AccordionSlots>;
export declare type AccordionContextValue<Value = AccordionItemValue> = {
/**
* The list of opened panels by index
*/
openItems: AccordionItemValue[];
/**
* Callback used by AccordionItem to request a change on it's own opened state
* Should be used to toggle AccordionItem
*/
requestToggle: (data: AccordionRequestToggleData<Value>) => void;
collapsible: boolean;
multiple: boolean;
navigation: 'linear' | 'circular' | undefined;
};
export declare type AccordionContextValues = {
accordion: AccordionContextValue;
};
/**
* Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`
* hooks.
*/
export declare const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
export declare type AccordionHeaderBaseProps = Omit<AccordionHeaderProps, 'inline' | 'size'>;
export declare type AccordionHeaderBaseState = Omit<AccordionHeaderState, 'inline' | 'size'>;
export declare const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
export declare type AccordionHeaderContextValue = {
disabled: boolean;
open: boolean;
expandIconPosition: AccordionHeaderExpandIconPosition;
size: AccordionHeaderSize;
};
export declare type AccordionHeaderContextValues = {
accordionHeader: AccordionHeaderContextValue;
};
export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {
/**
* The position of the expand icon slot in heading.
*/
expandIconPosition?: AccordionHeaderExpandIconPosition;
/**
* Indicates if the AccordionHeader should be rendered inline.
*/
inline?: boolean;
/**
* Size of spacing in the heading.
*/
size?: AccordionHeaderSize;
};
export declare const AccordionHeaderProvider: React_2.Provider<AccordionHeaderContextValue>;
export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
export declare type AccordionHeaderSlots = {
/**
* The element wrapping the button. By default this is a div, but can be a heading.
*/
root: NonNullable<Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>>;
/**
* The component to be used as button in heading
*/
button: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;
/**
* Expand icon slot rendered before (or after) children content in heading.
*/
expandIcon?: Slot<'span'>;
/**
* Expand icon slot rendered before (or after) children content in heading.
*/
icon?: Slot<'div'>;
};
export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & Required<Pick<AccordionHeaderProps, 'inline'>> & AccordionHeaderContextValue;
export declare type AccordionIndex = number | number[];
/**
* Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.
*/
export declare const AccordionItem: ForwardRefComponent<AccordionItemProps>;
export declare const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
export declare type AccordionItemContextValue<Value = AccordionItemValue> = {
open: boolean;
disabled: boolean;
value: Value;
/**
* @deprecated - use `requestToggle` from AccordionContent instead
*/
onHeaderClick(event: AccordionToggleEvent): void;
};
export declare type AccordionItemContextValues<Value = AccordionItemValue> = {
accordionItem: AccordionItemContextValue<Value>;
};
export declare type AccordionItemProps<Value = AccordionItemValue> = ComponentProps<AccordionItemSlots> & {
/**
* Disables opening/closing of panel.
*/
disabled?: boolean;
/**
* Required value that identifies this item inside an Accordion component.
*/
value: Value;
};
export declare const AccordionItemProvider: React_2.Provider<AccordionItemContextValue<unknown>>;
export declare type AccordionItemSlots = {
root: NonNullable<Slot<'div'>>;
};
export declare type AccordionItemState<Value = AccordionItemValue> = ComponentState<AccordionItemSlots> & AccordionItemContextValue<Value>;
export declare type AccordionItemValue = unknown;
/**
* Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.
*/
export declare const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
export declare type AccordionPanelBaseProps = ComponentProps<Omit<AccordionPanelSlots, 'collapseMotion'>>;
export declare type AccordionPanelBaseState = ComponentState<Omit<AccordionPanelSlots, 'collapseMotion'>> & Pick<AccordionPanelState, 'open'>;
export declare const accordionPanelClassNames: SlotClassNames<Omit<AccordionPanelSlots, 'collapseMotion'>>;
export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
export declare type AccordionPanelSlots = {
root: NonNullable<Slot<'div'>>;
collapseMotion?: Slot<PresenceMotionSlotProps>;
};
export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
/**
* Internal open state, provided by context.
*/
open: boolean;
};
export declare type AccordionProps<Value = AccordionItemValue> = Omit<ComponentProps<AccordionSlots>, 'onToggle'> & {
/**
* Default value for the uncontrolled state of the panel.
*/
defaultOpenItems?: Value | Value[];
/**
* Indicates if Accordion support multiple Panels closed at the same time.
*/
collapsible?: boolean;
/**
* Indicates if Accordion support multiple Panels opened at the same time.
*/
multiple?: boolean;
/**
* @deprecated Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.
* Indicates if keyboard navigation is available and gives two options, linear or circular navigation.
*/
navigation?: 'linear' | 'circular';
/**
* Callback to be called when the opened items change.
*/
onToggle?: AccordionToggleEventHandler<Value>;
/**
* Controls the state of the panel.
*/
openItems?: Value | Value[];
};
export declare const AccordionProvider: Provider<AccordionContextValue<unknown>> & FC<ProviderProps<AccordionContextValue<unknown>>>;
declare type AccordionRequestToggleData<Value = AccordionItemValue> = {
event: AccordionToggleEvent;
} & Pick<AccordionToggleData<Value>, 'value'>;
export declare type AccordionSlots = {
root: NonNullable<Slot<'div'>>;
};
export declare type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;
export declare type AccordionToggleData<Value = AccordionItemValue> = {
value: Value;
openItems: Value[];
};
export declare type AccordionToggleEvent<E = HTMLElement> = React_2.MouseEvent<E> | React_2.KeyboardEvent<E>;
export declare type AccordionToggleEventHandler<Value = AccordionItemValue> = (event: AccordionToggleEvent, data: AccordionToggleData<Value>) => void;
/**
* Function that renders the final JSX of the component
*/
export declare const renderAccordion_unstable: (state: AccordionBaseState, contextValues: AccordionContextValues) => JSXElement;
/**
* Function that renders the final JSX of the component
*/
export declare const renderAccordionHeader_unstable: (state: AccordionHeaderBaseState, contextValues: AccordionHeaderContextValues) => JSXElement;
/**
* Function that renders the final JSX of the component
*/
export declare const renderAccordionItem_unstable: (state: AccordionItemState, contextValues: AccordionItemContextValues) => JSXElement;
/**
* Function that renders the final JSX of the component
*/
export declare const renderAccordionPanel_unstable: (state: AccordionPanelState) => JSXElement;
/**
* Returns the props and state required to render the component
* @param props - Accordion properties
* @param ref - reference to root HTMLElement of Accordion
*/
export declare const useAccordion_unstable: <Value = unknown>(props: AccordionProps<Value>, ref: React_2.Ref<HTMLElement>) => AccordionState<Value>;
/**
* Returns the props and state required to render the component
* @param props - Accordion properties
* @param ref - reference to root HTMLElement of Accordion
*/
export declare const useAccordionBase_unstable: <Value = unknown>(props: AccordionBaseProps<Value>, ref: React_2.Ref<HTMLElement>) => AccordionBaseState<Value>;
export declare const useAccordionContext_unstable: <T>(selector: ContextSelector<AccordionContextValue, T>) => T;
export declare function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues;
/**
* Returns the props and state required to render the component
*
* @param props - AccordionHeader properties
* @param ref - reference to root HTMLElement of AccordionHeader
*/
export declare const useAccordionHeader_unstable: (props: AccordionHeaderProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderState;
/**
* Base state hook for AccordionHeader, without design related features.
*
* @param props - AccordionHeader properties
* @param ref - reference to root HTMLElement of AccordionHeader
*/
export declare const useAccordionHeaderBase_unstable: (props: AccordionHeaderBaseProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderBaseState;
export declare const useAccordionHeaderContext_unstable: () => AccordionHeaderContextValue;
export declare function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues;
/** Applies style classnames to slots */
export declare const useAccordionHeaderStyles_unstable: (state: AccordionHeaderState) => AccordionHeaderState;
/**
* Returns the props and state required to render the component
* @param props - AccordionItem properties
* @param ref - reference to root HTMLElement of AccordionItem
*/
export declare const useAccordionItem_unstable: (props: AccordionItemProps, ref: React_2.Ref<HTMLElement>) => AccordionItemState;
export declare const useAccordionItemContext_unstable: () => AccordionItemContextValue<unknown>;
export declare function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues;
export declare const useAccordionItemStyles_unstable: (state: AccordionItemState) => AccordionItemState;
/**
* Returns the props and state required to render the component
* @param props - AccordionPanel properties
* @param ref - reference to root HTMLElement of AccordionPanel
*/
export declare const useAccordionPanel_unstable: (props: AccordionPanelProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelState;
/**
* Base state hook for AccordionPanel, without design related features.
*
* @param props - AccordionPanelBaseProps properties
* @param ref - reference to root HTMLElement of AccordionPanel
*/
export declare const useAccordionPanelBase_unstable: (props: AccordionPanelBaseProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelBaseState;
/** Applies style classnames to slots */
export declare const useAccordionPanelStyles_unstable: (state: AccordionPanelState) => AccordionPanelState;
export declare const useAccordionStyles_unstable: (state: AccordionState) => AccordionState;
export { }