@elementor/editor-controls 0.1.1 → 0.2.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 (29) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/index.d.mts +38 -30
  3. package/dist/index.d.ts +38 -30
  4. package/dist/index.js +242 -175
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +246 -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/image-control.tsx +7 -18
  17. package/src/controls/image-media-control.tsx +7 -10
  18. package/src/controls/link-control.tsx +90 -0
  19. package/src/controls/linked-dimensions-control.tsx +5 -11
  20. package/src/controls/number-control.tsx +5 -4
  21. package/src/controls/select-control.tsx +7 -7
  22. package/src/controls/size-control.tsx +10 -19
  23. package/src/controls/stroke-control.tsx +8 -15
  24. package/src/controls/text-area-control.tsx +2 -1
  25. package/src/controls/text-control.tsx +2 -1
  26. package/src/controls/toggle-control.tsx +5 -5
  27. package/src/controls/url-control.tsx +29 -0
  28. package/src/hooks/use-sync-external-state.tsx +8 -8
  29. package/src/index.ts +2 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @elementor/editor-controls
2
2
 
3
+ ## 0.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - c393288: Remove support for shorthand prop values.
8
+ - bc728b7: Add type and validation support to `useBoundProp`
9
+
10
+ ### Patch Changes
11
+
12
+ - 91453b3: Update and lock dependencies versions
13
+ - Updated dependencies [c393288]
14
+ - Updated dependencies [bc728b7]
15
+ - Updated dependencies [91453b3]
16
+ - @elementor/editor-props@0.4.0
17
+ - @elementor/wp-media@0.2.3
18
+
3
19
  ## 0.1.1
4
20
 
5
21
  ### 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,12 @@ 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
+
122
123
  declare const ControlLabel: ({ children }: {
123
124
  children: React.ReactNode;
124
125
  }) => React.JSX.Element;
@@ -138,15 +139,22 @@ declare const createControlReplacement: () => {
138
139
 
139
140
  type BoundPropContext<T extends PropValue> = {
140
141
  bind: PropKey;
141
- setValue: (value: T | undefined) => void;
142
- value: T | undefined;
142
+ setValue: (value: T | null) => void;
143
+ value: T;
143
144
  };
144
145
  type BoundPropProviderProps<T extends PropValue> = BoundPropContext<T> & {
145
146
  children: React.ReactNode;
147
+ setValue: (value: T | null) => void;
146
148
  };
147
149
  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>;
150
+ type SetValue<T> = (value: T | null, options?: CreateOptions) => void;
151
+ type UseBoundProp<TValue> = {
152
+ bind: PropKey;
153
+ setValue: SetValue<TValue>;
154
+ value: TValue;
155
+ };
156
+ declare function useBoundProp<TValue extends PropValue>(): BoundPropContext<TValue>;
157
+ declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
150
158
 
151
159
  type ControlActionsContext = {
152
160
  items: Array<{
@@ -159,11 +167,11 @@ declare const ControlActionsProvider: ({ children, items }: ControlActionsProvid
159
167
  declare const useControlActions: () => ControlActionsContext;
160
168
 
161
169
  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;
170
+ external: TValue | null;
171
+ setExternal: (value: TValue | null) => void;
172
+ persistWhen: (value: TValue | null) => boolean;
173
+ fallback: (value: TValue | null) => TValue;
166
174
  };
167
175
  declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
168
176
 
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 };
177
+ export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, 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,12 @@ 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
+
122
123
  declare const ControlLabel: ({ children }: {
123
124
  children: React.ReactNode;
124
125
  }) => React.JSX.Element;
@@ -138,15 +139,22 @@ declare const createControlReplacement: () => {
138
139
 
139
140
  type BoundPropContext<T extends PropValue> = {
140
141
  bind: PropKey;
141
- setValue: (value: T | undefined) => void;
142
- value: T | undefined;
142
+ setValue: (value: T | null) => void;
143
+ value: T;
143
144
  };
144
145
  type BoundPropProviderProps<T extends PropValue> = BoundPropContext<T> & {
145
146
  children: React.ReactNode;
147
+ setValue: (value: T | null) => void;
146
148
  };
147
149
  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>;
150
+ type SetValue<T> = (value: T | null, options?: CreateOptions) => void;
151
+ type UseBoundProp<TValue> = {
152
+ bind: PropKey;
153
+ setValue: SetValue<TValue>;
154
+ value: TValue;
155
+ };
156
+ declare function useBoundProp<TValue extends PropValue>(): BoundPropContext<TValue>;
157
+ declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
150
158
 
151
159
  type ControlActionsContext = {
152
160
  items: Array<{
@@ -159,11 +167,11 @@ declare const ControlActionsProvider: ({ children, items }: ControlActionsProvid
159
167
  declare const useControlActions: () => ControlActionsContext;
160
168
 
161
169
  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;
170
+ external: TValue | null;
171
+ setExternal: (value: TValue | null) => void;
172
+ persistWhen: (value: TValue | null) => boolean;
173
+ fallback: (value: TValue | null) => TValue;
166
174
  };
167
175
  declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
168
176
 
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 };
177
+ export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };