@elementor/editor-controls 0.5.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/index.d.mts +37 -13
  3. package/dist/index.d.ts +37 -13
  4. package/dist/index.js +443 -234
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +389 -171
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +4 -3
  9. package/src/bound-prop-context/prop-context.tsx +11 -2
  10. package/src/bound-prop-context/prop-key-context.tsx +9 -2
  11. package/src/bound-prop-context/use-bound-prop.ts +1 -0
  12. package/src/components/repeater.tsx +5 -2
  13. package/src/controls/autocomplete-control.tsx +181 -0
  14. package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx +32 -2
  15. package/src/controls/equal-unequal-sizes-control.tsx +1 -1
  16. package/src/controls/image-media-control.tsx +1 -1
  17. package/src/controls/link-control.tsx +56 -26
  18. package/src/controls/linked-dimensions-control.tsx +60 -34
  19. package/src/controls/url-control.tsx +7 -2
  20. package/src/index.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,36 @@
1
1
  # @elementor/editor-controls
2
2
 
3
+ ## 0.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - bd1b038: Change text for Mixed state
8
+ - 4e5ea74: support SVG upload
9
+ - 7582ba6: Modify linked dimensions control functionality
10
+ - 7654921: Allow any strings in link control
11
+ - Updated dependencies [4e5ea74]
12
+ - Updated dependencies [7582ba6]
13
+ - Updated dependencies [7654921]
14
+ - @elementor/wp-media@0.3.0
15
+ - @elementor/editor-props@0.7.1
16
+
17
+ ## 0.6.0
18
+
19
+ ### Minor Changes
20
+
21
+ - 45038fc: Added background image overlay control
22
+ - e742340: Revert background overlay control unneeded change
23
+ - dab01fd: Created an autocomplete control and extended link control.
24
+ - 43f1684: Save previous link value in session
25
+ - 499c531: Add binds path to prop context.
26
+
27
+ ### Patch Changes
28
+
29
+ - Updated dependencies [45038fc]
30
+ - Updated dependencies [43f1684]
31
+ - @elementor/editor-props@0.7.0
32
+ - @elementor/session@0.1.0
33
+
3
34
  ## 0.5.0
4
35
 
5
36
  ### Minor Changes
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { ComponentType, ReactNode, PropsWithChildren } from 'react';
3
- import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, CreateOptions, PropType } from '@elementor/editor-props';
3
+ import { urlPropTypeUtil, stringPropTypeUtil, StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, CreateOptions, PropType } from '@elementor/editor-props';
4
4
  import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
5
5
 
6
6
  type AnyComponentType = ComponentType<any>;
@@ -17,14 +17,31 @@ type ImageControlProps = {
17
17
  };
18
18
  declare const ImageControl: ControlComponent<(props: ImageControlProps) => React.JSX.Element>;
19
19
 
20
+ type Option = {
21
+ label: string;
22
+ groupLabel?: never;
23
+ };
24
+ type GroupedOption = {
25
+ label: string;
26
+ groupLabel: string;
27
+ };
28
+ type Props$6 = {
29
+ options: Record<string, Option> | Record<string, GroupedOption>;
30
+ allowCustomValues?: boolean;
31
+ placeholder?: string;
32
+ propType?: typeof urlPropTypeUtil | typeof stringPropTypeUtil;
33
+ minInputLength?: number;
34
+ };
35
+ declare const AutocompleteControl: ControlComponent<({ options, placeholder, allowCustomValues, propType, minInputLength, }: Props$6) => React.JSX.Element>;
36
+
20
37
  declare const TextControl: ControlComponent<({ placeholder }: {
21
38
  placeholder?: string;
22
39
  }) => React.JSX.Element>;
23
40
 
24
- type Props$4 = {
41
+ type Props$5 = {
25
42
  placeholder?: string;
26
43
  };
27
- declare const TextAreaControl: ControlComponent<({ placeholder }: Props$4) => React.JSX.Element>;
44
+ declare const TextAreaControl: ControlComponent<({ placeholder }: Props$5) => React.JSX.Element>;
28
45
 
29
46
  type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
30
47
  type SizeControlProps = {
@@ -38,7 +55,7 @@ declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
38
55
 
39
56
  declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element>;
40
57
 
41
- type Props$3 = {
58
+ type Props$4 = {
42
59
  options: Array<{
43
60
  label: string;
44
61
  value: StringPropValue['value'];
@@ -46,12 +63,12 @@ type Props$3 = {
46
63
  }>;
47
64
  onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
48
65
  };
49
- declare const SelectControl: ControlComponent<({ options, onChange }: Props$3) => React.JSX.Element>;
66
+ declare const SelectControl: ControlComponent<({ options, onChange }: Props$4) => React.JSX.Element>;
50
67
 
51
- type Props$2 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
68
+ type Props$3 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
52
69
  propTypeUtil?: PropTypeUtil<string, string>;
53
70
  };
54
- declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$2) => React.JSX.Element>;
71
+ declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$3) => React.JSX.Element>;
55
72
 
56
73
  type RenderContentProps = {
57
74
  size: ToggleButtonProps['size'];
@@ -64,7 +81,7 @@ type ToggleButtonGroupItem<TValue> = {
64
81
  };
65
82
  type ExclusiveValue<TValue> = TValue;
66
83
  type NonExclusiveValue<TValue> = TValue[];
67
- type Props$1<TValue> = {
84
+ type Props$2<TValue> = {
68
85
  justify?: StackProps['justifyContent'];
69
86
  size?: ToggleButtonProps['size'];
70
87
  items: ToggleButtonGroupItem<TValue | null>[];
@@ -78,7 +95,7 @@ type Props$1<TValue> = {
78
95
  value: ExclusiveValue<TValue>;
79
96
  onChange: (value: ExclusiveValue<TValue>) => void;
80
97
  });
81
- declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$1<TValue>) => React.JSX.Element;
98
+ declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$2<TValue>) => React.JSX.Element;
82
99
 
83
100
  type ToggleControlProps<T extends PropValue> = {
84
101
  options: ToggleButtonGroupItem<T>[];
@@ -102,13 +119,13 @@ type Item = {
102
119
  bind: PropKey;
103
120
  };
104
121
  type EqualUnequalItems = [Item, Item, Item, Item];
105
- type Props<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
122
+ type Props$1<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
106
123
  label: string;
107
124
  icon: ReactNode;
108
125
  items: EqualUnequalItems;
109
126
  multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
110
127
  };
111
- declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props<TMultiPropType, TPropValue>): React.JSX.Element;
128
+ declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props$1<TMultiPropType, TPropValue>): React.JSX.Element;
112
129
 
113
130
  declare const LinkedDimensionsControl: ControlComponent<({ label }: {
114
131
  label: string;
@@ -120,7 +137,12 @@ declare const UrlControl: ControlComponent<({ placeholder }: {
120
137
  placeholder?: string;
121
138
  }) => React.JSX.Element>;
122
139
 
123
- declare const LinkControl: ControlComponent<() => React.JSX.Element>;
140
+ type Props = {
141
+ options?: Record<string, Option> | Record<string, GroupedOption>;
142
+ allowCustomValues?: boolean;
143
+ placeholder?: string;
144
+ };
145
+ declare const LinkControl: ControlComponent<(props?: Props) => React.JSX.Element>;
124
146
 
125
147
  declare const GapControl: ControlComponent<({ label }: {
126
148
  label: string;
@@ -161,6 +183,7 @@ type PropKeyContextValue<T, P> = {
161
183
  setValue: SetValue<T>;
162
184
  value: T;
163
185
  propType: P;
186
+ path: PropKey[];
164
187
  };
165
188
  type PropKeyProviderProps = React.PropsWithChildren<{
166
189
  bind: PropKey;
@@ -172,6 +195,7 @@ type UseBoundProp<TValue extends PropValue> = {
172
195
  setValue: SetValue<TValue | null>;
173
196
  value: TValue;
174
197
  propType: PropType;
198
+ path: PropKey[];
175
199
  };
176
200
  declare function useBoundProp<T extends PropValue = PropValue>(): PropKeyContextValue<T, PropType>;
177
201
  declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
@@ -197,4 +221,4 @@ type UseInternalStateOptions<TValue> = {
197
221
  };
198
222
  declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
199
223
 
200
- export { 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 };
224
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { ComponentType, ReactNode, PropsWithChildren } from 'react';
3
- import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, CreateOptions, PropType } from '@elementor/editor-props';
3
+ import { urlPropTypeUtil, stringPropTypeUtil, StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, CreateOptions, PropType } from '@elementor/editor-props';
4
4
  import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
5
5
 
6
6
  type AnyComponentType = ComponentType<any>;
@@ -17,14 +17,31 @@ type ImageControlProps = {
17
17
  };
18
18
  declare const ImageControl: ControlComponent<(props: ImageControlProps) => React.JSX.Element>;
19
19
 
20
+ type Option = {
21
+ label: string;
22
+ groupLabel?: never;
23
+ };
24
+ type GroupedOption = {
25
+ label: string;
26
+ groupLabel: string;
27
+ };
28
+ type Props$6 = {
29
+ options: Record<string, Option> | Record<string, GroupedOption>;
30
+ allowCustomValues?: boolean;
31
+ placeholder?: string;
32
+ propType?: typeof urlPropTypeUtil | typeof stringPropTypeUtil;
33
+ minInputLength?: number;
34
+ };
35
+ declare const AutocompleteControl: ControlComponent<({ options, placeholder, allowCustomValues, propType, minInputLength, }: Props$6) => React.JSX.Element>;
36
+
20
37
  declare const TextControl: ControlComponent<({ placeholder }: {
21
38
  placeholder?: string;
22
39
  }) => React.JSX.Element>;
23
40
 
24
- type Props$4 = {
41
+ type Props$5 = {
25
42
  placeholder?: string;
26
43
  };
27
- declare const TextAreaControl: ControlComponent<({ placeholder }: Props$4) => React.JSX.Element>;
44
+ declare const TextAreaControl: ControlComponent<({ placeholder }: Props$5) => React.JSX.Element>;
28
45
 
29
46
  type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
30
47
  type SizeControlProps = {
@@ -38,7 +55,7 @@ declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
38
55
 
39
56
  declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element>;
40
57
 
41
- type Props$3 = {
58
+ type Props$4 = {
42
59
  options: Array<{
43
60
  label: string;
44
61
  value: StringPropValue['value'];
@@ -46,12 +63,12 @@ type Props$3 = {
46
63
  }>;
47
64
  onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
48
65
  };
49
- declare const SelectControl: ControlComponent<({ options, onChange }: Props$3) => React.JSX.Element>;
66
+ declare const SelectControl: ControlComponent<({ options, onChange }: Props$4) => React.JSX.Element>;
50
67
 
51
- type Props$2 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
68
+ type Props$3 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
52
69
  propTypeUtil?: PropTypeUtil<string, string>;
53
70
  };
54
- declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$2) => React.JSX.Element>;
71
+ declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$3) => React.JSX.Element>;
55
72
 
56
73
  type RenderContentProps = {
57
74
  size: ToggleButtonProps['size'];
@@ -64,7 +81,7 @@ type ToggleButtonGroupItem<TValue> = {
64
81
  };
65
82
  type ExclusiveValue<TValue> = TValue;
66
83
  type NonExclusiveValue<TValue> = TValue[];
67
- type Props$1<TValue> = {
84
+ type Props$2<TValue> = {
68
85
  justify?: StackProps['justifyContent'];
69
86
  size?: ToggleButtonProps['size'];
70
87
  items: ToggleButtonGroupItem<TValue | null>[];
@@ -78,7 +95,7 @@ type Props$1<TValue> = {
78
95
  value: ExclusiveValue<TValue>;
79
96
  onChange: (value: ExclusiveValue<TValue>) => void;
80
97
  });
81
- declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$1<TValue>) => React.JSX.Element;
98
+ declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$2<TValue>) => React.JSX.Element;
82
99
 
83
100
  type ToggleControlProps<T extends PropValue> = {
84
101
  options: ToggleButtonGroupItem<T>[];
@@ -102,13 +119,13 @@ type Item = {
102
119
  bind: PropKey;
103
120
  };
104
121
  type EqualUnequalItems = [Item, Item, Item, Item];
105
- type Props<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
122
+ type Props$1<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
106
123
  label: string;
107
124
  icon: ReactNode;
108
125
  items: EqualUnequalItems;
109
126
  multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
110
127
  };
111
- declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props<TMultiPropType, TPropValue>): React.JSX.Element;
128
+ declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props$1<TMultiPropType, TPropValue>): React.JSX.Element;
112
129
 
113
130
  declare const LinkedDimensionsControl: ControlComponent<({ label }: {
114
131
  label: string;
@@ -120,7 +137,12 @@ declare const UrlControl: ControlComponent<({ placeholder }: {
120
137
  placeholder?: string;
121
138
  }) => React.JSX.Element>;
122
139
 
123
- declare const LinkControl: ControlComponent<() => React.JSX.Element>;
140
+ type Props = {
141
+ options?: Record<string, Option> | Record<string, GroupedOption>;
142
+ allowCustomValues?: boolean;
143
+ placeholder?: string;
144
+ };
145
+ declare const LinkControl: ControlComponent<(props?: Props) => React.JSX.Element>;
124
146
 
125
147
  declare const GapControl: ControlComponent<({ label }: {
126
148
  label: string;
@@ -161,6 +183,7 @@ type PropKeyContextValue<T, P> = {
161
183
  setValue: SetValue<T>;
162
184
  value: T;
163
185
  propType: P;
186
+ path: PropKey[];
164
187
  };
165
188
  type PropKeyProviderProps = React.PropsWithChildren<{
166
189
  bind: PropKey;
@@ -172,6 +195,7 @@ type UseBoundProp<TValue extends PropValue> = {
172
195
  setValue: SetValue<TValue | null>;
173
196
  value: TValue;
174
197
  propType: PropType;
198
+ path: PropKey[];
175
199
  };
176
200
  declare function useBoundProp<T extends PropValue = PropValue>(): PropKeyContextValue<T, PropType>;
177
201
  declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
@@ -197,4 +221,4 @@ type UseInternalStateOptions<TValue> = {
197
221
  };
198
222
  declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
199
223
 
200
- export { 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 };
224
+ 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 };