@elementor/editor-controls 3.32.0-55 → 3.32.0-57

package/dist/index.d.mts

@@ -13,11 +13,12 @@ type ImageControlProps = {
 };
 declare const ImageControl: ControlComponent<({ sizes, showMode }: ImageControlProps) => React$1.JSX.Element>;
 
-declare const TextControl: ControlComponent<({ placeholder, error, inputValue, inputDisabled, sx, }: {
+declare const TextControl: ControlComponent<({ placeholder, error, inputValue, inputDisabled, helperText, sx, }: {
     placeholder?: string;
     error?: boolean;
     inputValue?: string;
     inputDisabled?: boolean;
+    helperText?: string;
     sx?: SxProps;
 }) => React$1.JSX.Element>;
 
@@ -255,6 +256,10 @@ type KeyValueControlProps = {
     regexKey?: string;
     regexValue?: string;
     validationErrorMessage?: string;
+    getHelperText?: (key: string, value: string) => {
+        keyHelper?: string;
+        valueHelper?: string;
+    };
 };
 declare const KeyValueControl: ControlComponent<(props?: KeyValueControlProps) => React$1.JSX.Element>;
 
@@ -304,6 +309,7 @@ declare const brandSymbol: unique symbol;
 type ControlComponent<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
     [brandSymbol]: true;
 };
+declare function createControl<T extends AnyComponentType>(Control: T): ControlComponent<T>;
 
 type ControlActionsItems = Array<{
     id: string;
@@ -414,4 +420,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.d.ts

@@ -13,11 +13,12 @@ type ImageControlProps = {
 };
 declare const ImageControl: ControlComponent<({ sizes, showMode }: ImageControlProps) => React$1.JSX.Element>;
 
-declare const TextControl: ControlComponent<({ placeholder, error, inputValue, inputDisabled, sx, }: {
+declare const TextControl: ControlComponent<({ placeholder, error, inputValue, inputDisabled, helperText, sx, }: {
     placeholder?: string;
     error?: boolean;
     inputValue?: string;
     inputDisabled?: boolean;
+    helperText?: string;
     sx?: SxProps;
 }) => React$1.JSX.Element>;
 
@@ -255,6 +256,10 @@ type KeyValueControlProps = {
     regexKey?: string;
     regexValue?: string;
     validationErrorMessage?: string;
+    getHelperText?: (key: string, value: string) => {
+        keyHelper?: string;
+        valueHelper?: string;
+    };
 };
 declare const KeyValueControl: ControlComponent<(props?: KeyValueControlProps) => React$1.JSX.Element>;
 
@@ -304,6 +309,7 @@ declare const brandSymbol: unique symbol;
 type ControlComponent<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
     [brandSymbol]: true;
 };
+declare function createControl<T extends AnyComponentType>(Control: T): ControlComponent<T>;
 
 type ControlActionsItems = Array<{
     id: string;
@@ -414,4 +420,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.js

@@ -68,6 +68,7 @@ __export(index_exports, {
   TransformRepeaterControl: () => TransformRepeaterControl,
   TransitionRepeaterControl: () => TransitionRepeaterControl,
   UrlControl: () => UrlControl,
+  createControl: () => createControl,
   createControlReplacementsRegistry: () => createControlReplacementsRegistry,
   enqueueFont: () => enqueueFont,
   injectIntoRepeaterHeaderActions: () => injectIntoRepeaterHeaderActions,
@@ -563,6 +564,7 @@ var TextControl = createControl(
     error,
     inputValue,
     inputDisabled,
+    helperText,
     sx
   }) => {
     const { value, setValue, disabled } = useBoundProp(import_editor_props4.stringPropTypeUtil);
@@ -577,6 +579,7 @@ var TextControl = createControl(
         onChange: handleChange,
         placeholder,
         error,
+        helperText,
         sx
       }
     ));
@@ -4532,12 +4535,20 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  return /* @__PURE__ */ React70.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React70.createElement(import_ui61.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React70.createElement(import_ui61.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React70.createElement(import_ui61.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React70.createElement(TextControl, { inputValue: sessionState.key, error: !!keyError })), !!keyError && /* @__PURE__ */ React70.createElement(import_ui61.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React70.createElement(import_ui61.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React70.createElement(import_ui61.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React70.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React70.createElement(import_ui61.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React70.createElement(import_ui61.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React70.createElement(import_ui61.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React70.createElement(
+    TextControl,
+    {
+      inputValue: sessionState.key,
+      error: !!keyError,
+      helperText: props.getHelperText?.(sessionState.key, sessionState.value)?.keyHelper
+    }
+  )), !!keyError && /* @__PURE__ */ React70.createElement(import_ui61.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React70.createElement(import_ui61.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React70.createElement(import_ui61.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React70.createElement(
     TextControl,
     {
       inputValue: sessionState.value,
       error: !!valueError,
-      inputDisabled: !!keyError
+      inputDisabled: !!keyError,
+      helperText: props.getHelperText?.(sessionState.key, sessionState.value)?.valueHelper
     }
   )), !!valueError && /* @__PURE__ */ React70.createElement(import_ui61.FormHelperText, { error: true }, valueError))));
 });
@@ -5516,6 +5527,7 @@ var CssEditor = ({ value, onChange }) => {
   TransformRepeaterControl,
   TransitionRepeaterControl,
   UrlControl,
+  createControl,
   createControlReplacementsRegistry,
   enqueueFont,
   injectIntoRepeaterHeaderActions,