@elementor/editor-controls 0.26.0 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @elementor/editor-controls
 
+## 0.27.0
+
+### Minor Changes
+
+- 093b7ca: Add support for multiple control replacements
+- 10cbbe9: update `@elementor/ui` version
+
+### Patch Changes
+
+- Updated dependencies [10cbbe9]
+  - @elementor/editor-ui@0.8.0
+
 ## 0.26.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -16,10 +16,10 @@ declare const TextControl: ControlComponent<({ placeholder }: {
     placeholder?: string;
 }) => React.JSX.Element>;
 
-type Props$5 = {
+type Props$6 = {
     placeholder?: string;
 };
-declare const TextAreaControl: ControlComponent<({ placeholder }: Props$5) => React.JSX.Element>;
+declare const TextAreaControl: ControlComponent<({ placeholder }: Props$6) => React.JSX.Element>;
 
 type ExtendedValue = 'auto';
 type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
@@ -35,7 +35,7 @@ declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
 
 declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element>;
 
-type Props$4 = {
+type Props$5 = {
     options: Array<{
         label: string;
         value: StringPropValue['value'];
@@ -43,12 +43,12 @@ type Props$4 = {
     }>;
     onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
 };
-declare const SelectControl: ControlComponent<({ options, onChange }: Props$4) => React.JSX.Element>;
+declare const SelectControl: ControlComponent<({ options, onChange }: Props$5) => React.JSX.Element>;
 
-type Props$3 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
+type Props$4 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
     propTypeUtil?: PropTypeUtil<string, string>;
 };
-declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$3) => React.JSX.Element>;
+declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$4) => React.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];
@@ -61,7 +61,7 @@ type ToggleButtonGroupItem<TValue> = {
 };
 type ExclusiveValue<TValue> = TValue;
 type NonExclusiveValue<TValue> = TValue[];
-type Props$2<TValue> = {
+type Props$3<TValue> = {
     justify?: StackProps['justifyContent'];
     size?: ToggleButtonProps['size'];
     items: ToggleButtonGroupItem<TValue | null>[];
@@ -75,7 +75,7 @@ type Props$2<TValue> = {
     value: ExclusiveValue<TValue>;
     onChange: (value: ExclusiveValue<TValue>) => void;
 });
-declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$2<TValue>) => React.JSX.Element;
+declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$3<TValue>) => React.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
     options: Array<ToggleButtonGroupItem<T> & {
@@ -102,14 +102,14 @@ type Item = {
     bind: PropKey;
 };
 type EqualUnequalItems = [Item, Item, Item, Item];
-type Props$1<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
+type Props$2<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
     tooltipLabel: string;
     items: EqualUnequalItems;
     multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
 };
-declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$1<TMultiPropType, TPropValue>): React.JSX.Element;
+declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$2<TMultiPropType, TPropValue>): React.JSX.Element;
 
 declare const LinkedDimensionsControl: ControlComponent<({ label, isSiteRtl, extendedValues, }: {
     label: string;
@@ -136,7 +136,7 @@ type ControlProps<TControlProps = unknown> = TControlProps & {
     };
 };
 
-type Props = ControlProps<{
+type Props$1 = ControlProps<{
     queryOptions: {
         requestParams: Record<string, unknown>;
         endpoint: string;
@@ -145,7 +145,7 @@ type Props = ControlProps<{
     minInputLength?: number;
     placeholder?: string;
 }>;
-declare const LinkControl: ControlComponent<(props: Props) => React.JSX.Element>;
+declare const LinkControl: ControlComponent<(props: Props$1) => React.JSX.Element>;
 
 declare const GapControl: ControlComponent<({ label }: {
     label: string;
@@ -215,17 +215,20 @@ type UseBoundProp<TValue extends PropValue> = {
 declare function useBoundProp<T extends PropValue = PropValue>(): PropKeyContextValue<T, PropType>;
 declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
 
-type ReplaceWhenParams = {
-    value: PropValue;
-};
-type CreateControlReplacement = {
+type ControlReplacement = {
     component: ComponentType;
-    condition: ({ value }: ReplaceWhenParams) => boolean;
+    condition: ({ value }: ConditionArgs) => boolean;
 };
-declare const ControlReplacementProvider: ({ component, condition, children, }: React.PropsWithChildren<CreateControlReplacement>) => React.JSX.Element;
-declare const createControlReplacement: () => {
-    replaceControl: ({ component, condition }: CreateControlReplacement) => void;
-    getControlReplacement: () => CreateControlReplacement;
+type ConditionArgs = {
+    value: PropValue;
+};
+type Props = PropsWithChildren<{
+    replacements: ControlReplacement[];
+}>;
+declare const ControlReplacementsProvider: ({ replacements, children }: Props) => React.JSX.Element;
+declare const createControlReplacementsRegistry: () => {
+    registerControlReplacement: (replacement: ControlReplacement) => void;
+    getControlReplacements: () => ControlReplacement[];
 };
 
 type ControlAdornmentsItems = Array<{
@@ -248,4 +251,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, type FontCategory, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
+export { BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, type FontCategory, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacementsRegistry, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.d.ts

@@ -16,10 +16,10 @@ declare const TextControl: ControlComponent<({ placeholder }: {
     placeholder?: string;
 }) => React.JSX.Element>;
 
-type Props$5 = {
+type Props$6 = {
     placeholder?: string;
 };
-declare const TextAreaControl: ControlComponent<({ placeholder }: Props$5) => React.JSX.Element>;
+declare const TextAreaControl: ControlComponent<({ placeholder }: Props$6) => React.JSX.Element>;
 
 type ExtendedValue = 'auto';
 type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
@@ -35,7 +35,7 @@ declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
 
 declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element>;
 
-type Props$4 = {
+type Props$5 = {
     options: Array<{
         label: string;
         value: StringPropValue['value'];
@@ -43,12 +43,12 @@ type Props$4 = {
     }>;
     onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
 };
-declare const SelectControl: ControlComponent<({ options, onChange }: Props$4) => React.JSX.Element>;
+declare const SelectControl: ControlComponent<({ options, onChange }: Props$5) => React.JSX.Element>;
 
-type Props$3 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
+type Props$4 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
     propTypeUtil?: PropTypeUtil<string, string>;
 };
-declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$3) => React.JSX.Element>;
+declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$4) => React.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];
@@ -61,7 +61,7 @@ type ToggleButtonGroupItem<TValue> = {
 };
 type ExclusiveValue<TValue> = TValue;
 type NonExclusiveValue<TValue> = TValue[];
-type Props$2<TValue> = {
+type Props$3<TValue> = {
     justify?: StackProps['justifyContent'];
     size?: ToggleButtonProps['size'];
     items: ToggleButtonGroupItem<TValue | null>[];
@@ -75,7 +75,7 @@ type Props$2<TValue> = {
     value: ExclusiveValue<TValue>;
     onChange: (value: ExclusiveValue<TValue>) => void;
 });
-declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$2<TValue>) => React.JSX.Element;
+declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$3<TValue>) => React.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
     options: Array<ToggleButtonGroupItem<T> & {
@@ -102,14 +102,14 @@ type Item = {
     bind: PropKey;
 };
 type EqualUnequalItems = [Item, Item, Item, Item];
-type Props$1<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
+type Props$2<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
     tooltipLabel: string;
     items: EqualUnequalItems;
     multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
 };
-declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$1<TMultiPropType, TPropValue>): React.JSX.Element;
+declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$2<TMultiPropType, TPropValue>): React.JSX.Element;
 
 declare const LinkedDimensionsControl: ControlComponent<({ label, isSiteRtl, extendedValues, }: {
     label: string;
@@ -136,7 +136,7 @@ type ControlProps<TControlProps = unknown> = TControlProps & {
     };
 };
 
-type Props = ControlProps<{
+type Props$1 = ControlProps<{
     queryOptions: {
         requestParams: Record<string, unknown>;
         endpoint: string;
@@ -145,7 +145,7 @@ type Props = ControlProps<{
     minInputLength?: number;
     placeholder?: string;
 }>;
-declare const LinkControl: ControlComponent<(props: Props) => React.JSX.Element>;
+declare const LinkControl: ControlComponent<(props: Props$1) => React.JSX.Element>;
 
 declare const GapControl: ControlComponent<({ label }: {
     label: string;
@@ -215,17 +215,20 @@ type UseBoundProp<TValue extends PropValue> = {
 declare function useBoundProp<T extends PropValue = PropValue>(): PropKeyContextValue<T, PropType>;
 declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
 
-type ReplaceWhenParams = {
-    value: PropValue;
-};
-type CreateControlReplacement = {
+type ControlReplacement = {
     component: ComponentType;
-    condition: ({ value }: ReplaceWhenParams) => boolean;
+    condition: ({ value }: ConditionArgs) => boolean;
 };
-declare const ControlReplacementProvider: ({ component, condition, children, }: React.PropsWithChildren<CreateControlReplacement>) => React.JSX.Element;
-declare const createControlReplacement: () => {
-    replaceControl: ({ component, condition }: CreateControlReplacement) => void;
-    getControlReplacement: () => CreateControlReplacement;
+type ConditionArgs = {
+    value: PropValue;
+};
+type Props = PropsWithChildren<{
+    replacements: ControlReplacement[];
+}>;
+declare const ControlReplacementsProvider: ({ replacements, children }: Props) => React.JSX.Element;
+declare const createControlReplacementsRegistry: () => {
+    registerControlReplacement: (replacement: ControlReplacement) => void;
+    getControlReplacements: () => ControlReplacement[];
 };
 
 type ControlAdornmentsItems = Array<{
@@ -248,4 +251,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, type FontCategory, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
+export { BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, type FontCategory, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacementsRegistry, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.js

@@ -37,7 +37,7 @@ __export(index_exports, {
   ControlAdornments: () => ControlAdornments,
   ControlAdornmentsProvider: () => ControlAdornmentsProvider,
   ControlFormLabel: () => ControlFormLabel,
-  ControlReplacementProvider: () => ControlReplacementProvider,
+  ControlReplacementsProvider: () => ControlReplacementsProvider,
   ControlToggleButtonGroup: () => ControlToggleButtonGroup,
   EqualUnequalSizesControl: () => EqualUnequalSizesControl,
   FontFamilyControl: () => FontFamilyControl,
@@ -56,7 +56,7 @@ __export(index_exports, {
   TextControl: () => TextControl,
   ToggleControl: () => ToggleControl,
   UrlControl: () => UrlControl,
-  createControlReplacement: () => createControlReplacement,
+  createControlReplacementsRegistry: () => createControlReplacementsRegistry,
   useBoundProp: () => useBoundProp,
   useControlActions: () => useControlActions,
   useSyncExternalState: () => useSyncExternalState
@@ -258,46 +258,39 @@ var ControlFormLabel = ({ children }) => {
 var React5 = __toESM(require("react"));
 var import_ui2 = require("@elementor/ui");
 
-// src/create-control-replacement.tsx
+// src/control-replacements.tsx
 var React4 = __toESM(require("react"));
 var import_react4 = require("react");
-var ControlReplacementContext = (0, import_react4.createContext)(void 0);
-var ControlReplacementProvider = ({
-  component,
-  condition,
-  children
-}) => {
-  return /* @__PURE__ */ React4.createElement(ControlReplacementContext.Provider, { value: { component, condition } }, children);
+var ControlReplacementContext = (0, import_react4.createContext)([]);
+var ControlReplacementsProvider = ({ replacements, children }) => {
+  return /* @__PURE__ */ React4.createElement(ControlReplacementContext.Provider, { value: replacements }, children);
 };
-var useControlReplacement = () => {
+var useControlReplacement = (OriginalComponent) => {
   const { value } = useBoundProp();
-  const controlReplacement = (0, import_react4.useContext)(ControlReplacementContext);
-  let shouldReplace = false;
+  const replacements = (0, import_react4.useContext)(ControlReplacementContext);
   try {
-    shouldReplace = !!controlReplacement?.condition({ value }) && !!controlReplacement.component;
+    const replacement = replacements.find((r) => r.condition({ value }));
+    return replacement?.component ?? OriginalComponent;
   } catch {
+    return OriginalComponent;
   }
-  return shouldReplace ? controlReplacement?.component : void 0;
 };
-var createControlReplacement = () => {
-  let controlReplacement;
-  function replaceControl({ component, condition }) {
-    controlReplacement = { component, condition };
+var createControlReplacementsRegistry = () => {
+  const controlReplacements = [];
+  function registerControlReplacement(replacement) {
+    controlReplacements.push(replacement);
   }
-  function getControlReplacement() {
-    return controlReplacement;
+  function getControlReplacements() {
+    return controlReplacements;
   }
-  return { replaceControl, getControlReplacement };
+  return { registerControlReplacement, getControlReplacements };
 };
 
 // src/create-control.tsx
 var brandSymbol = Symbol("control");
-function createControl(Component, { supportsReplacements = true } = {}) {
+function createControl(Control5) {
   return (props) => {
-    const ControlReplacement = useControlReplacement();
-    if (ControlReplacement && supportsReplacements) {
-      return /* @__PURE__ */ React5.createElement(import_ui2.ErrorBoundary, { fallback: null }, /* @__PURE__ */ React5.createElement(ControlReplacement, { ...props }));
-    }
+    const Component = useControlReplacement(Control5);
     return /* @__PURE__ */ React5.createElement(import_ui2.ErrorBoundary, { fallback: null }, /* @__PURE__ */ React5.createElement(Component, { ...props }));
   };
 }
@@ -1369,7 +1362,6 @@ function EqualUnequalSizesControl({
       },
       ...(0, import_ui22.bindPopover)(popupState),
       slotProps: {
-        // eslint-disable-next-line react-compiler/react-compiler
         paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } }
       }
     },
@@ -2765,7 +2757,7 @@ var BackgroundControl = createControl(() => {
   ControlAdornments,
   ControlAdornmentsProvider,
   ControlFormLabel,
-  ControlReplacementProvider,
+  ControlReplacementsProvider,
   ControlToggleButtonGroup,
   EqualUnequalSizesControl,
   FontFamilyControl,
@@ -2784,7 +2776,7 @@ var BackgroundControl = createControl(() => {
   TextControl,
   ToggleControl,
   UrlControl,
-  createControlReplacement,
+  createControlReplacementsRegistry,
   useBoundProp,
   useControlActions,
   useSyncExternalState