import { XMTypes } from './datatypes.js';
import { JSONSchema, ObjectSchema, UISchema } from './schema.js';
/** Normalized BYOC component */
export interface MinimalComponentProps {
    componentName: string;
    uid?: string;
    datasources?: Record<string, any>;
    [prop: string]: any;
}
export interface ContextProperties {
    [key: string]: any;
}
/**
 * Component use [JSON Schema]{@link https://json-schema.org}, which is a declarative language that allows you to
 * annotate and validate JSON documents.
 *
 * In context of external components it is used to describe properties that component accept. It is used for documenting
 * options, parsing the values and generating the configuration UI. It is possible to provide [UI
 * Schema]{@link https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema} as well to fine tune the
 * form UI.
 *
 * @param {string}                   title                 Component name as presented to the user.
 * @param {JSONSchema['properties']} properties            Object of properties.
 * @param {JSONSchema['type']}       properties[].type     JSON Schema type of a property.
 * @param {string}                   [properties[].title]  Optional title displayed to the user.
 * @param {string}                   [group]               Optional Image to be displayed in the UI.
 * @param {string}                   [thumbnail]           Optional title displayed to the user.
 * @param {UISchema}                 [ui]                  Optional component groupping.
 * @see https://json-schema.org
 * @see https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema
 * @example
 *
 * {
 *     // Name of a component as it will be presented to the user
 *     title: 'My Component',
 *     // Optional: Thumbnail image for component to be displayed in UI
 *     thumbnail: 'http://examaple.com/component.jpg',
 *     // Optional: Group components by name
 *     group: 'Assorted components',
 *     // Definitions of three configurable properties that MyComponent accepts
 *     properties: {
 *       // Color is a string, but only Red/Green/Blue are allowed
 *       color: { type: 'string', enum: ['red', 'green', 'blue'] },
 *       // Text is a property labelled as "Text summary"
 *       text: { type: 'string', title: 'Text summary' },
 *       // Count is a number with 1 as default value
 *       count: { type: 'number', default: 1 }
 *     },
 *     // Optional UI schema customization
 *     ui: },
 *     // Color and text area required properties
 *     required: ['color', 'text']
 *   })
 *
 */
type UppercaseLetters = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
/** Custom types start with uppercase letter */
export type ExternalComponentCustomType = keyof XMTypes | `${UppercaseLetters}${string}`;
export type ExternalComponentSchemaProperty = ObjectSchema & {
    isHidden?: boolean;
    ui?: UISchema;
};
export type ExternalComponentOptions<T> = Omit<Partial<JSONSchema>, 'properties'> & {
    /**  Optional unique identifier of a component (falls back to name if not provided) */
    id?: string;
    /**  Internal name of a component */
    name: string;
    /** Description of a component */
    description?: string;
    /** Title of a component as it will be presented to the user */
    title?: string;
    /** Object containing JSONSchema definitions of properties for instances of the component. */
    properties?: {
        [propertyName in keyof T]?: Omit<JSONSchema, 'type'> & {
            /** Type of the property (string, array, object, number, integer, null) */
            type: JSONSchema['type'] | ExternalComponentCustomType;
            /** Optional title displayed to the user */
            title?: JSONSchema['title'];
            /** Hide property configuration from UI  */
            isHidden?: boolean;
            /** Default value for a property, should be valid and of correct type */
            default?: any;
        };
    };
    /** Optional thumbnail to be displayed in the UI when listing components */
    thumbnail?: string;
    /** Name of a collection to group components by (default: Ungroupped) */
    group?: string;
    /** Hide component from the UI */
    isHidden?: boolean;
    /** List of datasource IDs that component supports */
    datasourceIds?: string[];
    /** Key/value list of links to be displayed in BYOC Marketplace */
    links?: Record<string, string>;
    /** Key/value list of links to be displayed in BYOC Marketplace */
    meta?: Record<string, string>;
    /**
     * UI Schema providing customization of form UI.
     *
     * @see https://json-schema.org
     */
    ui?: UISchema;
};
export type ExternalComponentHandler<P = any> = React.ComponentType<P> | ((props: P) => Promise<React.ReactElement>) | WebComponent | null;
export type WebComponent = typeof WebComponent;
export declare function normalizeOptions<P>(options: ExternalComponentOptions<P>, component?: ExternalComponentHandler<P>, defaults?: any): {
    component: {
        new (): HTMLElement;
        prototype: HTMLElement;
    } | import("react").ComponentClass<P, any> | import("react").FunctionComponent<P> | ((props: P) => Promise<React.ReactElement>) | (() => null);
    name: string;
    schema: ObjectSchema;
    uiSchema: UISchema;
    thumbnail: string;
    group: string;
    isHidden: boolean;
    id: string;
    datasourceIds: string[];
    links: Record<string, string>;
    meta: Record<string, string>;
    title: string;
};
export type ExternalComponent<P = any> = ReturnType<typeof normalizeOptions<P>>;
export declare const WebComponent: typeof HTMLElement;
export declare const registered: Record<string, ExternalComponent>;
/**
 * Register React component to be renderable as Sitecore component (in Components and Pages). Properties are defined as
 * {@link https://json-schema.org JSON Schema}, from which a configuration form will be produced using
 * {@link https://rjsf-team.github.io/react-jsonschema-form/ RJSF library}. The library allows passing a
 * {@link https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema UI Schema} that allows tight
 * customization of form widgets, styles and behavior.
 *
 * Schema properties supports `default` option which provides a fallback value. Alternatively default properties can be
 * passed as plain javascript object as third argument to `registerComponent` call.
 *
 * It is possible to generate same component and schema with different defaults, as separate components by altering the
 * `id` property. This is used for to expand generic component like Form into different specific Form instances.
 *
 * @param {React.ComponentType}      component                     React component that will be rendered.
 * @param {string}                   options.title                 Component name as presented to the user.
 * @param {JSONSchema['properties']} options.properties            Object of properties.
 * @param {JSONSchema['type']}       options.properties[].type     JSON Schema type of a property.
 * @param {string}                   [options.properties[].title]  Optional title displayed to the user.
 * @param {string}                   [options.group]               Optional Image to be displayed in the UI.
 * @param {string}                   [options.thumbnail]           Optional title displayed to the user.
 * @param {string}                   [options.isHidden]            Optionally hide from the UI.
 * @param {UISchema}                 [options.ui]                  Optional component groupping.
 * @param {string[]}                 [options.datasourceIds]       List of datasource id component requires.
 * @see https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema
 * @see https://json-schema.org
 * @example
 *
 *   FEAAS.External.registerComponent(
 *     MyComponent,
 *     {
 *       // Name of a component as it will be used internally
 *       name: 'MyComponent',
 *       // Title of a component as it will be presented to the user
 *       title: 'My Component',
 *       // Optional: Thumbnail image for component to be displayed in UI
 *       thumbnail: 'http://examaple.com/component.jpg',
 *       // Optional: Group components in the UI
 *       group: 'Assorted components',
 *       // Definitions of three configurable properties that MyComponent accepts
 *       properties: {
 *         // Color is a string, but only Red/Green/Blue are allowed
 *         color: { type: 'string', enum: ['red', 'green', 'blue'] },
 *         // Text is a property labelled as "Text summary"
 *         text: { type: 'string', title: 'Text summary' },
 *         // Count is a number with 1 as default value
 *         count: { type: 'number', default: 1 }
 *       },
 *       // Optional UI schema customization
 *       ui: {
 *         // Present color choices as radio buttons
 *         color: { 'ui:widget': 'radio' },
 *         // Text is a textarea with 5 rows
 *         text: { 'ui:widget': 'textarea', 'ui:options': { rows: 5 } },
 *         // Count is a number field with spinner button
 *         count: { 'ui:widget': 'updown' }
 *       },
 *       // Color and text area required properties
 *       required: ['color', 'text']
 *     },
 *     { text: 'Default text' }
 *   )
 *
 */
export declare function registerComponent<T>(component: ExternalComponentHandler<T>, options: ExternalComponentOptions<T>, defaults?: any): void;
export declare function isWebComponent(object: any): object is WebComponent;
export type RegisteredComponents = {
    [id: string]: ExternalComponent;
};
/** Transform properties to proper types and merge them with default values */
export declare function getComponentProperties(id: string | ExternalComponent, props?: Record<string, any>): Record<string, any>;
export declare function getComponentConfigurablePropertyNames(id: string | ExternalComponent): string[];
/**
 * Resolve a component by its id in one of two formats:
 * - Simple id like `ComponentName` returns the registered component
 * - Complex id like `ComponentName?prop=value` returns a combination of:
 *   - `ComponentName` component if registered
 *   - `ComponentName?prop=value` component if registered
 *   - Default values provided in query string
 *
 * The latter approach allows registering a generic component under simple name, and its overloads
 * which will be presented as individual components to the user.
 */
export declare function getComponent(id: string | ExternalComponent): {
    component: import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | {
        new (): HTMLElement;
        prototype: HTMLElement;
    } | ((props: any) => Promise<React.ReactElement>) | (() => null);
    name: string;
    schema: ObjectSchema;
    uiSchema: UISchema;
    thumbnail: string;
    group: string;
    isHidden: boolean;
    id: string;
    datasourceIds: string[];
    links: Record<string, string>;
    meta: Record<string, string>;
    title: string;
} | null;
/**
 * Retrieves properties for a component, including context properties component's defaults.
 *
 * @param props  - The component props.
 * @returns An object containing the attributes, properties, and merged properties.
 */
export declare function getMergedComponentProperties(props: MinimalComponentProps): {
    /** HTML attributes in kebab case, including strings and explicitly passed objects in json format */
    attributes: {
        suppressHydrationWarning: boolean;
        class: any;
        'data-external-id': string;
    };
    /** React properties combined with datasources */
    properties: any;
    /** React properties combined with datasources and context properties */
    merged: any;
};
/**
 * Sends component registration to parent window with retry logic.
 * Retries up to COMPONENT_MAX_RETRY_ATTEMPTS times until acknowledgment is received.
 */
export declare function setRegistrationCallback(): void;
export declare class BYOCRegistration extends WebComponent {
    connectedCallback(): void;
    static register(tagName: string, win?: Window, component?: WebComponent): void;
}
export declare var contextProperties: ContextProperties;
export declare function setContextProperties(props: ContextProperties): void;
export declare const serializedContextProperties: string[];
declare global {
    namespace JSX {
        interface IntrinsicElements {
            'byoc-registration': {
                suppressHydrationWarning?: boolean;
                components: string;
                datasources: string;
            };
        }
    }
    interface Window {
        BYOCComponents: RegisteredComponents;
        BYOCComponentsFrozen: boolean;
        BYOCWebComponent: typeof HTMLElement;
    }
}
export {};
//# sourceMappingURL=components.d.ts.map