unlayer-types 1.5.67 → 1.6.0

package/embed.d.ts

@@ -121,7 +121,13 @@ declare module "editor/components/editors/types" {
             stockImages?: boolean;
             uploadMaxSize?: number;
         };
-        item: object;
+        item: {
+            id: string;
+            type?: string;
+            slug?: string;
+            location?: Location;
+            values?: Record<string, any>;
+        };
         project: object;
         onImageClick?: (url: string) => void;
     }
@@ -183,15 +189,15 @@ declare module "editor/components/editors/types" {
     } : T;
 }
 declare module "state/types/index" {
+    import * as Ariakit from '@ariakit/react';
     import { MutableRefObject, ReactInstance } from 'react';
-    import { InputType } from 'reactstrap/lib/Input';
     import { State as Design } from '../../state/reducer/design';
     import { CollaborationThread } from "editor/components/editors/types";
+    import { Theme } from '../../editor/themes/types';
     export type DesignMode = 'live' | 'edit';
+    export type Device = 'desktop' | 'mobile' | 'tablet';
     export type DisplayMode = 'web' | 'email' | 'popup' | 'document';
     export type Variant = 'amp' | null;
-    export type Device = 'desktop' | 'mobile' | 'tablet';
-    export type Theme = 'light' | 'dark';
     export type Ui = 'none' | 'visual' | 'classic';
     export interface MergeTag {
         name: string;
@@ -249,7 +255,7 @@ declare module "state/types/index" {
         defaultValue?: string | LinkTypeFieldOption[] | undefined;
         enabled?: boolean;
         placeholderText?: string;
-        inputType?: InputType;
+        inputType?: Ariakit.FormInputProps['type'];
         isClearable?: boolean;
         isCreatable?: boolean;
         isMulti?: boolean;
@@ -391,7 +397,7 @@ declare module "state/types/index" {
     };
     export type Rule = {
         id: string;
-        icon: string | undefined;
+        icon: string | string[] | undefined;
         title: string;
         description: string;
         severity: 'ERROR' | 'WARNING';
@@ -443,21 +449,29 @@ declare module "state/types/index" {
         }[];
     };
     export type AppearanceConfig = {
-        theme: Theme;
-        panels: {
-            tools: {
-                dock: 'left' | 'right';
-                collapsible: boolean;
-                tabs: {
-                    body: {
-                        visible: boolean;
+        actionBar?: {
+            placement?: 'top' | 'bottom' | 'top_left' | 'top_right' | 'bottom_left' | 'bottom_right' | undefined;
+        };
+        features?: {
+            preview?: boolean;
+        };
+        loader?: {
+            url?: string | undefined;
+            html?: string | undefined;
+            css?: string | undefined;
+        };
+        panels?: {
+            tools?: {
+                dock?: 'left' | 'right';
+                collapsible?: boolean;
+                tabs?: {
+                    body?: {
+                        visible?: boolean;
                     };
                 };
             };
         };
-        features: {
-            preview: boolean;
-        };
+        theme?: Theme['name'] | 'light' | 'dark';
     };
     export interface ToolConfig {
         enabled?: boolean | undefined;
@@ -481,6 +495,7 @@ declare module "embed/Config" {
     import { FontList } from "engine/config/fonts";
     import { TextDirection } from "engine/config/intl";
     import { AppearanceConfig, Audit, Device, DisplayConditions, DisplayMode, Fonts, JSONTemplate, LinkTypes, LinkTypesSharedConfig, MergeTags, MergeTagsConfig, MergeTagsValues, SpecialLinks, Tabs, ToolsConfig, User } from "state/types/index";
+    import { DeepPartial } from "editor/components/editors/types";
     export interface Config {
         id?: string;
         className?: string;
@@ -522,7 +537,7 @@ declare module "embed/Config" {
         locale?: string;
         textDirection?: TextDirection;
         translations?: object;
-        appearance?: AppearanceConfig;
+        appearance?: DeepPartial<AppearanceConfig>;
         features?: object;
         designTagsConfig?: object;
         mergeTagsConfig?: MergeTagsConfig;
@@ -657,12 +672,15 @@ declare module "embed/Frame" {
 }
 declare module "editor/components/common/Modal" {
     import React from 'react';
-    import _Modal from 'react-modal';
-    type Props = _Modal['props'] & {
-        className?: string;
+    import { Props as ReactModalProps } from 'react-modal';
+    export interface ModalProps extends Omit<ReactModalProps, 'style'> {
         children: React.ReactNode;
-    };
-    export function Modal(_props: Props): JSX.Element;
+        className?: string;
+        contentStyle?: React.CSSProperties;
+        innerContentStyle?: React.CSSProperties;
+        overlayStyle?: React.CSSProperties;
+    }
+    export function Modal(props: ModalProps): JSX.Element;
 }
 declare module "editor/components/common/ConditionalWrap" {
     import React from 'react';
@@ -759,6 +777,7 @@ declare module "engine/utils/position" {
     export function normalizePosition(position: 'top' | 'top-left' | 'top-center' | 'top-right' | 'center' | 'center-left' | 'center-center' | 'center-right' | 'center-top' | 'center-bottom' | 'bottom' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left' | 'left-top' | 'left-center' | 'left-bottom' | 'right' | 'right-top' | 'right-center' | 'right-bottom' | 'custom' | undefined): Position | undefined;
 }
 declare module "editor/components/editors/PositionEditor" {
+    import React from 'react';
     import { EditorProps } from "editor/components/editors/types";
     import { Position } from "engine/utils/position";
     export type PositionEditorValue = Position | 'custom';
@@ -770,20 +789,142 @@ declare module "editor/components/editors/PositionEditor" {
         className?: string;
         itemSize?: number;
         spacing?: number;
+        style?: React.CSSProperties;
         valueLabelPosition?: 'left' | 'right' | 'none';
     }): JSX.Element;
 }
 declare module "editor/hooks/useDynamicRef" {
     export function useDynamicRef<T>(value: T): import("react").MutableRefObject<T>;
 }
-declare module "editor/components/editors/common/Counter" {
+declare module "editor/design-system/components/Input" {
+    import React from 'react';
+    import * as Ariakit from '@ariakit/react';
+    export interface InputProps extends Omit<Ariakit.FormInputProps, 'as'> {
+        formStore?: Ariakit.FormStore<{
+            value: string;
+        }>;
+        label?: React.ReactNode;
+        labelPosition?: 'top' | 'left' | 'right';
+        name: string;
+        placeholder?: string;
+        required?: boolean;
+        type?: Ariakit.FormInputProps['type'] | 'textarea';
+        validationMessage?: string;
+        validationStatus?: 'error' | 'warn' | 'success';
+        value: Ariakit.FormInputProps['value'];
+    }
+    export const Input: React.ForwardRefExoticComponent<Pick<InputProps, keyof InputProps> & React.RefAttributes<HTMLInputElement>>;
+    export const S: {
+        Form: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+        FormInputGroup: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+        FormLabel: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+        FormInput: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+        Message: import("styled-components").StyledComponent<"div", any, {}, never>;
+    };
+}
+declare module "editor/design-system/components/Button" {
+    /** TODO: Remove all "!important" after removing bootstrap */
+    import React from 'react';
+    import * as Ariakit from '@ariakit/react';
+    import { Theme } from '../../themes/types';
+    export interface ButtonProps extends Ariakit.ButtonProps {
+        children: React.ReactNode;
+        className?: string;
+        danger?: boolean;
+        disabled?: boolean;
+        loading?: boolean;
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+        style?: React.CSSProperties;
+        variant?: keyof Theme['components']['buttons'];
+        type?: Ariakit.ButtonProps['type'];
+        id?: string;
+    }
+    export const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<unknown>>;
+}
+declare module "editor/design-system/components/Tooltip" {
+    import React from 'react';
+    import * as Ariakit from '@ariakit/react';
+    export interface TooltipProps {
+        arrow?: boolean;
+        children: Ariakit.TooltipAnchorProps['children'];
+        className?: string;
+        disabled?: boolean;
+        placement: Ariakit.TooltipStoreProps['placement'];
+        style?: React.CSSProperties;
+        timeout?: number;
+        tooltip: Ariakit.TooltipProps['children'];
+        tooltipWrapper?: Ariakit.TooltipAnchorProps['render'];
+    }
+    export function Tooltip(props: TooltipProps): JSX.Element;
+}
+declare module "editor/design-system/components/Dropdown" {
     import React from 'react';
-    export interface CounterProps {
+    import * as Ariakit from '@ariakit/react';
+    import { IconDefinition } from '@fortawesome/pro-regular-svg-icons';
+    export interface SelectOption {
+        icon?: IconDefinition;
+        label: string;
+        value: any;
+        tooltip?: string;
+        meta?: Record<string, unknown>;
+        onClick?: (e: React.MouseEvent, selected: boolean) => void;
+        selected: boolean;
+        disabled?: boolean;
+        toggle?: boolean;
+        attrs?: Record<string, string | number | boolean | undefined>;
+    }
+    export interface SelectOptionGroup {
+        name?: string;
+        label?: string;
+        icon?: IconDefinition;
+        options: SelectOption[];
+        meta?: object;
+    }
+    export type DropdownProps = {
+        ariaLabel?: string;
+        asLink?: boolean;
+        badge?: number;
+        className?: string;
+        caret?: boolean;
+        disabled?: boolean;
+        fallbackLabel?: string;
+        label?: React.ReactNode;
+        multi?: boolean;
+        triggerLabel?: string | React.ReactNode;
+        placement?: Ariakit.PopoverStoreState['placement'];
+        onChange?: (option: SelectOption) => void;
+        onClose?: () => void;
+        onOpen?: () => void;
+        renderButton?: Ariakit.SelectProps['render'];
+        renderFooter?: () => React.ReactNode;
+        renderHeader?: () => React.ReactNode;
+        style?: React.CSSProperties;
+        customPopoverStyles?: React.CSSProperties;
+    } & ({
+        renderOption?: (option: SelectOption) => React.ReactNode;
+        renderOptionLabel?: never;
+    } | {
+        renderOption?: never;
+        renderOptionLabel?: (option: SelectOption) => React.ReactNode;
+    }) & ({
+        options?: never;
+        groupedOptions?: SelectOptionGroup[];
+        renderOptionGroupHeader?: (optionGroup: SelectOptionGroup) => React.ReactNode;
+    } | {
+        options?: SelectOption[];
+        groupedOptions?: never;
+        renderOptionGroupHeader?: never;
+    });
+    export function Dropdown(props: DropdownProps): JSX.Element;
+}
+declare module "editor/design-system/components/CounterInput" {
+    import { DisplayMode } from '../../../state/types';
+    export interface CounterInputProps {
         absoluteBaseValue?: number;
         buttonSize?: 'lg' | 'md' | 'sm' | undefined;
-        children?: React.ReactNode;
         defaultUnit?: string;
         disabled?: boolean;
+        displayMode: DisplayMode;
         maxValue?: number | null;
         minValue?: number | null;
         onChange: (value: number | string) => void;
@@ -793,6 +934,12 @@ declare module "editor/components/editors/common/Counter" {
         units?: string[];
         value: number | string;
     }
+    export default function CounterInput(props: CounterInputProps): JSX.Element;
+}
+declare module "editor/components/editors/common/Counter" {
+    import { CounterInputProps } from "editor/design-system/components/CounterInput";
+    export interface CounterProps extends Omit<CounterInputProps, 'displayMode'> {
+    }
     export default function Counter(props: CounterProps): JSX.Element;
 }
 declare module "engine/utils/sizeUtils" {
@@ -889,6 +1036,28 @@ declare module "engine/utils/applyMergeTagPreviewHtmlToText" {
     }): string;
     export const applyMergeTagPreviewHtmlToText: typeof _applyMergeTagPreviewHtmlToText & import("lodash").MemoizedFunction;
 }
+declare module "editor/design-system/components/SegmentedControl" {
+    import React from 'react';
+    import { IconDefinition } from '@fortawesome/pro-regular-svg-icons';
+    export interface SegmentedControlItem {
+        key?: string;
+        icon?: IconDefinition;
+        label?: string;
+        onClick?: (e: React.MouseEvent) => void;
+        selected?: boolean;
+        disabled?: boolean;
+        tooltip?: string;
+        meta?: object;
+    }
+    export interface SegmentedControlProps {
+        autoFocus?: boolean;
+        className?: string;
+        disabled?: boolean;
+        items: SegmentedControlItem[];
+        renderLabel?: (item: SegmentedControlItem) => React.ReactNode;
+    }
+    export function SegmentedControl(props: SegmentedControlProps): JSX.Element;
+}
 declare module "state/types/RootState" {
     import { StateType } from 'typesafe-actions';
     import reducer from '../reducer';
@@ -967,8 +1136,8 @@ declare module "editor/hooks/useImageUploader" {
 }
 declare module "editor/components/common/ImageUploadButton" {
     import React from 'react';
-    import { ButtonProps } from 'reactstrap';
     import { ImageSource } from '../../../state/types';
+    import { ButtonProps } from "editor/design-system/components/Button";
     export interface ImageUploadButtonInstance {
         clearError: () => void;
         openPicker: () => void;
@@ -1000,6 +1169,17 @@ declare module "editor/components/common/ImageUploadButton" {
 declare module "engine/tools/content/image" {
     export const DEFAULT_IMAGE_PLACEHOLDER = "https://cdn.tools.unlayer.com/image/placeholder.png";
 }
+declare module "editor/design-system/components/Progress" {
+    export interface ProgressBarProps {
+        progress: number;
+        className?: string;
+        color?: string;
+        backgroundColor?: string;
+        height?: string;
+        animationDuration?: number;
+    }
+    export function Progress(props: ProgressBarProps): JSX.Element;
+}
 declare module "editor/components/common/Dropzone" {
     import React from 'react';
     import { DropzoneOptions } from 'react-dropzone';
@@ -1014,7 +1194,7 @@ declare module "editor/components/common/Dropzone" {
         onEffectsClick?: () => void;
         isEffectsButtonDisabled?: boolean;
         showImageInfo?: boolean;
-        shouldRenderDropzone: boolean;
+        shouldRenderDropzone?: boolean;
         isNotImageTool?: boolean;
     }
     export function Dropzone(props: DropzoneProps): JSX.Element;
@@ -1034,8 +1214,8 @@ declare module "editor/components/common/ImageUploadErrorMessage" {
 }
 declare module "editor/components/editors/ImageUploader" {
     import { RefObject } from 'react';
-    import { ImageUploadButtonInstance } from "editor/components/common/ImageUploadButton";
     import { DropEvent, FileRejection } from 'react-dropzone';
+    import { ImageUploadButtonInstance } from "editor/components/common/ImageUploadButton";
     interface ImageUploaderProps {
         shouldRender: {
             uploadButton?: boolean;
@@ -1062,8 +1242,44 @@ declare module "editor/components/editors/ImageUploader" {
         onUploadStatusChange: (image: any) => void;
         onErrorChange: (error: Error | null) => void;
         imageUploadButtonRef: RefObject<ImageUploadButtonInstance>;
+        showError?: boolean;
     }
-    export const ImageUploader: ({ shouldRender, label, maxSize, updateImage, showImagesDropdown, showUploadsDropdown, intl, onDropAccepted, onDropRejected, isUploading, uploadProgress, postprocessedImageUrl, togglePixieModal, imageExists, error, onImageSelect, onImageUpload, onUploadProgressChange, onUploadStatusChange, onErrorChange, imageUploadButtonRef, ...restProps }: ImageUploaderProps) => JSX.Element;
+    export const ImageUploader: ({ shouldRender, label, maxSize, updateImage, showImagesDropdown, showUploadsDropdown, intl, onDropAccepted, onDropRejected, isUploading, uploadProgress, postprocessedImageUrl, togglePixieModal, imageExists, error, onImageSelect, onImageUpload, onUploadProgressChange, onUploadStatusChange, onErrorChange, imageUploadButtonRef, showError, ...restProps }: ImageUploaderProps) => JSX.Element;
+}
+declare module "editor/themes/helpers" {
+    import { Theme } from './types';
+    export function parseThemeValues<T extends Theme>(theme: T): T;
+}
+declare module "editor/themes/modern/light" {
+    import { DeprecatedTheme, Theme } from '../types';
+    export const unparsedTheme: Theme & DeprecatedTheme;
+    export const parsedTheme: Theme & DeprecatedTheme;
+}
+declare module "editor/themes/classic/light" {
+    export const unparsedTheme: any;
+    export const parsedTheme: any;
+}
+declare module "editor/themes/modern/dark" {
+    import { DeprecatedTheme, Theme } from '../types';
+    export const unparsedTheme: Theme & DeprecatedTheme;
+    export const parsedTheme: Theme & DeprecatedTheme;
+}
+declare module "editor/themes/classic/dark" {
+    export const unparsedTheme: any;
+    export const parsedTheme: any;
+}
+declare module "editor/themes/index" {
+    const themes: {
+        classic_light: any;
+        classic_dark: any;
+        modern_light: import("editor/themes/types").Theme & import("editor/themes/types").DeprecatedTheme;
+        modern_dark: import("editor/themes/types").Theme & import("editor/themes/types").DeprecatedTheme;
+    };
+    export default themes;
+}
+declare module "editor/hooks/useTheme" {
+    import { DeprecatedTheme, Theme } from '../themes/types';
+    export function useTheme(): Theme & DeprecatedTheme;
 }
 declare module "editor/components/editors/pixie/pixie.umd" {
     const _exports: {
@@ -1094,21 +1310,136 @@ declare module "editor/components/editors/pixie/pixie.umd" {
     };
     export = _exports;
 }
+declare module "editor/design-system/components/ToggleSwitch" {
+    import React from 'react';
+    export interface ToggleSwitchProps {
+        children?: React.ReactNode;
+        className?: string;
+        disabled?: boolean;
+        isChecked: boolean;
+        left?: React.ReactNode;
+        onChange: (isChecked: boolean) => void;
+        right?: React.ReactNode;
+        size?: number;
+        style?: React.CSSProperties;
+    }
+    export const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLLabelElement>>;
+}
+declare module "editor/design-system/components/Bar" {
+    import React, { ReactNode } from 'react';
+    import { IconDefinition } from '@fortawesome/pro-regular-svg-icons';
+    import { TooltipProps } from "editor/design-system/components/Tooltip";
+    export const BAR_HEIGHT = 40;
+    export const BAR_ITEM_WIDTH = 50;
+    export const BAR_ITEM_COMPACT_WIDTH = 30;
+    export interface SelectOption {
+        icon?: IconDefinition;
+        label: string;
+        value: any;
+        tooltip?: string;
+        meta?: object;
+        onClick?: (e: React.MouseEvent, selected: boolean) => void;
+        selected?: boolean;
+        toggle?: boolean;
+    }
+    export interface SelectOptionGroup {
+        name?: string;
+        label?: string;
+        icon?: IconDefinition;
+        options: SelectOption[];
+        meta?: object;
+    }
+    export interface BarTitleItem {
+        key: string;
+        type: 'title' | 'subtitle';
+        icon?: IconDefinition;
+        text: string;
+        tooltip?: string;
+        badge?: number;
+        loading?: boolean;
+    }
+    export interface BarButtonItem {
+        key: string;
+        type: 'button';
+        id?: string;
+        icon: IconDefinition | undefined;
+        label?: string;
+        tooltip?: string;
+        badge?: number;
+        onClick?: (e: React.MouseEvent) => void;
+        destructive?: boolean;
+        disabled?: boolean;
+        loading?: boolean;
+        selected?: boolean;
+        highlighted?: boolean;
+        autoFocus?: boolean;
+    }
+    export interface BarToggleItem {
+        key: string;
+        type: 'toggle';
+        icon: IconDefinition;
+        tooltip?: string;
+        label?: string;
+        badge?: number;
+        onClick?: (e: React.MouseEvent) => void;
+        onChange: (enabled: boolean) => void;
+        disabled?: boolean;
+        checked?: boolean;
+        selected?: boolean;
+        highlighted?: boolean;
+        autoFocus?: boolean;
+        error: ReactNode;
+    }
+    type BarDropdownItem = {
+        key: string;
+        type: 'dropdown';
+        ariaLabel?: string;
+        multi?: boolean;
+        renderOption?: (option: SelectOption) => React.ReactNode;
+        renderOptionLabel?: (option: SelectOption) => React.ReactNode;
+        onChange?: (option: SelectOption) => void;
+        badge?: number;
+        disabled?: boolean;
+        tooltip?: string;
+        triggerLabel?: string | React.ReactNode;
+        caret?: boolean;
+        renderHeader?: () => React.ReactNode;
+    } & ({
+        options?: never;
+        groupedOptions?: SelectOptionGroup[];
+        renderOptionGroupHeader?: (optionGroup: SelectOptionGroup) => React.ReactNode;
+    } | {
+        options?: SelectOption[];
+        groupedOptions?: never;
+        renderOptionGroupHeader?: never;
+    });
+    export interface BarSeparatorItem {
+        type: 'separator';
+    }
+    export type BarItem = BarTitleItem | BarButtonItem | BarToggleItem | BarDropdownItem | BarSeparatorItem | false | undefined;
+    export interface BarProps {
+        as?: any;
+        className?: string;
+        compact?: boolean;
+        leftItems?: BarItem[];
+        items?: BarItem[];
+        rightItems?: BarItem[];
+        style?: React.CSSProperties;
+        tooltipPlacement: TooltipProps['placement'];
+    }
+    export function Bar(props: BarProps): JSX.Element;
+}
 declare module "editor/components/editors/pixie/PixieImageEditor" {
-    import { Component } from 'react';
-    class PixieImageEditor extends Component {
-        state: {
-            loading: boolean;
-            saving: boolean;
-            errorMessage: string;
-        };
-        componentDidMount(): void;
-        componentDidUpdate(prevProps: any): void;
-        loadPixieEditor: () => Promise<void>;
-        updateImage: (data: any, filename: any, format: any) => Promise<void>;
-        componentWillUnmount(): Promise<void>;
-        render(): JSX.Element;
+    type ImageBlob = {
+        lastModifiedDate?: Date;
+        name?: string;
+    } & Blob;
+    export interface PixieImageEditorProps {
+        imageUrl: string;
+        toggleModal: () => void;
+        onComplete: (blob: ImageBlob) => void;
     }
+    const PixieImageEditor: (props: PixieImageEditorProps) => JSX.Element;
     export default PixieImageEditor;
 }
 declare module "editor/components/editors/BackgroundImageEditor" {
@@ -1182,6 +1513,7 @@ declare module "embed/Editor" {
     import { AppearanceConfig, Audit, DesignTagsConfig, Device, DisplayConditions, DisplayMode, JSONTemplate, LinkTypes, LinkTypesSharedConfig, MergeTags, MergeTagsConfig, SpecialLink, Tabs, Translations, User, Validator } from "state/types/index";
     import { BodyValues } from "engine/options/bodies";
     import { Locale, TextDirection } from "engine/config/intl";
+    import { DeepPartial } from "editor/components/editors/types";
     export const LATEST_VERSION: string;
     export const STABLE_VERSION: string;
     export class Editor {
@@ -1225,11 +1557,14 @@ declare module "embed/Editor" {
         exportImage(callback: (data: ExportFromApiResult) => void, options?: ExportImageFromApiOptions): void;
         exportPdf(callback: (data: ExportFromApiResult) => void, options?: ExportPdfFromApiOptions): void;
         exportZip(callback: (data: ExportFromApiResult) => void, options?: ExportZipFromApiOptions): void;
-        setAppearance(appearance: AppearanceConfig): void;
+        setAppearance(appearance: DeepPartial<AppearanceConfig>): void;
         setBodyValues(bodyValues: Partial<BodyValues>, bodyId?: number): void;
         setDesignTagsConfig(designTagsConfig: DesignTagsConfig): void;
         setMergeTagsConfig(mergeTagsConfig: MergeTagsConfig): void;
-        showPreview(device?: Device): void;
+        showPreview(payload: {
+            device?: Device;
+            resolution?: number;
+        }): void;
         hidePreview(): void;
         canUndo(callback: (result: boolean) => void): void;
         canRedo(callback: (result: boolean) => void): void;

package/package.json

@@ -1,5 +1,5 @@
 {
   "name": "unlayer-types",
-  "version": "1.5.67",
+  "version": "1.6.0",
   "license": "MIT"
 }