@elementor/editor-editing-panel 4.3.0-999 → 4.3.0-beta1

package/dist/index.d.ts

@@ -1,13 +1,13 @@
-import * as _elementor_locations from '@elementor/locations';
-import { StyleDefinition, StyleDefinitionVariant, StyleDefinitionState, StyleDefinitionID } from '@elementor/editor-styles';
 import * as react from 'react';
 import { PropsWithChildren, FC, ReactNode, Dispatch, ComponentProps, ComponentType } from 'react';
+import { AutocompleteProps, AutocompleteChangeReason, ListProps, Theme, ChipProps } from '@elementor/ui';
+import * as _elementor_locations from '@elementor/locations';
+import { StyleDefinition, StyleDefinitionState, StyleDefinitionVariant, StyleDefinitionID } from '@elementor/editor-styles';
 import { Control as Control$1, ElementControl, Element, ElementType, ControlLayout, ControlItem } from '@elementor/editor-elements';
 import * as _elementor_editor_props from '@elementor/editor-props';
-import { PropKey, AnyTransformable, PropTypeUtil, PropsSchema, ObjectPropType, TransformablePropValue, PropValue, PropType, Props as Props$2 } from '@elementor/editor-props';
+import { PropKey, AnyTransformable, PropTypeUtil, PropsSchema, ObjectPropType, TransformablePropValue, PropValue, PropType, Props as Props$4 } from '@elementor/editor-props';
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
-import { Theme, ChipProps } from '@elementor/ui';
 import { StylesProvider } from '@elementor/editor-styles-repository';
 import * as _mui_material from '@mui/material';
 import * as _elementor_editor_controls from '@elementor/editor-controls';
@@ -15,6 +15,16 @@ import { ControlComponent, AdornmentComponent } from '@elementor/editor-controls
 import * as zod from 'zod';
 import * as _elementor_utils from '@elementor/utils';
 
+type Option = {
+    label: string;
+    value: string | null;
+    fixed?: boolean;
+    key?: string;
+};
+type InternalKeys = '_group' | '_action';
+type SafeOptionConstraint = Option & {
+    [K in InternalKeys]?: never;
+};
 type ValidationResult = {
     isValid: true;
     errorMessage: null;
@@ -23,6 +33,30 @@ type ValidationResult = {
     errorMessage: string;
 };
 type ValidationEvent = 'inputChange' | 'create';
+type OnSelect<TOption extends Option> = (value: TOption[], reason: AutocompleteChangeReason, option: TOption) => void;
+type OnCreate = (value: string) => unknown;
+type Validate = (value: string, event: ValidationEvent) => ValidationResult;
+type CreatableAutocompleteProps<TOption extends SafeOptionConstraint> = Omit<AutocompleteProps<TOption, true, true, true>, 'renderInput' | 'onSelect' | 'options'> & {
+    selected: TOption[];
+    options: TOption[];
+    placeholder?: string;
+    entityName?: {
+        singular: string;
+        plural: string;
+    };
+    renderEmptyState?: (props: {
+        searchValue: string;
+        onClear: () => void;
+    }) => React.ReactNode;
+    onSelect?: OnSelect<TOption>;
+    onCreate?: OnCreate;
+    validate?: Validate;
+};
+
+declare const CreatableAutocomplete: <TOption extends SafeOptionConstraint>(props: CreatableAutocompleteProps<TOption> & {
+    ref?: react.ForwardedRef<HTMLElement>;
+}) => ReturnType<typeof CreatableAutocompleteInner>;
+declare function CreatableAutocompleteInner<TOption extends SafeOptionConstraint>({ selected, options, entityName, onSelect, placeholder, onCreate, validate, renderEmptyState, ...props }: CreatableAutocompleteProps<TOption>, ref: react.ForwardedRef<HTMLElement>): react.JSX.Element;
 
 declare const injectIntoCssClassConvert: (args: _elementor_locations.InjectArgs<{
     styleDef: StyleDefinition | null;
@@ -53,6 +87,8 @@ type SectionContentProps = PropsWithChildren<{
 }>;
 declare const SectionContent: FC<SectionContentProps>;
 
+declare function SectionsList(props: ListProps): react.JSX.Element;
+
 declare const SettingsControl: ({ control: { value, type } }: {
     control: Control$1 | ElementControl;
 }) => react.JSX.Element | null;
@@ -72,8 +108,39 @@ declare const StyleIndicator: _emotion_styled.StyledComponent<_mui_system.MUISty
     getColor?: ((theme: Theme) => string) | null;
 }), react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
+declare const StyleTabSlot: react.ComponentType<object>;
 declare const injectIntoStyleTab: (args: _elementor_locations.InjectArgs<object>) => void;
 
+declare const StyleSections: () => react.JSX.Element;
+
+type StyleSectionDefinition = {
+    name: string;
+    title: string;
+    component: () => react.JSX.Element;
+    fields: string[];
+};
+declare const STYLE_SECTIONS: StyleSectionDefinition[];
+declare const STYLE_SECTION_NAMES: string[];
+
+type StyleDefinitionStateWithNormal = NonNullable<StyleDefinitionState> | 'normal';
+
+type PseudoStateOption = {
+    key: StyleDefinitionStateWithNormal;
+    value: StyleDefinitionState | null;
+    label: string;
+};
+declare const DEFAULT_PSEUDO_STATES: PseudoStateOption[];
+
+type PseudoStateMenuItemsProps = {
+    states: PseudoStateOption[];
+    activeState: StyleDefinitionState | null;
+    onSelectState: (state: StyleDefinitionState | null) => void;
+    onClose?: () => void;
+};
+declare function PseudoStateMenuItems({ states, activeState, onSelectState, onClose }: PseudoStateMenuItemsProps): react.JSX.Element;
+
+declare function usePseudoStates(): PseudoStateOption[];
+
 declare const injectIntoGridFields: (args: _elementor_locations.InjectArgs<object>) => void;
 
 type SectionType = {
@@ -85,13 +152,18 @@ type SectionType = {
         onClick: () => void;
     };
 };
-type Props$1 = {
+type Props$3 = {
     section: SectionType;
     fields?: string[];
     unmountOnExit?: boolean;
 };
-declare const StyleTabSection: ({ section, fields, unmountOnExit }: Props$1) => react.JSX.Element;
+declare const StyleTabSection: ({ section, fields, unmountOnExit }: Props$3) => react.JSX.Element;
 
+type ContextValue$2 = {
+    prop: string;
+};
+type Props$2 = PropsWithChildren<ContextValue$2>;
+declare function ClassesPropProvider({ children, prop }: Props$2): react.JSX.Element;
 declare function useClassesProp(): string;
 
 type ContextValue$1 = {
@@ -99,8 +171,8 @@ type ContextValue$1 = {
     elementType: ElementType;
     settings: Record<string, AnyTransformable | null>;
 };
-type Props = PropsWithChildren<ContextValue$1>;
-declare function ElementProvider({ children, element, elementType, settings }: Props): react.JSX.Element;
+type Props$1 = PropsWithChildren<ContextValue$1>;
+declare function ElementProvider({ children, element, elementType, settings }: Props$1): react.JSX.Element;
 declare function useElement(): ContextValue$1;
 
 type ContextValue = {
@@ -117,8 +189,12 @@ type ContextValueWithoutProvider = {
     id: null;
     provider: null;
 };
+type Props = PropsWithChildren<Omit<ContextValue, 'provider'>>;
+declare function StyleProvider({ children, ...props }: Props): react.JSX.Element;
 declare function useStyle(): ContextValue;
 
+declare function StyleInheritanceProvider({ children }: PropsWithChildren): react.JSX.Element;
+
 type ControlRegistry = Record<string, {
     component: ControlComponent;
     layout: ControlLayout;
@@ -198,7 +274,9 @@ declare const controlTypes: {
         };
     };
     readonly 'svg-media': {
-        readonly component: ControlComponent<() => react.JSX.Element>;
+        readonly component: ControlComponent<({ showIconLibrary }: {
+            showIconLibrary?: boolean;
+        }) => react.JSX.Element>;
         readonly layout: "full";
         readonly propTypeUtil: {
             extract: (prop: unknown) => {
@@ -677,11 +755,19 @@ declare const controlTypes: {
     };
     readonly select: {
         readonly component: ControlComponent<({ collectionId, options, ...props }: {
-            options: {
+            options?: {
                 label: string;
                 value: _elementor_editor_props.StringPropValue["value"];
                 disabled?: boolean;
             }[];
+            groups?: {
+                label: string;
+                options: {
+                    label: string;
+                    value: _elementor_editor_props.StringPropValue["value"];
+                    disabled?: boolean;
+                }[];
+            }[];
             onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
             MenuProps?: _mui_material.SelectProps["MenuProps"];
             ariaLabel?: string;
@@ -1571,99 +1657,99 @@ declare const controlTypes: {
         readonly layout: "full";
         readonly propTypeUtil: {
             extract: (prop: unknown) => {
-                url: null;
                 id?: any;
+                url?: null | undefined;
             } | {
-                id: null;
+                id?: null | undefined;
                 url?: any;
             } | null;
             isValid: (prop: unknown) => prop is _elementor_editor_props.TransformablePropValue<"video-src", {
-                url: null;
                 id?: any;
+                url?: null | undefined;
             } | {
-                id: null;
+                id?: null | undefined;
                 url?: any;
             }>;
             create: {
                 (value: {
-                    url: null;
                     id?: any;
+                    url?: null | undefined;
                 } | {
-                    id: null;
+                    id?: null | undefined;
                     url?: any;
                 }): _elementor_editor_props.TransformablePropValue<"video-src", {
-                    url: null;
                     id?: any;
+                    url?: null | undefined;
                 } | {
-                    id: null;
+                    id?: null | undefined;
                     url?: any;
                 }>;
                 (value: {
-                    url: null;
                     id?: any;
+                    url?: null | undefined;
                 } | {
-                    id: null;
+                    id?: null | undefined;
                     url?: any;
                 }, createOptions?: _elementor_editor_props.CreateOptions): _elementor_editor_props.TransformablePropValue<"video-src", {
-                    url: null;
                     id?: any;
+                    url?: null | undefined;
                 } | {
-                    id: null;
+                    id?: null | undefined;
                     url?: any;
                 }>;
                 (value: (prev?: {
-                    url: null;
                     id?: any;
+                    url?: null | undefined;
                 } | {
-                    id: null;
+                    id?: null | undefined;
                     url?: any;
                 } | undefined) => {
-                    url: null;
                     id?: any;
+                    url?: null | undefined;
                 } | {
-                    id: null;
+                    id?: null | undefined;
                     url?: any;
                 }, createOptions: _elementor_editor_props.CreateOptions): _elementor_editor_props.TransformablePropValue<"video-src", {
-                    url: null;
                     id?: any;
+                    url?: null | undefined;
                 } | {
-                    id: null;
+                    id?: null | undefined;
                     url?: any;
                 }>;
             };
             schema: zod.ZodObject<{
                 $$type: zod.ZodLiteral<"video-src">;
                 value: zod.ZodType<{
-                    url: null;
                     id?: any;
+                    url?: null | undefined;
                 } | {
-                    id: null;
+                    id?: null | undefined;
                     url?: any;
                 }, zod.ZodTypeDef, {
-                    url: null;
                     id?: any;
+                    url?: null | undefined;
                 } | {
-                    id: null;
+                    id?: null | undefined;
                     url?: any;
                 }>;
                 disabled: zod.ZodOptional<zod.ZodBoolean>;
             }, "strict", zod.ZodTypeAny, {
                 $$type: "video-src";
                 value: {
-                    url: null;
                     id?: any;
+                    url?: null | undefined;
                 } | {
-                    id: null;
+                    id?: null | undefined;
                     url?: any;
                 };
                 disabled?: boolean | undefined;
             }, {
                 $$type: "video-src";
                 value: {
-                    url: null;
                     id?: any;
+                    url?: null | undefined;
                 } | {
-                    id: null;
+                    id?: null | undefined;
                     url?: any;
                 };
                 disabled?: boolean | undefined;
@@ -1672,125 +1758,38 @@ declare const controlTypes: {
         };
     };
     readonly 'inline-editing': {
-        readonly component: ControlComponent<({ sx, attributes, props, }: {
+        readonly component: ControlComponent<({ sx, attributes, props, context: { elementId } }: {
             sx?: _mui_system.SxProps<_mui_material.Theme>;
             attributes?: Record<string, string>;
             props?: react.ComponentProps<"div">;
+        } & {
+            context: {
+                elementId: string;
+            };
         }) => react.JSX.Element>;
         readonly layout: "full";
         readonly propTypeUtil: {
-            extract: (prop: unknown) => {
-                content: {
-                    $$type: "string";
-                    value: string | null;
-                    disabled?: boolean | undefined;
-                } | null;
-                children: unknown[];
-            } | null;
-            isValid: (prop: unknown) => prop is _elementor_editor_props.TransformablePropValue<"html-v3", {
-                content: {
-                    $$type: "string";
-                    value: string | null;
-                    disabled?: boolean | undefined;
-                } | null;
-                children: unknown[];
-            }>;
+            extract: (prop: unknown) => string | null;
+            isValid: (prop: unknown) => prop is _elementor_editor_props.TransformablePropValue<"escaped-html", string | null>;
             create: {
-                (value: {
-                    content: {
-                        $$type: "string";
-                        value: string | null;
-                        disabled?: boolean | undefined;
-                    } | null;
-                    children: unknown[];
-                }): _elementor_editor_props.TransformablePropValue<"html-v3", {
-                    content: {
-                        $$type: "string";
-                        value: string | null;
-                        disabled?: boolean | undefined;
-                    } | null;
-                    children: unknown[];
-                }>;
-                (value: {
-                    content: {
-                        $$type: "string";
-                        value: string | null;
-                        disabled?: boolean | undefined;
-                    } | null;
-                    children: unknown[];
-                }, createOptions?: _elementor_editor_props.CreateOptions): _elementor_editor_props.TransformablePropValue<"html-v3", {
-                    content: {
-                        $$type: "string";
-                        value: string | null;
-                        disabled?: boolean | undefined;
-                    } | null;
-                    children: unknown[];
-                }>;
-                (value: (prev?: {
-                    content: {
-                        $$type: "string";
-                        value: string | null;
-                        disabled?: boolean | undefined;
-                    } | null;
-                    children: unknown[];
-                } | undefined) => {
-                    content: {
-                        $$type: "string";
-                        value: string | null;
-                        disabled?: boolean | undefined;
-                    } | null;
-                    children: unknown[];
-                }, createOptions: _elementor_editor_props.CreateOptions): _elementor_editor_props.TransformablePropValue<"html-v3", {
-                    content: {
-                        $$type: "string";
-                        value: string | null;
-                        disabled?: boolean | undefined;
-                    } | null;
-                    children: unknown[];
-                }>;
+                (value: string | null): _elementor_editor_props.TransformablePropValue<"escaped-html", string | null>;
+                (value: string | null, createOptions?: _elementor_editor_props.CreateOptions): _elementor_editor_props.TransformablePropValue<"escaped-html", string | null>;
+                (value: (prev?: string | null | undefined) => string | null, createOptions: _elementor_editor_props.CreateOptions): _elementor_editor_props.TransformablePropValue<"escaped-html", string | null>;
             };
             schema: zod.ZodObject<{
-                $$type: zod.ZodLiteral<"html-v3">;
-                value: zod.ZodType<{
-                    content: {
-                        $$type: "string";
-                        value: string | null;
-                        disabled?: boolean | undefined;
-                    } | null;
-                    children: unknown[];
-                }, zod.ZodTypeDef, {
-                    content: {
-                        $$type: "string";
-                        value: string | null;
-                        disabled?: boolean | undefined;
-                    } | null;
-                    children: unknown[];
-                }>;
+                $$type: zod.ZodLiteral<"escaped-html">;
+                value: zod.ZodType<string | null, zod.ZodTypeDef, string | null>;
                 disabled: zod.ZodOptional<zod.ZodBoolean>;
             }, "strict", zod.ZodTypeAny, {
-                $$type: "html-v3";
-                value: {
-                    content: {
-                        $$type: "string";
-                        value: string | null;
-                        disabled?: boolean | undefined;
-                    } | null;
-                    children: unknown[];
-                };
+                $$type: "escaped-html";
+                value: string | null;
                 disabled?: boolean | undefined;
             }, {
-                $$type: "html-v3";
-                value: {
-                    content: {
-                        $$type: "string";
-                        value: string | null;
-                        disabled?: boolean | undefined;
-                    } | null;
-                    children: unknown[];
-                };
+                $$type: "escaped-html";
+                value: string | null;
                 disabled?: boolean | undefined;
             }>;
-            key: "html-v3";
+            key: "escaped-html";
         };
     };
     readonly email: {
@@ -2316,9 +2315,9 @@ type DependencyEffect = {
     isHidden: boolean;
     isDisabled: (propType: PropType) => boolean;
 };
-declare function getElementSettingsWithDefaults(propsSchema: PropsSchema, elementSettings?: Props$2): Values;
-declare function extractDependencyEffect(bind: string, propsSchema: PropsSchema, settings: Props$2): DependencyEffect;
+declare function getElementSettingsWithDefaults(propsSchema: PropsSchema, elementSettings?: Props$4): Values;
+declare function extractDependencyEffect(bind: string, propsSchema: PropsSchema, settings: Props$4): DependencyEffect;
 declare function extractOrderedDependencies(dependenciesPerTargetMapping: Record<string, string[]>): string[];
 declare function getUpdatedValues(values: Values, dependencies: string[], propsSchema: PropsSchema, elementValues: Values, elementId: string): Values;
 
-export { Control as BaseControl, ControlLabel, type ControlType, ControlTypeContainer, CustomCssIndicator, type DependencyEffect, type DynamicTag, type DynamicTags, type DynamicTagsManager, EditingPanelTabs, type Defaults as ElementPanelDefaults, ElementProvider, FIELD_TYPE, HISTORY_DEBOUNCE_WAIT, SectionContent, SettingsControl, SettingsField, StyleIndicator, StyleTabSection, StylesProviderCannotUpdatePropsError, type ValidationEvent, type ValidationResult, controlsRegistry, createTopLevelObjectType, doApplyClasses, doGetAppliedClasses, doUnapplyClass, extractDependencyEffect, extractOrderedDependencies, getElementSettingsWithDefaults, getFieldIndicators, getSubtitle, getTitle, getUpdatedValues, init, injectIntoClassSelectorActions, injectIntoCssClassConvert, injectIntoGridFields, injectIntoPanelHeaderTop, injectIntoStyleTab, isDynamicPropValue, registerEditingPanelReplacement, registerElementPanelDefaults, registerFieldIndicator, registerStyleProviderToColors, setLicenseConfig, useClassesProp, useCustomCss, useElement, usePanelActions, usePanelStatus, useStateByElement, useStyle, useStylesRerender };
+export { Control as BaseControl, ClassesPropProvider, ControlLabel, type ControlType, ControlTypeContainer, CreatableAutocomplete, type CreatableAutocompleteProps, CustomCssIndicator, DEFAULT_PSEUDO_STATES, type DependencyEffect, type DynamicTag, type DynamicTags, type DynamicTagsManager, EditingPanelTabs, type Defaults as ElementPanelDefaults, ElementProvider, FIELD_TYPE, HISTORY_DEBOUNCE_WAIT, type Option, PseudoStateMenuItems, type PseudoStateOption, STYLE_SECTIONS, STYLE_SECTION_NAMES, SectionContent, SectionsList, SettingsControl, SettingsField, StyleIndicator, StyleInheritanceProvider, StyleProvider, type StyleSectionDefinition, StyleSections, StyleTabSection, StyleTabSlot, StylesProviderCannotUpdatePropsError, type ValidationEvent, type ValidationResult, controlsRegistry, createTopLevelObjectType, doApplyClasses, doGetAppliedClasses, doUnapplyClass, extractDependencyEffect, extractOrderedDependencies, getElementSettingsWithDefaults, getFieldIndicators, getSubtitle, getTitle, getUpdatedValues, init, injectIntoClassSelectorActions, injectIntoCssClassConvert, injectIntoGridFields, injectIntoPanelHeaderTop, injectIntoStyleTab, isDynamicPropValue, registerEditingPanelReplacement, registerElementPanelDefaults, registerFieldIndicator, registerStyleProviderToColors, setLicenseConfig, useClassesProp, useCustomCss, useElement, usePanelActions, usePanelStatus, usePseudoStates, useStateByElement, useStyle, useStylesRerender };