@elementor/editor-controls 0.1.1 → 0.3.0

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 (30) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/index.d.mts +42 -30
  3. package/dist/index.d.ts +42 -30
  4. package/dist/index.js +304 -178
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +304 -175
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +3 -3
  9. package/src/bound-prop-context.tsx +47 -10
  10. package/src/components/control-toggle-button-group.tsx +2 -2
  11. package/src/controls/background-overlay-repeater-control.tsx +3 -7
  12. package/src/controls/box-shadow-repeater-control.tsx +9 -9
  13. package/src/controls/color-control.tsx +4 -13
  14. package/src/controls/equal-unequal-sizes-control.tsx +100 -100
  15. package/src/controls/font-family-control.tsx +2 -1
  16. package/src/controls/gap-control.tsx +88 -0
  17. package/src/controls/image-control.tsx +7 -18
  18. package/src/controls/image-media-control.tsx +7 -10
  19. package/src/controls/link-control.tsx +90 -0
  20. package/src/controls/linked-dimensions-control.tsx +5 -11
  21. package/src/controls/number-control.tsx +5 -4
  22. package/src/controls/select-control.tsx +7 -7
  23. package/src/controls/size-control.tsx +10 -19
  24. package/src/controls/stroke-control.tsx +8 -15
  25. package/src/controls/text-area-control.tsx +2 -1
  26. package/src/controls/text-control.tsx +2 -1
  27. package/src/controls/toggle-control.tsx +5 -5
  28. package/src/controls/url-control.tsx +29 -0
  29. package/src/hooks/use-sync-external-state.tsx +8 -8
  30. package/src/index.ts +3 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @elementor/editor-controls
2
2
 
3
+ ## 0.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - ff35b95: Added Gaps field with a control, proptype and a transformer
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [8943189]
12
+ - Updated dependencies [ff35b95]
13
+ - @elementor/editor-props@0.5.0
14
+
15
+ ## 0.2.0
16
+
17
+ ### Minor Changes
18
+
19
+ - c393288: Remove support for shorthand prop values.
20
+ - bc728b7: Add type and validation support to `useBoundProp`
21
+
22
+ ### Patch Changes
23
+
24
+ - 91453b3: Update and lock dependencies versions
25
+ - Updated dependencies [c393288]
26
+ - Updated dependencies [bc728b7]
27
+ - Updated dependencies [91453b3]
28
+ - @elementor/editor-props@0.4.0
29
+ - @elementor/wp-media@0.2.3
30
+
3
31
  ## 0.1.1
4
32
 
5
33
  ### Patch 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 { PropValue, TransformablePropValue, SizePropValue, PropKey } from '@elementor/editor-props';
3
+ import { StringPropValue, PropValue, PropKey, SizePropValue, PropTypeUtil, CreateOptions } from '@elementor/editor-props';
4
4
  import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
5
5
 
6
6
  type AnyComponentType = ComponentType<any>;
@@ -40,14 +40,14 @@ declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element
40
40
 
41
41
  declare const BackgroundOverlayRepeaterControl: ControlComponent<() => React.JSX.Element>;
42
42
 
43
- type Props$2<T> = {
43
+ type Props$2 = {
44
44
  options: Array<{
45
45
  label: string;
46
- value: T;
46
+ value: StringPropValue['value'];
47
47
  disabled?: boolean;
48
48
  }>;
49
49
  };
50
- declare const SelectControl: ControlComponent<(<T extends PropValue>({ options }: Props$2<T>) => React.JSX.Element)>;
50
+ declare const SelectControl: ControlComponent<({ options }: Props$2) => React.JSX.Element>;
51
51
 
52
52
  declare const ColorControl: ControlComponent<(props: Partial<Omit<UnstableColorFieldProps, "value" | "onChange">>) => React.JSX.Element>;
53
53
 
@@ -60,12 +60,12 @@ type ToggleButtonGroupItem<TValue> = {
60
60
  renderContent: ({ size }: RenderContentProps) => React.ReactNode;
61
61
  showTooltip?: boolean;
62
62
  };
63
- type ExclusiveValue<TValue> = TValue | null;
63
+ type ExclusiveValue<TValue> = TValue;
64
64
  type NonExclusiveValue<TValue> = TValue[];
65
65
  type Props$1<TValue> = {
66
66
  justify?: StackProps['justifyContent'];
67
67
  size?: ToggleButtonProps['size'];
68
- items: ToggleButtonGroupItem<TValue>[];
68
+ items: ToggleButtonGroupItem<TValue | null>[];
69
69
  fullWidth?: boolean;
70
70
  } & ({
71
71
  exclusive?: false;
@@ -83,7 +83,7 @@ type ToggleControlProps<T extends PropValue> = {
83
83
  fullWidth?: boolean;
84
84
  size?: ToggleButtonProps['size'];
85
85
  };
86
- declare const ToggleControl: ControlComponent<(<T extends PropValue>({ options, fullWidth, size }: ToggleControlProps<T>) => React.JSX.Element)>;
86
+ declare const ToggleControl: ControlComponent<({ options, fullWidth, size }: ToggleControlProps<StringPropValue["value"]>) => React.JSX.Element>;
87
87
 
88
88
  declare const NumberControl: ControlComponent<({ placeholder, max, min, step, shouldForceInt, }: {
89
89
  placeholder?: string;
@@ -93,25 +93,20 @@ declare const NumberControl: ControlComponent<({ placeholder, max, min, step, sh
93
93
  shouldForceInt?: boolean;
94
94
  }) => React.JSX.Element>;
95
95
 
96
- type MultiSizePropValue<TMultiPropType extends string> = TransformablePropValue<TMultiPropType, Record<string, SizePropValue>>;
97
- type Item<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = {
96
+ type MultiSizePropValue = Record<PropKey, SizePropValue>;
97
+ type Item = {
98
98
  icon: ReactNode;
99
99
  label: string;
100
- bind: keyof TPropValue['value'];
101
- };
102
- type EqualUnequalItems<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = [
103
- Item<TMultiPropType, TPropValue>,
104
- Item<TMultiPropType, TPropValue>,
105
- Item<TMultiPropType, TPropValue>,
106
- Item<TMultiPropType, TPropValue>
107
- ];
108
- type Props<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = {
100
+ bind: PropKey;
101
+ };
102
+ type EqualUnequalItems = [Item, Item, Item, Item];
103
+ type Props<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
109
104
  label: string;
110
105
  icon: ReactNode;
111
- items: EqualUnequalItems<TMultiPropType, TPropValue>;
112
- multiSizeType: TMultiPropType;
106
+ items: EqualUnequalItems;
107
+ multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
113
108
  };
114
- declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>>({ label, icon, items, multiSizeType }: Props<TMultiPropType, TPropValue>): React.JSX.Element;
109
+ declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props<TMultiPropType, TPropValue>): React.JSX.Element;
115
110
 
116
111
  declare const LinkedDimensionsControl: ControlComponent<({ label }: {
117
112
  label: string;
@@ -119,6 +114,16 @@ declare const LinkedDimensionsControl: ControlComponent<({ label }: {
119
114
 
120
115
  declare const FontFamilyControl: ControlComponent<({ fontFamilies }: any) => React.JSX.Element | null>;
121
116
 
117
+ declare const UrlControl: ControlComponent<({ placeholder }: {
118
+ placeholder?: string;
119
+ }) => React.JSX.Element>;
120
+
121
+ declare const LinkControl: ControlComponent<() => React.JSX.Element>;
122
+
123
+ declare const GapControl: ControlComponent<({ label }: {
124
+ label: string;
125
+ }) => React.JSX.Element>;
126
+
122
127
  declare const ControlLabel: ({ children }: {
123
128
  children: React.ReactNode;
124
129
  }) => React.JSX.Element;
@@ -138,15 +143,22 @@ declare const createControlReplacement: () => {
138
143
 
139
144
  type BoundPropContext<T extends PropValue> = {
140
145
  bind: PropKey;
141
- setValue: (value: T | undefined) => void;
142
- value: T | undefined;
146
+ setValue: (value: T | null) => void;
147
+ value: T;
143
148
  };
144
149
  type BoundPropProviderProps<T extends PropValue> = BoundPropContext<T> & {
145
150
  children: React.ReactNode;
151
+ setValue: (value: T | null) => void;
146
152
  };
147
153
  declare const BoundPropProvider: ({ children, value, setValue, bind }: BoundPropProviderProps<PropValue>) => React.JSX.Element;
148
- declare function useBoundProp<T extends PropValue>(): BoundPropContext<T | undefined>;
149
- declare function useBoundProp<T extends PropValue>(defaultValue: T): BoundPropContext<T>;
154
+ type SetValue<T> = (value: T | null, options?: CreateOptions) => void;
155
+ type UseBoundProp<TValue> = {
156
+ bind: PropKey;
157
+ setValue: SetValue<TValue>;
158
+ value: TValue;
159
+ };
160
+ declare function useBoundProp<TValue extends PropValue>(): BoundPropContext<TValue>;
161
+ declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
150
162
 
151
163
  type ControlActionsContext = {
152
164
  items: Array<{
@@ -159,11 +171,11 @@ declare const ControlActionsProvider: ({ children, items }: ControlActionsProvid
159
171
  declare const useControlActions: () => ControlActionsContext;
160
172
 
161
173
  type UseInternalStateOptions<TValue> = {
162
- external: TValue | undefined;
163
- setExternal: (value: TValue | undefined) => void;
164
- persistWhen: (value: TValue | undefined) => boolean;
165
- fallback: (value: TValue | undefined) => TValue;
174
+ external: TValue | null;
175
+ setExternal: (value: TValue | null) => void;
176
+ persistWhen: (value: TValue | null) => boolean;
177
+ fallback: (value: TValue | null) => TValue;
166
178
  };
167
179
  declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
168
180
 
169
- export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, ImageControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
181
+ export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, 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 };
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 { PropValue, TransformablePropValue, SizePropValue, PropKey } from '@elementor/editor-props';
3
+ import { StringPropValue, PropValue, PropKey, SizePropValue, PropTypeUtil, CreateOptions } from '@elementor/editor-props';
4
4
  import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
5
5
 
6
6
  type AnyComponentType = ComponentType<any>;
@@ -40,14 +40,14 @@ declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element
40
40
 
41
41
  declare const BackgroundOverlayRepeaterControl: ControlComponent<() => React.JSX.Element>;
42
42
 
43
- type Props$2<T> = {
43
+ type Props$2 = {
44
44
  options: Array<{
45
45
  label: string;
46
- value: T;
46
+ value: StringPropValue['value'];
47
47
  disabled?: boolean;
48
48
  }>;
49
49
  };
50
- declare const SelectControl: ControlComponent<(<T extends PropValue>({ options }: Props$2<T>) => React.JSX.Element)>;
50
+ declare const SelectControl: ControlComponent<({ options }: Props$2) => React.JSX.Element>;
51
51
 
52
52
  declare const ColorControl: ControlComponent<(props: Partial<Omit<UnstableColorFieldProps, "value" | "onChange">>) => React.JSX.Element>;
53
53
 
@@ -60,12 +60,12 @@ type ToggleButtonGroupItem<TValue> = {
60
60
  renderContent: ({ size }: RenderContentProps) => React.ReactNode;
61
61
  showTooltip?: boolean;
62
62
  };
63
- type ExclusiveValue<TValue> = TValue | null;
63
+ type ExclusiveValue<TValue> = TValue;
64
64
  type NonExclusiveValue<TValue> = TValue[];
65
65
  type Props$1<TValue> = {
66
66
  justify?: StackProps['justifyContent'];
67
67
  size?: ToggleButtonProps['size'];
68
- items: ToggleButtonGroupItem<TValue>[];
68
+ items: ToggleButtonGroupItem<TValue | null>[];
69
69
  fullWidth?: boolean;
70
70
  } & ({
71
71
  exclusive?: false;
@@ -83,7 +83,7 @@ type ToggleControlProps<T extends PropValue> = {
83
83
  fullWidth?: boolean;
84
84
  size?: ToggleButtonProps['size'];
85
85
  };
86
- declare const ToggleControl: ControlComponent<(<T extends PropValue>({ options, fullWidth, size }: ToggleControlProps<T>) => React.JSX.Element)>;
86
+ declare const ToggleControl: ControlComponent<({ options, fullWidth, size }: ToggleControlProps<StringPropValue["value"]>) => React.JSX.Element>;
87
87
 
88
88
  declare const NumberControl: ControlComponent<({ placeholder, max, min, step, shouldForceInt, }: {
89
89
  placeholder?: string;
@@ -93,25 +93,20 @@ declare const NumberControl: ControlComponent<({ placeholder, max, min, step, sh
93
93
  shouldForceInt?: boolean;
94
94
  }) => React.JSX.Element>;
95
95
 
96
- type MultiSizePropValue<TMultiPropType extends string> = TransformablePropValue<TMultiPropType, Record<string, SizePropValue>>;
97
- type Item<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = {
96
+ type MultiSizePropValue = Record<PropKey, SizePropValue>;
97
+ type Item = {
98
98
  icon: ReactNode;
99
99
  label: string;
100
- bind: keyof TPropValue['value'];
101
- };
102
- type EqualUnequalItems<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = [
103
- Item<TMultiPropType, TPropValue>,
104
- Item<TMultiPropType, TPropValue>,
105
- Item<TMultiPropType, TPropValue>,
106
- Item<TMultiPropType, TPropValue>
107
- ];
108
- type Props<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = {
100
+ bind: PropKey;
101
+ };
102
+ type EqualUnequalItems = [Item, Item, Item, Item];
103
+ type Props<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
109
104
  label: string;
110
105
  icon: ReactNode;
111
- items: EqualUnequalItems<TMultiPropType, TPropValue>;
112
- multiSizeType: TMultiPropType;
106
+ items: EqualUnequalItems;
107
+ multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
113
108
  };
114
- declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>>({ label, icon, items, multiSizeType }: Props<TMultiPropType, TPropValue>): React.JSX.Element;
109
+ declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props<TMultiPropType, TPropValue>): React.JSX.Element;
115
110
 
116
111
  declare const LinkedDimensionsControl: ControlComponent<({ label }: {
117
112
  label: string;
@@ -119,6 +114,16 @@ declare const LinkedDimensionsControl: ControlComponent<({ label }: {
119
114
 
120
115
  declare const FontFamilyControl: ControlComponent<({ fontFamilies }: any) => React.JSX.Element | null>;
121
116
 
117
+ declare const UrlControl: ControlComponent<({ placeholder }: {
118
+ placeholder?: string;
119
+ }) => React.JSX.Element>;
120
+
121
+ declare const LinkControl: ControlComponent<() => React.JSX.Element>;
122
+
123
+ declare const GapControl: ControlComponent<({ label }: {
124
+ label: string;
125
+ }) => React.JSX.Element>;
126
+
122
127
  declare const ControlLabel: ({ children }: {
123
128
  children: React.ReactNode;
124
129
  }) => React.JSX.Element;
@@ -138,15 +143,22 @@ declare const createControlReplacement: () => {
138
143
 
139
144
  type BoundPropContext<T extends PropValue> = {
140
145
  bind: PropKey;
141
- setValue: (value: T | undefined) => void;
142
- value: T | undefined;
146
+ setValue: (value: T | null) => void;
147
+ value: T;
143
148
  };
144
149
  type BoundPropProviderProps<T extends PropValue> = BoundPropContext<T> & {
145
150
  children: React.ReactNode;
151
+ setValue: (value: T | null) => void;
146
152
  };
147
153
  declare const BoundPropProvider: ({ children, value, setValue, bind }: BoundPropProviderProps<PropValue>) => React.JSX.Element;
148
- declare function useBoundProp<T extends PropValue>(): BoundPropContext<T | undefined>;
149
- declare function useBoundProp<T extends PropValue>(defaultValue: T): BoundPropContext<T>;
154
+ type SetValue<T> = (value: T | null, options?: CreateOptions) => void;
155
+ type UseBoundProp<TValue> = {
156
+ bind: PropKey;
157
+ setValue: SetValue<TValue>;
158
+ value: TValue;
159
+ };
160
+ declare function useBoundProp<TValue extends PropValue>(): BoundPropContext<TValue>;
161
+ declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
150
162
 
151
163
  type ControlActionsContext = {
152
164
  items: Array<{
@@ -159,11 +171,11 @@ declare const ControlActionsProvider: ({ children, items }: ControlActionsProvid
159
171
  declare const useControlActions: () => ControlActionsContext;
160
172
 
161
173
  type UseInternalStateOptions<TValue> = {
162
- external: TValue | undefined;
163
- setExternal: (value: TValue | undefined) => void;
164
- persistWhen: (value: TValue | undefined) => boolean;
165
- fallback: (value: TValue | undefined) => TValue;
174
+ external: TValue | null;
175
+ setExternal: (value: TValue | null) => void;
176
+ persistWhen: (value: TValue | null) => boolean;
177
+ fallback: (value: TValue | null) => TValue;
166
178
  };
167
179
  declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
168
180
 
169
- export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, ImageControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
181
+ export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, 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 };