@elementor/editor-controls 0.4.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @elementor/editor-controls
 
+## 0.6.0
+
+### Minor Changes
+
+- 45038fc: Added background image overlay control
+- e742340: Revert background overlay control unneeded change
+- dab01fd: Created an autocomplete control and extended link control.
+- 43f1684: Save previous link value in session
+- 499c531: Add binds path to prop context.
+
+### Patch Changes
+
+- Updated dependencies [45038fc]
+- Updated dependencies [43f1684]
+  - @elementor/editor-props@0.7.0
+  - @elementor/session@0.1.0
+
+## 0.5.0
+
+### Minor Changes
+
+- a2245c5: Change prop provider infra to support nested props.
+
+### Patch Changes
+
+- 5fc8d7b: Removed extra prop provider from background control.
+- Updated dependencies [a2245c5]
+  - @elementor/editor-props@0.6.0
+
 ## 0.4.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ComponentType, ReactNode, PropsWithChildren } from 'react';
-import { StringPropValue, PropValue, PropKey, SizePropValue, PropTypeUtil, CreateOptions } from '@elementor/editor-props';
+import { urlPropTypeUtil, stringPropTypeUtil, StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, CreateOptions, PropType } from '@elementor/editor-props';
 import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
 
 type AnyComponentType = ComponentType<any>;
@@ -17,14 +17,31 @@ type ImageControlProps = {
 };
 declare const ImageControl: ControlComponent<(props: ImageControlProps) => React.JSX.Element>;
 
+type Option = {
+    label: string;
+    groupLabel?: never;
+};
+type GroupedOption = {
+    label: string;
+    groupLabel: string;
+};
+type Props$6 = {
+    options: Record<string, Option> | Record<string, GroupedOption>;
+    allowCustomValues?: boolean;
+    placeholder?: string;
+    propType?: typeof urlPropTypeUtil | typeof stringPropTypeUtil;
+    minInputLength?: number;
+};
+declare const AutocompleteControl: ControlComponent<({ options, placeholder, allowCustomValues, propType, minInputLength, }: Props$6) => React.JSX.Element>;
+
 declare const TextControl: ControlComponent<({ placeholder }: {
     placeholder?: string;
 }) => React.JSX.Element>;
 
-type Props$3 = {
+type Props$5 = {
     placeholder?: string;
 };
-declare const TextAreaControl: ControlComponent<({ placeholder }: Props$3) => React.JSX.Element>;
+declare const TextAreaControl: ControlComponent<({ placeholder }: Props$5) => React.JSX.Element>;
 
 type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
 type SizeControlProps = {
@@ -38,7 +55,7 @@ declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
 
 declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element>;
 
-type Props$2 = {
+type Props$4 = {
     options: Array<{
         label: string;
         value: StringPropValue['value'];
@@ -46,9 +63,12 @@ type Props$2 = {
     }>;
     onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
 };
-declare const SelectControl: ControlComponent<({ options, onChange }: Props$2) => React.JSX.Element>;
+declare const SelectControl: ControlComponent<({ options, onChange }: Props$4) => React.JSX.Element>;
 
-declare const ColorControl: ControlComponent<(props: Partial<Omit<UnstableColorFieldProps, "value" | "onChange">>) => React.JSX.Element>;
+type Props$3 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
+    propTypeUtil?: PropTypeUtil<string, string>;
+};
+declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$3) => React.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];
@@ -61,7 +81,7 @@ type ToggleButtonGroupItem<TValue> = {
 };
 type ExclusiveValue<TValue> = TValue;
 type NonExclusiveValue<TValue> = TValue[];
-type Props$1<TValue> = {
+type Props$2<TValue> = {
     justify?: StackProps['justifyContent'];
     size?: ToggleButtonProps['size'];
     items: ToggleButtonGroupItem<TValue | null>[];
@@ -75,7 +95,7 @@ type Props$1<TValue> = {
     value: ExclusiveValue<TValue>;
     onChange: (value: ExclusiveValue<TValue>) => void;
 });
-declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$1<TValue>) => React.JSX.Element;
+declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$2<TValue>) => React.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
     options: ToggleButtonGroupItem<T>[];
@@ -99,13 +119,13 @@ type Item = {
     bind: PropKey;
 };
 type EqualUnequalItems = [Item, Item, Item, Item];
-type Props<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
+type Props$1<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
     items: EqualUnequalItems;
     multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
 };
-declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props<TMultiPropType, TPropValue>): React.JSX.Element;
+declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props$1<TMultiPropType, TPropValue>): React.JSX.Element;
 
 declare const LinkedDimensionsControl: ControlComponent<({ label }: {
     label: string;
@@ -117,7 +137,12 @@ declare const UrlControl: ControlComponent<({ placeholder }: {
     placeholder?: string;
 }) => React.JSX.Element>;
 
-declare const LinkControl: ControlComponent<() => React.JSX.Element>;
+type Props = {
+    options?: Record<string, Option> | Record<string, GroupedOption>;
+    allowCustomValues?: boolean;
+    placeholder?: string;
+};
+declare const LinkControl: ControlComponent<(props?: Props) => React.JSX.Element>;
 
 declare const GapControl: ControlComponent<({ label }: {
     label: string;
@@ -140,23 +165,39 @@ type ControlActionsProviderProps = PropsWithChildren<ControlActionsContext>;
 declare const ControlActionsProvider: ({ children, items }: ControlActionsProviderProps) => React.JSX.Element;
 declare const useControlActions: () => ControlActionsContext;
 
-type BoundPropContext<T extends PropValue> = {
+type SetValueMeta = {
+    bind?: PropKey;
+};
+type SetValue<T> = (value: T, options?: CreateOptions, meta?: SetValueMeta) => void;
+type PropContext<T extends PropValue, P extends PropType> = {
+    setValue: SetValue<T>;
+    value: T | null;
+    propType: P;
+};
+declare const PropContext: React.Context<PropContext<PropValue, PropType> | null>;
+type PropProviderProps<T extends PropValue, P extends PropType> = React.PropsWithChildren<PropContext<T, P>>;
+declare const PropProvider: <T extends PropValue, P extends PropType>({ children, value, setValue, propType, }: PropProviderProps<T, P>) => React.JSX.Element;
+
+type PropKeyContextValue<T, P> = {
     bind: PropKey;
-    setValue: (value: T | null) => void;
+    setValue: SetValue<T>;
     value: T;
+    propType: P;
+    path: PropKey[];
 };
-type BoundPropProviderProps<T extends PropValue> = BoundPropContext<T> & {
-    children: React.ReactNode;
-    setValue: (value: T | null) => void;
-};
-declare const BoundPropProvider: ({ children, value, setValue, bind }: BoundPropProviderProps<PropValue>) => React.JSX.Element;
-type SetValue<T> = (value: T | null, options?: CreateOptions) => void;
-type UseBoundProp<TValue> = {
+type PropKeyProviderProps = React.PropsWithChildren<{
+    bind: PropKey;
+}>;
+declare const PropKeyProvider: ({ children, bind }: PropKeyProviderProps) => React.JSX.Element;
+
+type UseBoundProp<TValue extends PropValue> = {
     bind: PropKey;
-    setValue: SetValue<TValue>;
+    setValue: SetValue<TValue | null>;
     value: TValue;
+    propType: PropType;
+    path: PropKey[];
 };
-declare function useBoundProp<TValue extends PropValue>(): BoundPropContext<TValue>;
+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 = {
@@ -180,4 +221,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { BackgroundControl, BoundPropProvider, type BoundPropProviderProps, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
+export { AutocompleteControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ComponentType, ReactNode, PropsWithChildren } from 'react';
-import { StringPropValue, PropValue, PropKey, SizePropValue, PropTypeUtil, CreateOptions } from '@elementor/editor-props';
+import { urlPropTypeUtil, stringPropTypeUtil, StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, CreateOptions, PropType } from '@elementor/editor-props';
 import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
 
 type AnyComponentType = ComponentType<any>;
@@ -17,14 +17,31 @@ type ImageControlProps = {
 };
 declare const ImageControl: ControlComponent<(props: ImageControlProps) => React.JSX.Element>;
 
+type Option = {
+    label: string;
+    groupLabel?: never;
+};
+type GroupedOption = {
+    label: string;
+    groupLabel: string;
+};
+type Props$6 = {
+    options: Record<string, Option> | Record<string, GroupedOption>;
+    allowCustomValues?: boolean;
+    placeholder?: string;
+    propType?: typeof urlPropTypeUtil | typeof stringPropTypeUtil;
+    minInputLength?: number;
+};
+declare const AutocompleteControl: ControlComponent<({ options, placeholder, allowCustomValues, propType, minInputLength, }: Props$6) => React.JSX.Element>;
+
 declare const TextControl: ControlComponent<({ placeholder }: {
     placeholder?: string;
 }) => React.JSX.Element>;
 
-type Props$3 = {
+type Props$5 = {
     placeholder?: string;
 };
-declare const TextAreaControl: ControlComponent<({ placeholder }: Props$3) => React.JSX.Element>;
+declare const TextAreaControl: ControlComponent<({ placeholder }: Props$5) => React.JSX.Element>;
 
 type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
 type SizeControlProps = {
@@ -38,7 +55,7 @@ declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
 
 declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element>;
 
-type Props$2 = {
+type Props$4 = {
     options: Array<{
         label: string;
         value: StringPropValue['value'];
@@ -46,9 +63,12 @@ type Props$2 = {
     }>;
     onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
 };
-declare const SelectControl: ControlComponent<({ options, onChange }: Props$2) => React.JSX.Element>;
+declare const SelectControl: ControlComponent<({ options, onChange }: Props$4) => React.JSX.Element>;
 
-declare const ColorControl: ControlComponent<(props: Partial<Omit<UnstableColorFieldProps, "value" | "onChange">>) => React.JSX.Element>;
+type Props$3 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
+    propTypeUtil?: PropTypeUtil<string, string>;
+};
+declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$3) => React.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];
@@ -61,7 +81,7 @@ type ToggleButtonGroupItem<TValue> = {
 };
 type ExclusiveValue<TValue> = TValue;
 type NonExclusiveValue<TValue> = TValue[];
-type Props$1<TValue> = {
+type Props$2<TValue> = {
     justify?: StackProps['justifyContent'];
     size?: ToggleButtonProps['size'];
     items: ToggleButtonGroupItem<TValue | null>[];
@@ -75,7 +95,7 @@ type Props$1<TValue> = {
     value: ExclusiveValue<TValue>;
     onChange: (value: ExclusiveValue<TValue>) => void;
 });
-declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$1<TValue>) => React.JSX.Element;
+declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$2<TValue>) => React.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
     options: ToggleButtonGroupItem<T>[];
@@ -99,13 +119,13 @@ type Item = {
     bind: PropKey;
 };
 type EqualUnequalItems = [Item, Item, Item, Item];
-type Props<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
+type Props$1<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
     items: EqualUnequalItems;
     multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
 };
-declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props<TMultiPropType, TPropValue>): React.JSX.Element;
+declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props$1<TMultiPropType, TPropValue>): React.JSX.Element;
 
 declare const LinkedDimensionsControl: ControlComponent<({ label }: {
     label: string;
@@ -117,7 +137,12 @@ declare const UrlControl: ControlComponent<({ placeholder }: {
     placeholder?: string;
 }) => React.JSX.Element>;
 
-declare const LinkControl: ControlComponent<() => React.JSX.Element>;
+type Props = {
+    options?: Record<string, Option> | Record<string, GroupedOption>;
+    allowCustomValues?: boolean;
+    placeholder?: string;
+};
+declare const LinkControl: ControlComponent<(props?: Props) => React.JSX.Element>;
 
 declare const GapControl: ControlComponent<({ label }: {
     label: string;
@@ -140,23 +165,39 @@ type ControlActionsProviderProps = PropsWithChildren<ControlActionsContext>;
 declare const ControlActionsProvider: ({ children, items }: ControlActionsProviderProps) => React.JSX.Element;
 declare const useControlActions: () => ControlActionsContext;
 
-type BoundPropContext<T extends PropValue> = {
+type SetValueMeta = {
+    bind?: PropKey;
+};
+type SetValue<T> = (value: T, options?: CreateOptions, meta?: SetValueMeta) => void;
+type PropContext<T extends PropValue, P extends PropType> = {
+    setValue: SetValue<T>;
+    value: T | null;
+    propType: P;
+};
+declare const PropContext: React.Context<PropContext<PropValue, PropType> | null>;
+type PropProviderProps<T extends PropValue, P extends PropType> = React.PropsWithChildren<PropContext<T, P>>;
+declare const PropProvider: <T extends PropValue, P extends PropType>({ children, value, setValue, propType, }: PropProviderProps<T, P>) => React.JSX.Element;
+
+type PropKeyContextValue<T, P> = {
     bind: PropKey;
-    setValue: (value: T | null) => void;
+    setValue: SetValue<T>;
     value: T;
+    propType: P;
+    path: PropKey[];
 };
-type BoundPropProviderProps<T extends PropValue> = BoundPropContext<T> & {
-    children: React.ReactNode;
-    setValue: (value: T | null) => void;
-};
-declare const BoundPropProvider: ({ children, value, setValue, bind }: BoundPropProviderProps<PropValue>) => React.JSX.Element;
-type SetValue<T> = (value: T | null, options?: CreateOptions) => void;
-type UseBoundProp<TValue> = {
+type PropKeyProviderProps = React.PropsWithChildren<{
+    bind: PropKey;
+}>;
+declare const PropKeyProvider: ({ children, bind }: PropKeyProviderProps) => React.JSX.Element;
+
+type UseBoundProp<TValue extends PropValue> = {
     bind: PropKey;
-    setValue: SetValue<TValue>;
+    setValue: SetValue<TValue | null>;
     value: TValue;
+    propType: PropType;
+    path: PropKey[];
 };
-declare function useBoundProp<TValue extends PropValue>(): BoundPropContext<TValue>;
+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 = {
@@ -180,4 +221,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { BackgroundControl, BoundPropProvider, type BoundPropProviderProps, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
+export { AutocompleteControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };