@wix/react-component-schema 1.4.0 → 1.6.0

package/src/__snapshots__/index.test.ts.snap

@@ -1,5 +1,417 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`react-component-schema dist > dist/editor-react-types.d.ts matches snapshot 1`] = `
+"declare module '@wix/editor-react-types' {
+import type { ReactElement } from 'react';
+
+/**
+ * Accessibility attributes.
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { A11y } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   a11y?: A11y;
+ * }
+ *
+ * const MyComponent = ({ a11y }: MyComponentProps) => (
+ *   <div
+ *     tabIndex={a11y?.tabIndex}
+ *     role={a11y?.role}
+ *     aria-label={a11y?.ariaLabel}
+ *   />
+ * );
+ * \`\`\`
+ */
+export interface A11y {
+    /** The \`tabindex\` attribute. Controls the component's position in keyboard focus order. */
+    tabIndex?: number;
+    /** The \`aria-level\` attribute. Defines the hierarchical level of a component within a structure. */
+    ariaLevel?: number;
+    /** The \`aria-expanded\` attribute. Indicates whether a collapsible component is expanded or collapsed. */
+    ariaExpanded?: boolean | 'false' | 'true';
+    /** The \`aria-disabled\` attribute. Indicates that the component is perceivable but disabled. */
+    ariaDisabled?: boolean | 'false' | 'true';
+    /** The \`aria-atomic\` attribute. Indicates whether assistive technologies should present the entire region as a whole. */
+    ariaAtomic?: boolean | 'false' | 'true';
+    /** The \`aria-hidden\` attribute. Hides the component from assistive technologies. */
+    ariaHidden?: boolean | 'false' | 'true';
+    /** The \`aria-busy\` attribute. Indicates the component is being modified and assistive technologies should wait. */
+    ariaBusy?: boolean | 'false' | 'true';
+    /** Whether the component supports multiline input. */
+    multiline?: boolean;
+    /** The \`aria-autocomplete\` attribute. Indicates the type of autocomplete behavior for an input. */
+    ariaAutocomplete?: 'none' | 'inline' | 'list' | 'both';
+    /** The \`aria-pressed\` attribute. Indicates the current "pressed" state of a toggle button. */
+    ariaPressed?: boolean | 'false' | 'mixed' | 'true';
+    /** The \`aria-haspopup\` attribute. Indicates the availability and type of an interactive popup component. */
+    ariaHaspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** The \`aria-relevant\` attribute. Indicates what notifications the user agent will trigger when the accessibility tree is modified. */
+    ariaRelevant?: 'additions' | 'additions text' | 'all' | 'removals' | 'text';
+    /** The \`role\` attribute. Defines the semantic role of the component. */
+    role?: string;
+    /** The \`aria-live\` attribute. Indicates that the component will be updated and describes the types of updates. */
+    ariaLive?: 'off' | 'assertive' | 'polite';
+    /** The \`aria-current\` attribute. Indicates the component that represents the current item within a container or set. */
+    ariaCurrent?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';
+    /** The \`aria-label\` attribute. Defines a string value that labels the component. */
+    ariaLabel?: string;
+    /** The \`aria-roledescription\` attribute. Defines a human-readable description for the role of the component. */
+    ariaRoledescription?: string;
+    /** The \`aria-describedby\` attribute. Identifies the element that describes this component. */
+    ariaDescribedby?: string;
+    /** The \`aria-labelledby\` attribute. Identifies the element that labels this component. */
+    ariaLabelledby?: string;
+    /** The \`aria-errormessage\` attribute. Identifies the element that provides an error message for this component. */
+    ariaErrormessage?: string;
+    /** The \`aria-owns\` attribute. Identifies a component to define a visual, functional, or contextual parent/child relationship. */
+    ariaOwns?: string;
+    /** The \`aria-controls\` attribute. Identifies the element whose contents or presence are controlled by this component. */
+    ariaControls?: string;
+    /** The HTML tag to render the component as (e.g. \`'h1'\`, \`'button'\`). */
+    tag?: string;
+    /** The \`aria-multiline\` attribute. Indicates whether a text box accepts multiple lines of input. */
+    ariaMultiline?: boolean | 'false' | 'true';
+    /** The \`aria-invalid\` attribute. Indicates the entered value does not conform to the expected format. */
+    ariaInvalid?: boolean | 'false' | 'true' | 'grammar' | 'spelling';
+}
+
+/** An adaptive streaming video source (HLS or DASH). */
+type AdaptiveVideoSource = {
+    /** The adaptive streaming format. */
+    format: 'hls' | 'dash';
+    /** The video URI. */
+    uri: string;
+    /** The fully resolved video URL. */
+    url: string;
+};
+
+/**
+ * An audio track from Wix Media.
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { Audio } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   audio?: Audio;
+ * }
+ * \`\`\`
+ */
+export type Audio = {
+    /** The fully resolved audio URL. */
+    url: string;
+    /** The audio artist name. */
+    artist?: string;
+    /** The audio track title. */
+    title?: string;
+    /** The audio duration in seconds. */
+    duration?: number;
+    /** The audio file name. */
+    name?: string;
+    /** All available audio sources at different quality levels and formats. */
+    audio?: Array<AudioSource>;
+};
+
+/** A single audio source file at a specific quality and format. */
+type AudioSource = {
+    /** The audio bitrate in kbps. */
+    audioBitrate: number;
+    /** The audio format (e.g. \`'mp3'\`, \`'ogg'\`). */
+    format: string;
+    /** The audio quality label. */
+    quality: string;
+    /** The fully resolved audio URL. */
+    url: string;
+};
+
+type Crop = Point & {
+    width: number;
+    height: number;
+};
+
+/**
+ * The text direction of the component.
+ * Maps to the HTML \`dir\` attribute.
+ * - \`'ltr'\` — left to right.
+ * - \`'rtl'\` — right to left.
+ * - \`'auto'\` — determined by content.
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { Direction } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   direction?: Direction;
+ * }
+ *
+ * const MyComponent = ({ direction = 'ltr' }: MyComponentProps) => (
+ *   <div dir={direction}>...</div>
+ * );
+ * \`\`\`
+ */
+export type Direction = 'rtl' | 'ltr' | 'auto';
+
+/**
+ * An image from Wix Media.
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { Image } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   image?: Image;
+ * }
+ *
+ * const MyComponent = ({ image }: MyComponentProps) => (
+ *   <img src={image?.url} alt={image?.alt} />
+ * );
+ * \`\`\`
+ */
+export type Image = {
+    /** The image URI. */
+    uri?: string;
+    /** The image URL. */
+    url: string;
+    /** The image file name. */
+    name?: string;
+    /** The image height in pixels. */
+    height?: number;
+    /** The image width in pixels. */
+    width?: number;
+    /** Whether the image is animated (e.g. GIF). */
+    animated?: boolean;
+    /** The crop region applied to the image. */
+    crop?: Crop;
+    /** The image quality, as a percentage from 0 to 100. */
+    quality?: number;
+    /** The image alt text for accessibility. */
+    alt?: string;
+};
+
+/**
+ * A link to a URL, used for navigation within components.
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { Link } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   link?: Link;
+ * }
+ * \`\`\`
+ */
+export type Link = {
+    /** The link URL. */
+    href?: string;
+    /**
+     * Where this link should open.
+     * - \`'_self'\` — opens in the same page.
+     * - \`'_blank'\` — opens in a new tab.
+     */
+    target?: LinkTarget;
+    /** The \`rel\` attribute of the link. Accepts LinkRel values separated by a space. */
+    rel?: string;
+};
+
+type LinkTarget = '_self' | '_blank';
+
+/**
+ * A local date string in ISO-8601 extended format (\`YYYY-MM-DD\`).
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { LocalDate } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   startDate?: LocalDate; // e.g. '2024-03-15'
+ * }
+ * \`\`\`
+ */
+export type LocalDate = string;
+
+/**
+ * A local time string in ISO-8601 extended format (\`hh:mm[:ss][.sss]\`).
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { LocalTime } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   openingTime?: LocalTime; // e.g. '09:00'
+ * }
+ * \`\`\`
+ */
+export type LocalTime = string;
+
+/**
+ * A single item in a menu, optionally containing nested sub-items.
+ */
+type MenuItem = {
+    /** A unique identifier for the menu item. */
+    id: string;
+    /** The display label shown to the user. */
+    label: string;
+    /** The navigation link for this menu item. */
+    link?: Link;
+    /** An optional container element rendered alongside the menu item. */
+    container?: ReactElement;
+    /** Nested child menu items, for building multi-level menus. */
+    items?: Array<MenuItem>;
+};
+
+/**
+ * A list of menu items.
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { MenuItems } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   items?: MenuItems;
+ * }
+ * \`\`\`
+ */
+export type MenuItems = Array<MenuItem>;
+
+type Point = {
+    x: number;
+    y: number;
+};
+
+/**
+ * Rich text content with resolved links.
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { RichText } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   description?: RichText;
+ * }
+ *
+ * const MyComponent = ({ description }: MyComponentProps) => (
+ *   <div>
+ *     {description?.html}
+ *     {description?.linkList.map((link) => (
+ *       <a key={link.href} href={link.href}>{link.href}</a>
+ *     ))}
+ *   </div>
+ * );
+ * \`\`\`
+ */
+export type RichText = {
+    /** The original rich text content. */
+    text: string;
+    /** The HTML content with all links resolved. */
+    html: string;
+    /** All links present in the rich text content. */
+    linkList: Array<Link>;
+};
+
+/**
+ * A vector art (SVG) asset from Wix Media.
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { VectorArt } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   icon?: VectorArt;
+ * }
+ * \`\`\`
+ */
+export type VectorArt = {
+    /** The SVG URI. */
+    uri: string;
+    /** The SVG \`viewBox\` attribute value. */
+    viewBox: string;
+    /** The SVG content box dimensions. */
+    contentBox: string;
+    /** A map of color IDs to their resolved color values, for themeable SVGs. */
+    colors: Record<string, string>;
+    /**
+     * The SVG content type, which determines how colors and theming are applied.
+     * - \`'shape'\` — a simple monochromatic shape.
+     * - \`'color'\` — a multi-color SVG.
+     * - \`'tint'\` — a single-color tintable SVG.
+     * - \`'ugc'\` — user-generated content.
+     * - \`'textpath'\` — text along a path.
+     */
+    contentType: 'shape' | 'color' | 'tint' | 'ugc' | 'textpath';
+    /** The raw SVG markup. */
+    svgContent: string;
+};
+
+/**
+ * A video from Wix Media, including all available sources and quality levels.
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { Video } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   video?: Video;
+ * }
+ * \`\`\`
+ */
+export type Video = {
+    /** The original video URI. */
+    uri: string;
+    /** All available quality-level sources for progressive playback. */
+    sources: Array<VideoSource>;
+    /** Adaptive streaming sources (HLS/DASH) for streaming playback. */
+    adaptiveSources: Array<AdaptiveVideoSource>;
+    /** Whether the video contains an audio track. */
+    hasAudio: boolean;
+    /** The video frame rate in frames per second. */
+    fps: number;
+    /** A poster image to display before the video plays. */
+    poster?: Image;
+};
+
+/** A set of video files for a specific quality level. */
+type VideoSource = {
+    /** The video quality level. */
+    quality: '1080p' | '720p' | '480p' | '360p';
+    /** The video width in pixels at this quality level. */
+    width: number;
+    /** The video height in pixels at this quality level. */
+    height: number;
+    /** The available file types for this quality level. */
+    types: Array<VideoSourceType>;
+};
+
+/** A single video file format for a given quality level. */
+type VideoSourceType = {
+    /** The video format. */
+    format: 'mp4' | 'mp4-luminance';
+    /** The video URI. */
+    uri: string;
+    /** The fully resolved video URL. */
+    url: string;
+};
+
+/**
+ * A URL with an \`http\` or \`https\` scheme.
+ *
+ * @example
+ * \`\`\`tsx
+ * import type { WebUrl } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   website?: WebUrl;
+ * }
+ * \`\`\`
+ */
+export type WebUrl = string;
+
+export { }
+}
+"
+`;
+
 exports[`react-component-schema dist > dist/index.d.ts matches snapshot 1`] = `
 "export declare interface A11y {
     /**
@@ -262,6 +674,35 @@ declare interface BreakpointPresetStyleOverrides {
     small?: PresetStyleOverrides;
 }
 
+declare interface ClientResources {
+    /**
+     * A URL to an ESM javascript bundle. It's default export should be the component
+     * @format WEB_URL
+     */
+    componentUrl?: string;
+    /**
+     * A URL to the CSS file that is the default layout and style for the component
+     * @format WEB_URL
+     */
+    cssUrl?: string | null;
+    /**
+     * A list of service dependencies required by the component, example: ['@wix/environment']
+     * @maxLength 80
+     * @maxSize 20
+     * @deprecated A list of service dependencies required by the component, example: ['@wix/environment']
+     * @replacedBy dependencies
+     * @targetRemovalDate 2025-12-30
+     */
+    serviceDependencies?: string[];
+    /**
+     * A module specifier for the component’s react code.
+     * @maxLength 100
+     */
+    moduleSpecifier?: string | null;
+    /** Dependencies on services and contexts */
+    dependencies?: EditorDependencies;
+}
+
 /** Represents the information needed for code panels */
 declare interface CodePanel {
     /**
@@ -1301,6 +1742,30 @@ declare enum DataType {
     onSubmit = "onSubmit"
 }
 
+declare interface DefaultPresets {
+    /**
+     * Default preset ID in small (mobile) breakpoint
+     * @minLength 1
+     * @maxLength 50
+     */
+    small?: string | null;
+    /**
+     * Deprecated, use default - Default preset ID in large (desktop) breakpoint
+     * @minLength 1
+     * @maxLength 50
+     * @deprecated Deprecated, use default - Default preset ID in large (desktop) breakpoint
+     * @replacedBy default
+     * @targetRemovalDate 2025-12-02
+     */
+    large?: string | null;
+    /**
+     * Default preset ID
+     * @minLength 1
+     * @maxLength 50
+     */
+    default?: string | null;
+}
+
 export declare interface Display {
     /**
      * list of display values in case we want to reduce the abilities exposed to the User
@@ -1519,6 +1984,27 @@ declare enum DisplayValueEnumDisplayValue {
     listItem = "listItem"
 }
 
+declare interface EditorDependencies {
+    /**
+     * A list of service dependencies required by the component, example: ['@wix/environment']
+     * @maxLength 80
+     * @maxSize 20
+     */
+    serviceDependencies?: string[];
+    /**
+     * Dependencies on context providers in order to work
+     * @maxLength 80
+     * @maxSize 20
+     */
+    contextDependencies?: string[];
+    /**
+     * Dependencies on components that we want as externals in our bundle, example: wixEditorElements.AppWidget
+     * @maxLength 80
+     * @maxSize 20
+     */
+    componentDependencies?: string[];
+}
+
 export declare type EditorElement = EditorElement_2 & RequiredFields<EditorElement_2, 'selector' | 'displayName'> & {
     presets?: Record<string, PresetItem>;
 };
@@ -1609,6 +2095,41 @@ declare interface EditorFunction {
     /* Excluded from this release type: deprecated */
 }
 
+/** The full model for an imported component set in DEV Center */
+export declare interface EditorReactComponent {
+    /**
+     * The type of component to present in the Page tree, will be prefixed with AppSlug
+     * @maxLength 100
+     * @minLength 1
+     */
+    type?: string;
+    /**
+     * The public description of the component do display
+     * @maxLength 300
+     * @minLength 3
+     */
+    description?: string;
+    /** List of component resources. This comprises any runtime code we need to load and execute for the component. */
+    resources?: Resources;
+    /** The configuration describing the component abilities and behaviors on the Editor stage */
+    editorElement?: EditorElement_2;
+    /** The installation settings of the component */
+    installation?: InstallationInfo;
+    /** Module configuration for NPM-based component */
+    moduleConfiguration?: EditorReactComponentModuleConfiguration;
+}
+
+declare interface EditorReactComponentModuleConfiguration {
+    /** Public NPM package details */
+    package?: NPMPackage;
+    /** The component export details */
+    component?: NPMPackageEntry;
+    /** The component CSS File location */
+    cssFile?: NPMPackageEntry;
+    /** The component SSR version export details */
+    server?: NPMPackageEntry;
+}
+
 declare enum EffectGroup {
     UNKNOWN_EFFECT_GROUP = "UNKNOWN_EFFECT_GROUP",
     /** Effects that are applied to the background layer of the component */
@@ -1799,6 +2320,14 @@ declare enum FilterFunction {
     hueRotate = "hueRotate"
 }
 
+/** Fixed position builder for component installation */
+declare interface FixedPositionBuilder {
+    /** Vertical position in the browser window */
+    vertical?: Vertical;
+    /** Horizontal position in the browser window */
+    horizontal?: Horizontal;
+}
+
 export declare interface Font {
     /**
      * Stores the font-style property of the font shorthand
@@ -2031,6 +2560,13 @@ declare interface HelpArticleArticleTypeOneOf {
     url?: string | null;
 }
 
+declare enum Horizontal {
+    NONE = "NONE",
+    LEFT = "LEFT",
+    CENTER = "CENTER",
+    RIGHT = "RIGHT"
+}
+
 export declare interface Image {
     /** media manager categories to open media manager filtered by the component needs */
     category?: ImageCategoryTypes;
@@ -2127,6 +2663,23 @@ export declare interface InlineElement {
     helpArticle?: HelpArticle;
 }
 
+declare interface InstallationInfo extends InstallationInfoTargetContainerOneOf {
+    /** Which static container should the component be installed at */
+    staticContainer?: StaticContainer;
+    /** Default presets per breakpoint with which the component should be installed */
+    presets?: DefaultPresets;
+    /** Initial size with which the component should be added to the stage */
+    initialSize?: ComponentInitialSize;
+    /** Fixed position options for the component. If set, the component will be pinned to the specified position, and can't be unpinned */
+    fixedPosition?: FixedPositionBuilder;
+}
+
+/** @oneof */
+declare interface InstallationInfoTargetContainerOneOf {
+    /** Which static container should the component be installed at */
+    staticContainer?: StaticContainer;
+}
+
 export declare const INTERACTIONS: {
     TRIGGER_TYPE: typeof InteractionsTrigger;
     EFFECT_GROUP: typeof EffectGroup;
@@ -2273,6 +2826,34 @@ export declare enum NATIVE_STATE_TYPE {
     invalid = "invalid"
 }
 
+declare interface NPMPackage {
+    /**
+     * The npm package name
+     * @minLength 1
+     * @maxLength 214
+     */
+    name?: string;
+    /**
+     * the SEMVER package version
+     * @minLength 1
+     * @maxLength 214
+     */
+    version?: string;
+}
+
+declare interface NPMPackageEntry {
+    /**
+     * optional path to file in package
+     * @maxLength 200
+     */
+    path?: string | null;
+    /**
+     * The named export key to import. If empty, the default export is used.
+     * @maxLength 200
+     */
+    exportKey?: string | null;
+}
+
 export declare enum OverrideType {
     UNKNOWN = "UNKNOWN",
     DEV = "DEV",
@@ -2624,6 +3205,38 @@ declare enum ResizeDirection {
     none = "none"
 }
 
+declare interface Resource {
+    /**
+     * A URL to an ESM javascript bundle
+     * @format WEB_URL
+     */
+    url?: string;
+}
+
+declare interface Resources {
+    /** The bundle we will load and render in the browser in the site */
+    client?: ClientResources;
+    /**
+     * An optional client definition of the component we will load and render in the editor, *it replaces the client bundle.*
+     * The  main use case is to control the live site component and enable different experiences in the editor.
+     * For example, supporting \`states\` manipulation:
+     * Show calendar in the editor
+     * Open drop down in the editor
+     */
+    editor?: ClientResources;
+    /** The bundle for SSR, should not include any DOM API references */
+    server?: Resource;
+    /** The optional component SDK to expose to Velo Users to interact with the component */
+    sdk?: Resource;
+    /** Details for how to load translations for the component */
+    translations?: TranslationResources;
+    /** The optional interactions configuration JSON file */
+    interactions?: Resource;
+    /* Excluded from this release type: viewerReducedModel */
+    /* Excluded from this release type: schemaRefsUrl */
+    /* Excluded from this release type: viewerRuntimeCss */
+}
+
 /** rich text data type allow manipulation of text with html & inline styles */
 declare interface RichText {
     /**
@@ -2761,6 +3374,14 @@ declare enum SizingType {
 
 export declare type States = NonNullable<EditorElement_2['states']>;
 
+declare enum StaticContainer {
+    UNKNOWN_CONTAINER = "UNKNOWN_CONTAINER",
+    /** Widget should be installed in the homepage */
+    HOMEPAGE = "HOMEPAGE",
+    /** Show widget on all pages */
+    GLOBAL_PAGE = "GLOBAL_PAGE"
+}
+
 /** DEPRECATED - use CssPropertyAction or CssCustomPropertyAction */
 declare interface StyleAction {
     /**
@@ -3188,6 +3809,20 @@ export declare interface TextGroup {
     a11y?: string | null;
 }
 
+declare interface TranslationResources {
+    /**
+     * The URL that we will add the language to for fetching translations, example: \`https://somecdn.com/translations/\`
+     * @format WEB_URL
+     */
+    basePath?: string;
+    /**
+     * The list of supported languages according to the [ISO-639-1 specification](https://en.wikipedia.org/wiki/ISO_639-1)
+     * @format LANGUAGE
+     * @maxSize 37
+     */
+    languages?: string[];
+}
+
 export declare interface VectorArt {
     /** media manager categories to open media manager filtered by the component needs */
     category?: VectorArtCategoryTypes;
@@ -3221,6 +3856,13 @@ declare interface VectorArtOverrides {
     category?: VectorArtCategoryTypes;
 }
 
+declare enum Vertical {
+    NONE = "NONE",
+    TOP = "TOP",
+    CENTER = "CENTER",
+    BOTTOM = "BOTTOM"
+}
+
 export declare interface Video {
     /** media manager categories to open media manager filtered by the component needs */
     category?: VideoCategoryTypes;