import type { ElementData, ElementDataInput, ElementDataValue, ElementFilter, ElementLink, ElementSort } from './sdk/data';
import type { ElementStyles, ElementStylesUpdate, ElementStylesRemoval } from './sdk/styles';
import type { ElementDataDefinitions, ElementPresetDefinitions, ElementStateDefinitions, ElementStyleDefinitions } from './sdk/definitions';
import type { IPickerModes, IFontFamily, IFontWeight, IFontFamilyAndWeight, ISelectLinkSharedOptions, IPanelOptions, SelectFontParams, SelectFontFamilyParams, SelectFontWeightParams, SelectMediaParams, SelectLinkParams, SelectSortParams, SelectFilterParams, SelectColorParams, SelectTextThemeParams, SelectedTextTheme } from './sdk/pickers';
import type { BackgroundPickerOptions } from './Inputs';
export type { IPickerModes, IFontFamily, IFontWeight, IFontFamilyAndWeight, ISelectLinkSharedOptions, IPanelOptions, SelectFontParams, SelectFontFamilyParams, SelectFontWeightParams, SelectMediaParams, SelectLinkParams, SelectSortParams, SelectFilterParams, SelectColorParams, SelectTextThemeParams, SelectedTextTheme, };
/**
* Use `reactElements` from `@wix/editor` in a custom panel to read and update the component's styles,
* data, presets, and states, and to open editor pickers. Picker methods use {@link IPickerModes}. See each `select*` method for its parameter type.
*
* @example
* ```tsx
* import { reactElements } from '@wix/editor';
*
* export default function MyPanel() {
* const handleClick = async () => {
* const data = await reactElements.getData();
* await reactElements.setData({ title: 'Updated!' });
* };
* return ;
* }
* ```
*/
export interface IElementSDK {
/**
* Lists the data fields defined on the selected component's manifest.
*
* Each key in the result is a valid **`dataItemKey`** for {@link getData}, {@link setData}, and
* {@link getResolvedData}. See {@link ElementDataDefinitions}.
*
* A **`dataItemKey`** is the property name of a data field in that component's manifest. The same names
* returned from {@link getDataDefinitions}. Example: `'heroImage'` for a field declared as `heroImage` under
* `editorElement.data` in the component manifest.
*
* @returns Definitions keyed by `dataItemKey`.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const defs = await reactElements.getDataDefinitions();
* ```
*/
getDataDefinitions(): Promise;
/**
* Retrieves the current data values for the component.
*
* @typeParam T - Optional type parameter to define the expected structure of the returned data.
* @returns Current data values for the component.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const data = await reactElements.getData();
* ```
*/
getData(): Promise;
/**
* Returns one data field from the selected component by **`dataItemKey`**.
*
* {@link getData} returns all fields at once. This method returns only the field you name. For supported
* data types the editor may return a richer value than the same key in `getData`, such as expanded media
* or link details for UI.
*
* @param options.dataItemKey - Key of the data field to read. Must exist on the component manifest.
* @returns Value for that data field.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const hero = await reactElements.getResolvedData({
* dataItemKey: 'heroImage',
* });
* ```
*/
getResolvedData(options: {
dataItemKey: string;
}): Promise;
/**
* Updates data values for the component. Only the specified data items
* are updated; other data items remain unchanged.
*
* @typeParam T - Optional type parameter to define the expected structure of the input data.
* @param values - Data item keys and their new values.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* await reactElements.setData({ title: 'New Title', showButton: false });
* ```
*/
setData(values: ElementDataInput): Promise;
/**
* Retrieves the style definitions declared in the component's manifest,
* including `cssProperties` and `cssCustomProperties`.
*
* @returns Style definitions for the component.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const defs = await reactElements.getStyleDefinitions();
* ```
*/
getStyleDefinitions(): Promise;
/**
* Retrieves the current style values for the component.
*
* @returns Current `cssProperties` and `cssCustomProperties` values.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const styles = await reactElements.getStyles();
* const bgColor = styles.cssProperties.backgroundColor;
* ```
*/
getStyles(): Promise;
/**
* Sets style values for the component.
*
* @param values - Partial style update. Keys map to CSS property names or
* custom property names as defined by the element's style schema.
*
* @example
* ```ts
* import { reactElements, CssPropertyType } from '@wix/editor';
*
* await reactElements.setStyles({
* cssProperties: { [CssPropertyType.color]: '#fff' }
* });
* ```
*/
setStyles(values?: ElementStylesUpdate): Promise;
/**
* Removes style overrides from the component, reverting to default values.
*
* @param values - Identifies which [CSS properties](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties) or [custom properties](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/css-custom-properties) to clear.
*
* @example
* ```ts
* import { reactElements, CssPropertyType } from '@wix/editor';
*
* await reactElements.removeStyles({
* cssPropertiesKeys: [CssPropertyType.color]
* });
* ```
*/
removeStyles(values?: ElementStylesRemoval): Promise;
/**
* Retrieves the preset definitions declared in the component's manifest.
*
* @returns An object mapping each preset key to its definition.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const presets = await reactElements.getPresetDefinitions();
* ```
*/
getPresetDefinitions(): Promise;
/**
* Retrieves the currently applied preset for the component.
*
* @returns Key of the applied preset, or `null` if no preset is applied.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const preset = await reactElements.getAppliedPreset();
* ```
*/
getAppliedPreset(): Promise;
/**
* Applies a preset to the component. Applying a preset updates the component's
* styles and data to match the preset's defined defaults.
*
* @param options - Object containing the `key` of the preset to apply.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* await reactElements.applyPreset({ key: 'minimal' });
* ```
*/
applyPreset(options: {
key: string;
}): Promise;
/**
* Retrieves the currently active state for the component.
*
* @returns Key of the active state, or `null` if the default state is active.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const state = await reactElements.getState();
* ```
*/
getState(): Promise;
/**
* Sets the active state for the component. Pass `null` to return to the
* default state.
*
* @param stateKey - State key to activate, or `null` for the default state.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* await reactElements.setState('hover');
* await reactElements.setState(null);
* ```
*/
setState(stateKey: string | null): Promise;
/**
* Retrieves the state definitions declared in the component's manifest.
*
* @returns An object mapping each state key to its definition.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const states = await reactElements.getStateDefinitions();
* ```
*/
getStateDefinitions(): Promise;
/**
* Retrieves the display group definitions declared in the component's manifest.
*
* @param options - Optional filter by `groupType`.
* @returns Display group definitions for the component.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const groups = await reactElements.getDisplayGroupDefinitions();
* const cssGroups = await reactElements.getDisplayGroupDefinitions({
* filter: { groupType: 'cssDataType' },
* });
* ```
*/
getDisplayGroupDefinitions(options?: {
filter?: {
groupType?: string;
};
}): Promise>;
/**
* Retrieves the display name of the component as defined in the manifest.
*
* @returns Component display name.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const name = await reactElements.getDisplayName();
* ```
*/
getDisplayName(): Promise;
/**
* Subscribes to changes on the component. The callback is invoked whenever
* styles, data, state, preset, props, or manifest values change.
*
* @param callback - Callback that receives a patch with `type` and `value`.
* @returns Unsubscribe function. Call it to stop listening.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const unsubscribe = await reactElements.onChange((patch) => {
* if (patch.type === 'data') {
* console.log('Data changed:', patch.value);
* }
* });
*
* unsubscribe();
* ```
*/
onChange(callback: (patch: {
type: 'styles' | 'data' | 'state' | 'preset' | 'props' | 'manifest' | 'bindings' | 'providers';
value: unknown;
}) => void): Promise<() => void>;
/**
* Retrieves the currently selected index in an array items data group.
*
* @param options - Specify `arrayItemsDisplayGroupKey` if the component
* has multiple array item groups.
* @returns Index of the currently selected array item.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const index = await reactElements.getArrayItemsSelectedIndex();
* ```
*/
getArrayItemsSelectedIndex(options?: {
arrayItemsDisplayGroupKey?: string;
}): Promise;
/**
* Sets the selected index in an array items data group.
*
* @param options - Object containing the `index` to select, and optionally
* `arrayItemsDisplayGroupKey` if there are multiple array item groups.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* await reactElements.setArrayItemsSelectedIndex({ index: 2 });
* ```
*/
setArrayItemsSelectedIndex(options: {
index: number;
arrayItemsDisplayGroupKey?: string;
}): Promise;
/**
* Resets the selected index in an array items data group to the default.
*
* @param options - Specify `arrayItemsDisplayGroupKey` if the component
* has multiple array item groups.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* await reactElements.resetArrayItemsSelectedIndex();
* ```
*/
resetArrayItemsSelectedIndex(options?: {
arrayItemsDisplayGroupKey?: string;
}): Promise;
/**
* Opens the font picker for selecting a font family and weight.
*
* @param params - See {@link SelectFontParams} and {@link IPickerModes}.
* @returns Selected font family and weight, or `undefined` if dismissed.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const font = await reactElements.selectFont({
* selectedFontFamily: { family: 'Arial', weight: '400' },
* target: buttonRef.current,
* onChange: (value) => console.log('Selected:', value),
* });
* ```
*/
selectFont(params: SelectFontParams): Promise;
/**
* Opens the font family picker without weight selection.
*
* @param params - See {@link SelectFontFamilyParams} and {@link IPickerModes}.
* @returns Selected font family, or `undefined` if dismissed.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const font = await reactElements.selectFontFamily({
* selectedFontFamily: { family: 'Helvetica', weight: '400' },
* target: buttonRef.current,
* onChange: (value) => console.log('Selected:', value.family),
* });
* ```
*/
selectFontFamily(params: SelectFontFamilyParams): Promise;
/**
* Opens the font weight picker for a specified font family.
*
* @param params - See {@link SelectFontWeightParams} and {@link IPickerModes}.
* @returns Selected font weight.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const weight = await reactElements.selectFontWeight({
* fontFamily: { family: 'Arial', weight: '400' },
* target: buttonRef.current,
* onChange: (value) => console.log('Selected weight:', value.weight),
* });
* ```
*/
selectFontWeight(params: SelectFontWeightParams): Promise;
/**
* Opens the media picker for selecting images, videos, or other media.
*
* @param params - See {@link SelectMediaParams} and {@link IPickerModes}.
* @returns Selected media item.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const media = await reactElements.selectMedia({
* isMultiSelect: true,
* category: 'image',
* });
* ```
*/
selectMedia(params: SelectMediaParams): Promise;
/**
* Opens the link picker for creating or editing a link.
*
* @param params - See {@link SelectLinkParams} and {@link IPickerModes}.
* @returns Selected link, or `null`/`undefined` if dismissed.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const link = await reactElements.selectLink({
* value: currentLink,
* options: { linkTypes: ['ExternalLink', 'PageLink'] },
* });
* ```
*/
selectLink(params: SelectLinkParams): Promise;
/**
* Opens the WQL sort panel for a sort data item.
*
* @param params - See {@link SelectSortParams} and {@link IPickerModes}.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const sort = await reactElements.selectSort({ dataItemKey: 'productSort' });
* ```
*/
selectSort(params: SelectSortParams): Promise;
/**
* Opens the WQL filter panel for a filter data item.
*
* @param params - See {@link SelectFilterParams} and {@link IPickerModes}.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const filter = await reactElements.selectFilter({ dataItemKey: 'productFilter' });
* ```
*/
selectFilter(params: SelectFilterParams): Promise;
/**
* Opens the color picker for selecting a color.
*
* @param params - See {@link SelectColorParams} and {@link IPickerModes}.
* @returns Selected color value as a CSS string, or `undefined` if dismissed.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const color = await reactElements.selectColor({
* initialValue: '#ff0000',
* mode: ['solid', 'gradient'],
* showOpacity: true,
* onChange: (color) => console.log('Preview:', color),
* });
* ```
*/
selectColor(params: SelectColorParams): Promise;
/**
* Opens the background picker for selecting a background fill
* such as color, gradient, or image.
*
* @param options - Background picker configuration.
* @returns Selected background fill value.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const bg = await reactElements.selectBackground({
* initialValue: { backgroundColor: '#fff', backgroundImage: '' },
* onChange: (value) => console.log('Preview:', value),
* });
* ```
*/
selectBackground(options: BackgroundPickerOptions): Promise;
/**
* Opens the text theme picker, a site theme combination of font and color.
*
* @param params - Picker options. See {@link SelectTextThemeParams}.
* @returns Selected text theme.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const theme = await reactElements.selectTextTheme({
* target: buttonRef.current,
* initialValue: { font: 'Heading 1', color: '#333' },
* });
* ```
*/
selectTextTheme(params: SelectTextThemeParams): Promise;
/**
* Retrieves the BI token for the component.
*
* @returns BI token string.
*
* @example
* ```ts
* import { reactElements } from '@wix/editor';
*
* const token = await reactElements.getBiToken();
* ```
*/
getBiToken(): Promise;
}