@wix/editor 1.562.0 → 1.563.0

package/dist/cjs/index.js

@@ -640,9 +640,11 @@ class ElementSDKShape extends BaseSDKShape {
     );
   }
   /**
-   * Retrieves the data item definitions declared in the component's manifest.
+   * Lists the data fields defined on the selected component's manifest.
    *
-   * @returns Data item definitions keyed by data item key.
+   * Each key in the result is a valid **`dataItemKey`** for `getData`, `setData`, and `getResolvedData`.
+   *
+   * @returns Definitions keyed by `dataItemKey`.
    *
    * @example
    * ```ts
@@ -681,19 +683,21 @@ class ElementSDKShape extends BaseSDKShape {
     );
   }
   /**
-   * Retrieves the resolved value of a specific data item.
+   * Returns one data field from the selected component by **`dataItemKey`**.
+   *
+   * A **`dataItemKey`** is the property name of a data field in that component's manifest — the same names
+   * returned from `getDataDefinitions`. Example: `'heroImage'` for a field declared under `editorElement.data`.
    *
-   * Unlike {@link getData}, this method returns the fully resolved value
-   * for a single data item.
+   * `getData` returns all fields at once. This method returns only the field you name.
    *
-   * @param options - Object containing the `dataItemKey` to resolve.
-   * @returns Resolved value for the specified data item.
+   * @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 resolved = await reactElements.getResolvedData({
+   * const hero = await reactElements.getResolvedData({
    *   dataItemKey: 'heroImage',
    * });
    * ```
@@ -735,7 +739,7 @@ class ElementSDKShape extends BaseSDKShape {
   /**
    * Retrieves the preset definitions declared in the component's manifest.
    *
-   * @returns Preset definitions keyed by preset key.
+   * @returns An object mapping each preset key to its definition.
    *
    * @example
    * ```ts
@@ -842,7 +846,7 @@ class ElementSDKShape extends BaseSDKShape {
     );
   }
   /**
-   * Retrieves the currently active state for the component.
+   * Retrieves the active state for the component.
    *
    * @returns Key of the active state, or `null` if the default state is active.
    *
@@ -888,7 +892,7 @@ class ElementSDKShape extends BaseSDKShape {
   /**
    * Retrieves the state definitions declared in the component's manifest.
    *
-   * @returns State definitions keyed by state key.
+   * @returns An object mapping each state key to its definition.
    *
    * @example
    * ```ts
@@ -937,22 +941,21 @@ class ElementSDKShape extends BaseSDKShape {
     );
   }
   /**
-   * Opens the font picker for selecting a font family and weight.
+   * Opens the font picker for selecting a font family and weight from a custom panel.
    *
-   * Pass `styleItemKey` to bind the picker to a manifest style item,
-   * or pass manual options to handle the selection via callbacks.
+   * Pass `target` and `panelOptions` to position the popup next to the control that opened it.
+   * Use `onChange` / `onPreview` to handle the selection; the editor does not write to the manifest for you.
    *
-   * @param params - `styleItemKey` for manifest binding, or manual picker options.
+   * @param params - Picker options.
    * @returns Selected font family and weight, or `undefined` if dismissed.
    *
    * @example
    * ```ts
    * import { reactElements } from '@wix/editor';
    *
-   * const font = await reactElements.selectFont({ styleItemKey: 'headingFont' });
-   *
    * const font = await reactElements.selectFont({
    *   selectedFontFamily: { family: 'Arial', weight: '400' },
+   *   target: buttonRef.current,
    *   onChange: (value) => console.log('Selected:', value),
    * });
    * ```
@@ -974,21 +977,20 @@ class ElementSDKShape extends BaseSDKShape {
     }
   }
   /**
-   * Opens the font family picker for selecting a font family without
-   * weight options. Works the same as {@link selectFont} but without
-   * the weight selector.
+   * Opens the font family picker without weight selection, from a custom panel.
+   *
+   * Same pattern as {@link selectFont}: `target`, `panelOptions`, and callbacks.
    *
-   * @param params - `styleItemKey` for manifest binding, or manual picker options.
+   * @param params - Picker options.
    * @returns Selected font family, or `undefined` if dismissed.
    *
    * @example
    * ```ts
    * import { reactElements } from '@wix/editor';
    *
-   * const font = await reactElements.selectFontFamily({ styleItemKey: 'bodyFont' });
-   *
    * const font = await reactElements.selectFontFamily({
    *   selectedFontFamily: { family: 'Helvetica', weight: '400' },
+   *   target: buttonRef.current,
    *   onChange: (value) => console.log('Selected:', value.family),
    * });
    * ```
@@ -1010,21 +1012,15 @@ class ElementSDKShape extends BaseSDKShape {
     }
   }
   /**
-   * Opens the media picker for selecting images, videos, or other media
-   * from the Wix Media Manager.
-   *
-   * Pass `dataItemKey` to bind the picker to a manifest data item,
-   * or pass manual options to configure the picker.
+   * Opens the media picker for selecting images, videos, or other media from a custom panel.
    *
-   * @param params - `dataItemKey` for manifest binding, or manual picker options.
+   * @param params - Picker options.
    * @returns Selected media items.
    *
    * @example
    * ```ts
    * import { reactElements } from '@wix/editor';
    *
-   * const media = await reactElements.selectMedia({ dataItemKey: 'heroImage' });
-   *
    * const media = await reactElements.selectMedia({
    *   isMultiSelect: true,
    *   category: 'image',
@@ -1041,20 +1037,15 @@ class ElementSDKShape extends BaseSDKShape {
     );
   }
   /**
-   * Opens the link picker for creating or editing a link.
-   *
-   * Pass `dataItemKey` to bind the picker to a manifest data item,
-   * or pass a `value` and optional `linkTypes` to configure manually.
+   * Opens the link picker for creating or editing a link from a custom panel.
    *
-   * @param params - `dataItemKey` for manifest binding, or manual picker options.
+   * @param params - Picker options.
    * @returns Selected link, or `null`/`undefined` if dismissed.
    *
    * @example
    * ```ts
    * import { reactElements } from '@wix/editor';
    *
-   * const link = await reactElements.selectLink({ dataItemKey: 'buttonLink' });
-   *
    * const link = await reactElements.selectLink({
    *   value: currentLink,
    *   options: { linkTypes: ['ExternalLink', 'PageLink'] },
@@ -1071,20 +1062,15 @@ class ElementSDKShape extends BaseSDKShape {
     );
   }
   /**
-   * Opens the color picker for selecting a color.
-   *
-   * Pass `styleItemKey` to bind the picker to a manifest style item,
-   * or pass manual options to configure the picker.
+   * Opens the color picker for selecting a color from a custom panel.
    *
-   * @param params - `styleItemKey` for manifest binding, or manual picker options.
+   * @param params - Picker options.
    * @returns Selected color value, or `undefined` if dismissed.
    *
    * @example
    * ```ts
    * import { reactElements } from '@wix/editor';
    *
-   * const color = await reactElements.selectColor({ styleItemKey: 'backgroundColor' });
-   *
    * const color = await reactElements.selectColor({
    *   initialValue: '#ff0000',
    *   mode: ['solid', 'gradient'],
@@ -1134,13 +1120,9 @@ class ElementSDKShape extends BaseSDKShape {
     );
   }
   /**
-   * Opens the font weight picker for selecting a font weight for a specified
-   * font family.
-   *
-   * Pass manifest style item keys to bind the picker, or pass manual
-   * options to handle the selection via callbacks.
+   * Opens the font weight picker for a specified font family, from a custom panel.
    *
-   * @param params - Manifest style item keys, or manual picker options.
+   * @param params - Picker options.
    * @returns Selected font weight.
    *
    * @example
@@ -1148,12 +1130,8 @@ class ElementSDKShape extends BaseSDKShape {
    * import { reactElements } from '@wix/editor';
    *
    * const weight = await reactElements.selectFontWeight({
-   *   fontFamilyStyleItemKey: 'headingFontFamily',
-   *   fontWeightStyleItemKey: 'headingFontWeight',
-   * });
-   *
-   * const weight = await reactElements.selectFontWeight({
    *   fontFamily: { family: 'Arial', weight: '400' },
+   *   target: buttonRef.current,
    *   onChange: (value) => console.log('Selected weight:', value.weight),
    * });
    * ```
@@ -1170,11 +1148,9 @@ class ElementSDKShape extends BaseSDKShape {
     };
   }
   /**
-   * Opens the text theme picker for selecting a predefined text theme
-   * (a combination of font and color from the site's theme).
+   * Opens the text theme picker from a custom panel — a site theme combination of font and color.
    *
-   * @param params - Text theme picker configuration.
-   * @param params.target - HTML element to anchor the picker to.
+   * @param params - Picker options. Pass `target` for the element in your panel that opened the picker.
    * @param params.initialValue - Initial font and color values.
    * @returns Selected text theme.
    *
@@ -1183,6 +1159,7 @@ class ElementSDKShape extends BaseSDKShape {
    * import { reactElements } from '@wix/editor';
    *
    * const theme = await reactElements.selectTextTheme({
+   *   target: buttonRef.current,
    *   initialValue: { font: 'Heading 1', color: '#333' },
    * });
    * ```