power-apps-codeapps-blog-part2/node_modules/@fluentui/react-skeleton/dist/index.d.ts

import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';

/**
 * Render the final JSX of Skeleton
 */
export declare const renderSkeleton_unstable: (state: SkeletonState, contextValues: SkeletonContextValues) => JSXElement;

/**
 * Render the final JSX of SkeletonItem
 */
export declare const renderSkeletonItem_unstable: (state: SkeletonItemBaseState) => JSXElement;

/**
 * Skeleton component - TODO: add more docs
 */
export declare const Skeleton: ForwardRefComponent<SkeletonProps>;

/**
 * Skeleton base props, excluding design-related props like animation and appearance.
 */
export declare type SkeletonBaseProps = Omit<SkeletonProps, 'animation' | 'appearance'>;

/**
 * Skeleton base state, excluding design-related state like animation and appearance.
 */
export declare type SkeletonBaseState = Omit<SkeletonState, 'animation' | 'appearance' | 'size' | 'shape'>;

export declare const skeletonClassNames: SlotClassNames<SkeletonSlots>;

export declare const SkeletonContextProvider: React_2.Provider<SkeletonContextValue | undefined>;

export declare interface SkeletonContextValue {
    animation?: 'wave' | 'pulse';
    appearance?: 'opaque' | 'translucent';
    size?: SkeletonItemSize;
    shape?: 'circle' | 'square' | 'rectangle';
}

declare type SkeletonContextValues = {
    skeletonGroup: SkeletonContextValue;
};

export declare const SkeletonItem: ForwardRefComponent<SkeletonItemProps>;

/**
 * SkeletonItem base props, excluding design-related props like animation, appearance, size, and shape.
 */
export declare type SkeletonItemBaseProps = Omit<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>;

/**
 * SkeletonItem base state, excluding design-related state like animation, appearance, size, and shape.
 */
export declare type SkeletonItemBaseState = Omit<SkeletonItemState, 'animation' | 'appearance' | 'size' | 'shape'>;

export declare const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots>;

/**
 * SkeletonItem Props
 */
export declare type SkeletonItemProps = ComponentProps<SkeletonItemSlots> & Pick<SkeletonProps, 'size' | 'shape'> & {
    /**
     * Sets the animation of the SkeletonItem
     * @default wave
     */
    animation?: 'wave' | 'pulse';
    /**
     * Sets the appearance of the SkeletonItem
     * @default opaque
     */
    appearance?: 'opaque' | 'translucent';
};

/**
 * Sizes for the SkeletonItem
 */
declare type SkeletonItemSize = 8 | 12 | 14 | 16 | 20 | 22 | 24 | 28 | 32 | 36 | 40 | 48 | 52 | 56 | 64 | 72 | 92 | 96 | 120 | 128;

export declare type SkeletonItemSlots = {
    root: Slot<'div', 'span'>;
};

/**
 * State used in rendering SkeletonItem
 */
export declare type SkeletonItemState = ComponentState<SkeletonItemSlots> & Required<Pick<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>>;

/**
 * Skeleton Props
 */
export declare type SkeletonProps = Omit<ComponentProps<Partial<SkeletonSlots>>, 'width'> & {
    /**
     * The animation type for the Skeleton
     * @defaultValue wave
     */
    animation?: 'wave' | 'pulse';
    /**
     * Sets the appearance of the Skeleton.
     * @defaultValue opaque
     */
    appearance?: 'opaque' | 'translucent';
    /**
     * Sets the width value of the skeleton wrapper.
     * @defaultValue 100%
     * @deprecated Use `className` prop to set width
     */
    width?: number | string;
    /**
     * Sets the size of the SkeletonItems inside the Skeleton in pixels.
     * Size is restricted to a limited set of values recommended for most uses (see SkeletonItemSize).
     * This value can be overridden by the individual SkeletonItem's `size` prop.
     */
    size?: SkeletonItemSize;
    /**
     * Sets the shape of the SkeletonItems inside the Skeleton.
     * This value can be overridden by the individual SkeletonItem's `shape` prop.
     */
    shape?: 'circle' | 'square' | 'rectangle';
};

export declare type SkeletonSlots = {
    /**
     * The root slot of the `Skeleton` is the container that will contain the slots that make up a `Skeleton`
     * and any data that the `Skeleton` will load. The default html element is a `div`.
     */
    root: NonNullable<Slot<'div', 'span'>>;
};

/**
 * State used in rendering Skeleton
 */
export declare type SkeletonState = ComponentState<SkeletonSlots> & Required<Pick<SkeletonProps, 'animation' | 'appearance'>> & Pick<SkeletonProps, 'size' | 'shape'>;

/**
 * Create the state required to render Skeleton.
 *
 * The returned state can be modified with hooks such as useSkeletonStyles_unstable,
 * before being passed to renderSkeleton_unstable.
 *
 * @param props - props from this instance of Skeleton
 * @param ref - reference to root HTMLElement of Skeleton
 */
export declare const useSkeleton_unstable: (props: SkeletonProps, ref: React_2.Ref<HTMLElement>) => SkeletonState;

/**
 * Base hook for Skeleton component, which manages state related to slots structure and ARIA attributes.
 *
 * @param props - User provided props to the Skeleton component.
 * @param ref - User provided ref to be passed to the Skeleton component.
 */
export declare const useSkeletonBase_unstable: (props: SkeletonBaseProps, ref: React_2.Ref<HTMLDivElement>) => SkeletonBaseState;

export declare const useSkeletonContext: () => SkeletonContextValue;

/**
 * Create the state required to render SkeletonItem.
 *
 * The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,
 * before being passed to renderSkeletonItem_unstable.
 *
 * @param props - props from this instance of SkeletonItem
 * @param ref - reference to root HTMLElement of SkeletonItem
 */
export declare const useSkeletonItem_unstable: (props: SkeletonItemProps, ref: React_2.Ref<HTMLElement>) => SkeletonItemState;

/**
 * Base hook for SkeletonItem component, which manages state related to slots structure.
 *
 * @param props - User provided props to the SkeletonItem component.
 * @param ref - User provided ref to be passed to the SkeletonItem component.
 */
export declare const useSkeletonItemBase_unstable: (props: SkeletonItemBaseProps, ref: React_2.Ref<HTMLDivElement>) => SkeletonItemBaseState;

/**
 * Apply styling to the SkeletonItem slots based on the state
 */
export declare const useSkeletonItemStyles_unstable: (state: SkeletonItemState) => SkeletonItemState;

/**
 * Apply styling to the Skeleton slots based on the state
 */
export declare const useSkeletonStyles_unstable: (state: SkeletonState) => SkeletonState;

export { }