@wix/public-editor-platform-interfaces 1.59.0 → 1.61.0

package/dist/Element.d.ts

@@ -0,0 +1,501 @@
+import type { ElementData, ElementDataInput, ElementDataValue, ElementLink } 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, SelectColorParams, SelectTextThemeParams } from './sdk/pickers';
+import type { BackgroundPickerOptions } from './Inputs';
+export type { IPickerModes, IFontFamily, IFontWeight, IFontFamilyAndWeight, ISelectLinkSharedOptions, IPanelOptions, SelectFontParams, SelectFontFamilyParams, SelectFontWeightParams, SelectMediaParams, SelectLinkParams, SelectColorParams, SelectTextThemeParams, };
+/**
+ * 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 <button onClick={handleClick}>Update Title</button>;
+ * }
+ * ```
+ */
+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<ElementDataDefinitions>;
+    /**
+     * 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<T extends ElementData = ElementData>(): Promise<T>;
+    /**
+     * 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<ElementDataValue>;
+    /**
+     * 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<T extends ElementData = ElementData>(values: ElementDataInput<T>): Promise<void>;
+    /**
+     * 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<ElementStyleDefinitions>;
+    /**
+     * 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<ElementStyles>;
+    /**
+     * 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<void>;
+    /**
+     * 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<void>;
+    /**
+     * 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<ElementPresetDefinitions>;
+    /**
+     * 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<string | null>;
+    /**
+     * 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<void>;
+    /**
+     * 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<string | null>;
+    /**
+     * 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<void>;
+    /**
+     * 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<ElementStateDefinitions>;
+    /**
+     * 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<Record<string, unknown>>;
+    /**
+     * 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<string>;
+    /**
+     * 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';
+        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<number>;
+    /**
+     * 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<void>;
+    /**
+     * 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<void>;
+    /**
+     * 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<IFontFamilyAndWeight | undefined>;
+    /**
+     * 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<IFontFamily | undefined>;
+    /**
+     * 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<IFontWeight>;
+    /**
+     * 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<unknown>;
+    /**
+     * 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<ElementLink | null | undefined>;
+    /**
+     * 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<string | undefined>;
+    /**
+     * 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<unknown>;
+    /**
+     * 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<unknown>;
+    /**
+     * 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<string>;
+}

package/dist/Element.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { WixSDKTypes };
 export { ComponentRef } from './ComponentRef';
 export { PlatformRealtimeChannels } from './Channels';
 export { IElement } from './Elements';
+export type { IElementSDK } from './Element';
 export { EventType } from './EventType';
 export { AccessToken } from './Token';
 export { DsItem } from './DataItem';

package/dist/sdk/index.d.ts

@@ -2,5 +2,6 @@ export * from './data';
 export * from './styles';
 export * from './definitions';
 export * from './css-properties';
+export * from './pickers';
 export * from './pages';
 export * from './routers';

package/dist/sdk/index.js

@@ -18,5 +18,6 @@ __exportStar(require("./data"), exports);
 __exportStar(require("./styles"), exports);
 __exportStar(require("./definitions"), exports);
 __exportStar(require("./css-properties"), exports);
+__exportStar(require("./pickers"), exports);
 __exportStar(require("./pages"), exports);
 __exportStar(require("./routers"), exports);

package/dist/sdk/pickers.d.ts

@@ -0,0 +1,205 @@
+import type { ElementLink } from './data';
+/**
+ * Each {@link IElementSDK | `reactElements`} `select*` method accepts one of two types of arguments:
+ * a manifest key for automatic editor handling, or explicit options to manage the value yourself.
+ * Use manifest-key mode to let the editor connect the picker to a manifest-backed data or style field.
+ * Use explicit-options mode when your panel owns the selected value and handles callbacks itself.
+ *
+ * @see IElementSDK.selectFont
+ * @see IElementSDK.selectFontFamily
+ * @see IElementSDK.selectFontWeight
+ * @see IElementSDK.selectMedia
+ * @see IElementSDK.selectLink
+ * @see IElementSDK.selectColor
+ */
+export interface IPickerModes {
+}
+/** A font family and weight selection returned from {@link SelectFontParams} or {@link SelectFontFamilyParams}. */
+export interface IFontFamily {
+    /**
+     * The font family name. Font options vary depending on site theme, custom uploads, and which fonts are available in the editor, such as Google fonts. Call {@link SelectFontParams} or
+     * {@link SelectFontFamilyParams} to get the `family` from the Wix user's selection rather
+     * than hard coding names in your panel.
+     */
+    family: string;
+    /**
+     * The font weight. Either a numeric string from `'100'`–`'900'` or a named value such as `'normal'` or `'bold'`.
+     * Available weight options depend on the selected font family. Call {@link SelectFontParams} or {@link SelectFontWeightParams}
+     * to get the available weight options based on the Wix user's selection.
+     */
+    weight: string;
+}
+/** Represents a font weight value. */
+export interface IFontWeight {
+    /**
+     * The font weight. Either a numeric string from `'100'`–`'900'` or a named value such as `'normal'` or `'bold'`.
+     * Available weight options depend on the selected font family. Call {@link SelectFontParams} or {@link SelectFontWeightParams}
+     * to get the available weight options based on the Wix user's selection.
+     */
+    weight: string;
+}
+/** Combination of font family and weight properties. */
+export type IFontFamilyAndWeight = IFontFamily & IFontWeight;
+/**
+ * Extra settings passed as `options` when calling `reactElements.selectLink`.
+ */
+export type ISelectLinkSharedOptions = {
+    /**
+     * Optional BI tag for where the link picker was opened from in the panel. Use a
+     * kebab-case string specific to your app, for example `header-cta` or `settings-link`.
+     */
+    origin?: string;
+};
+/**
+ * How the editor positions a floating picker popup relative to the element in the panel that caused the picker to open.
+ */
+export type IPanelOptions = {
+    /** Preferred side or corner for the picker popup to appear relative to the element in the panel that caused the picker to open. */
+    placement?: 'top' | 'bottom' | 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';
+    /** Extra vertical offset in pixels from the default position beside the element in the panel that caused the picker to open. */
+    YShift?: number;
+};
+/**
+ * Options for {@link IElementSDK.selectFont | `reactElements.selectFont()`}.
+ * Pass either a manifest key or explicit options. See {@link IPickerModes}.
+ */
+export type SelectFontParams = {
+    /** Pass a manifest key: field connected to `styleItemKey` in the manifest. See {@link IPickerModes}. */
+    styleItemKey: string;
+} | {
+    /** Font family and weight shown when the picker opens. See {@link IPickerModes}. */
+    selectedFontFamily?: IFontFamilyAndWeight;
+    /** DOM element in your panel that caused the picker to open. */
+    target?: HTMLElement;
+    /** Where the picker popup appears relative to `target`. */
+    panelOptions?: IPanelOptions;
+    /** Called when the user confirms a selection. */
+    onChange?: (value: IFontFamilyAndWeight) => void;
+    /** Called while the user is hovering over options before confirming. */
+    onPreview?: (value: IFontFamilyAndWeight) => void;
+};
+/**
+ * Options for {@link IElementSDK.selectFontFamily | `reactElements.selectFontFamily()`}.
+ * Pass either a manifest key or explicit options. See {@link IPickerModes}.
+ */
+export type SelectFontFamilyParams = {
+    /** Pass a manifest key: field connected to `styleItemKey` in the manifest. See {@link IPickerModes}. */
+    styleItemKey: string;
+} | {
+    /** Font family shown when the picker opens. See {@link IPickerModes}. */
+    selectedFontFamily?: IFontFamily;
+    /** DOM element in your panel that caused the picker to open. */
+    target?: HTMLElement;
+    /** Where the picker popup appears relative to `target`. */
+    panelOptions?: IPanelOptions;
+    /** Called when the user confirms a selection. */
+    onChange?: (value: IFontFamily) => void;
+    /** Called while the user is hovering over options before confirming. */
+    onPreview?: (value: IFontFamily) => void;
+};
+/**
+ * Options for {@link IElementSDK.selectFontWeight | `reactElements.selectFontWeight()`}.
+ * Pass either a manifest key or explicit options. See {@link IPickerModes}.
+ */
+export type SelectFontWeightParams = {
+    /** Pass a manifest key: field connected to `fontFamilyStyleItemKey` in the manifest. See {@link IPickerModes}. */
+    fontFamilyStyleItemKey: string;
+    /** Pass a manifest key: field connected to `fontWeightStyleItemKey` in the manifest. See {@link IPickerModes}. */
+    fontWeightStyleItemKey: string;
+} | {
+    /** Pass a manifest key: field connected to `fontStyleItemKey` in the manifest. See {@link IPickerModes}. */
+    fontStyleItemKey: string;
+} | {
+    /** Font family used to filter available weights. Omit to show all weights. See {@link IPickerModes}. */
+    fontFamily?: IFontFamily;
+    /** DOM element in your panel that caused the picker to open. */
+    target?: HTMLElement;
+    /** Called when the user selects a weight. */
+    onChange?: (value: IFontWeight) => void;
+};
+/**
+ * Options for {@link IElementSDK.selectMedia | `reactElements.selectMedia()`}.
+ * Pass either a manifest key or explicit options. See {@link IPickerModes}. */
+export type SelectMediaParams = {
+    /** Pass a manifest key: field connected to `dataItemKey` in the manifest. See {@link IPickerModes}. */
+    dataItemKey: string;
+} | {
+    /** Whether the user can select multiple media items at once. See {@link IPickerModes}. */
+    isMultiSelect?: boolean;
+    /** Restricts the media library to a specific category, for example `'image'`. */
+    category?: string;
+};
+/**
+ * Options for {@link IElementSDK.selectLink | `reactElements.selectLink()`}.
+ * Pass either a manifest key or explicit options. See {@link IPickerModes}. */
+export type SelectLinkParams = {
+    /** Pass a manifest key: field connected to `dataItemKey` in the manifest. See {@link IPickerModes}. */
+    dataItemKey: string;
+    /** Optional settings. See {@link ISelectLinkSharedOptions}. */
+    options?: ISelectLinkSharedOptions;
+} | {
+    /** Existing link to pre-populate the picker with. See {@link IPickerModes}. */
+    value?: ElementLink;
+    /** Optional settings such as BI attribution and allowed link types. See {@link ISelectLinkSharedOptions}. */
+    options?: ISelectLinkSharedOptions & {
+        /**
+         * Restricts the picker to specific link types.
+         * For example: `['ExternalLink', 'PageLink']`.
+         */
+        linkTypes?: string[];
+    };
+};
+/**
+ * Options for {@link IElementSDK.selectColor | `reactElements.selectColor()`}.
+ * Pass either a manifest key or explicit options. See {@link IPickerModes}. */
+export type SelectColorParams = {
+    /** Pass a manifest key: field connected to `styleItemKey` in the manifest. See {@link IPickerModes}. */
+    styleItemKey: string;
+} | {
+    /** Initial color when the picker opens, as a CSS color string. See {@link IPickerModes}. */
+    initialValue?: string;
+    /**
+     * Color modes to offer. Defaults to `['solid']`.
+     * Include `'gradient'` to enable gradient selection.
+     */
+    mode?: ('solid' | 'gradient')[];
+    /** Whether to show the site's brand color palette. */
+    showBrand?: boolean;
+    /** Whether to show the custom color input. */
+    showCustom?: boolean;
+    /** Whether to show the advanced settings panel. */
+    showAdvancedSettings?: boolean;
+    /** Whether to show the opacity / alpha slider. */
+    showOpacity?: boolean;
+    /** Screen-space position `{ x, y }` where the color picker should open. */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /** BI tracking metadata. `origin` identifies the UI surface that opened the picker. */
+    biData?: {
+        origin: string;
+    };
+    /** Called on every color change while the picker is open. */
+    onChange?: (color: string) => void;
+    /** Called when the user explicitly confirms a color selection. */
+    onApply?: (color: string) => void;
+    /** Called when the picker is closed, whether or not a color was confirmed. */
+    onClose?: () => void;
+    /** Called when the user cancels without confirming. */
+    onCancel?: () => void;
+};
+/**
+ * Options for `reactElements.selectTextTheme()` from a custom panel.
+ */
+export type SelectTextThemeParams = {
+    /** DOM element in your panel that caused the picker to open. */
+    target?: HTMLElement;
+    /** Initial values to pre-populate the picker with. */
+    initialValue?: {
+        /** Initial font value, as CSS font shorthand or a theme token. */
+        font?: string;
+        /** Initial color value, as a CSS color string or a theme token. */
+        color?: string;
+    };
+};

package/dist/sdk/pickers.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/public-editor-platform-interfaces",
-  "version": "1.59.0",
+  "version": "1.61.0",
   "license": "UNLICENSED",
   "contributors": [
     {
@@ -23,7 +23,7 @@
     "*.{js,ts}": "yarn lint"
   },
   "dependencies": {
-    "@wix/app-extensions": "^1.0.53",
+    "@wix/app-extensions": "^1.0.56",
     "@wix/sdk-types": "^1.17.8"
   },
   "devDependencies": {
@@ -52,5 +52,5 @@
       ]
     }
   },
-  "falconPackageHash": "2d496dbb3b0fd8b3f2db09f96bb67f428f2d4a73f9de4f65b86c67fb"
+  "falconPackageHash": "97b6c08c1638a39422bf3955030014583388e61c0d733ab78a8f1de4"
 }