@elementor/editor-controls 0.1.0 → 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 +22 -0
  2. package/dist/index.d.mts +61 -32
  3. package/dist/index.d.ts +61 -32
  4. package/dist/index.js +299 -225
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +304 -226
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +6 -6
  9. package/src/bound-prop-context.tsx +47 -10
  10. package/src/components/control-toggle-button-group.tsx +14 -3
  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 +48 -23
  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 +17 -45
  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 +3 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
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
+
19
+ ## 0.1.1
20
+
21
+ ### Patch Changes
22
+
23
+ - 1926fe1: Update dependencies
24
+
3
25
  ## 0.1.0
4
26
 
5
27
  ### Minor Changes
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
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';
4
- import { UnstableColorFieldProps, ToggleButtonProps } from '@elementor/ui';
3
+ import { StringPropValue, PropValue, PropKey, SizePropValue, PropTypeUtil, CreateOptions } from '@elementor/editor-props';
4
+ import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
5
5
 
6
6
  type AnyComponentType = ComponentType<any>;
7
7
  declare const brandSymbol: unique symbol;
@@ -21,10 +21,10 @@ declare const TextControl: ControlComponent<({ placeholder }: {
21
21
  placeholder?: string;
22
22
  }) => React.JSX.Element>;
23
23
 
24
- type Props$2 = {
24
+ type Props$3 = {
25
25
  placeholder?: string;
26
26
  };
27
- declare const TextAreaControl: ControlComponent<({ placeholder }: Props$2) => React.JSX.Element>;
27
+ declare const TextAreaControl: ControlComponent<({ placeholder }: Props$3) => React.JSX.Element>;
28
28
 
29
29
  type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
30
30
  type SizeControlProps = {
@@ -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$1<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$1<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,37 +60,53 @@ type ToggleButtonGroupItem<TValue> = {
60
60
  renderContent: ({ size }: RenderContentProps) => React.ReactNode;
61
61
  showTooltip?: boolean;
62
62
  };
63
+ type ExclusiveValue<TValue> = TValue;
64
+ type NonExclusiveValue<TValue> = TValue[];
65
+ type Props$1<TValue> = {
66
+ justify?: StackProps['justifyContent'];
67
+ size?: ToggleButtonProps['size'];
68
+ items: ToggleButtonGroupItem<TValue | null>[];
69
+ fullWidth?: boolean;
70
+ } & ({
71
+ exclusive?: false;
72
+ value: NonExclusiveValue<TValue>;
73
+ onChange: (value: NonExclusiveValue<TValue>) => void;
74
+ } | {
75
+ exclusive: true;
76
+ value: ExclusiveValue<TValue>;
77
+ onChange: (value: ExclusiveValue<TValue>) => void;
78
+ });
79
+ declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$1<TValue>) => React.JSX.Element;
63
80
 
64
81
  type ToggleControlProps<T extends PropValue> = {
65
82
  options: ToggleButtonGroupItem<T>[];
66
83
  fullWidth?: boolean;
67
84
  size?: ToggleButtonProps['size'];
68
85
  };
69
- 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>;
70
87
 
71
- declare const NumberControl: ControlComponent<({ placeholder }: {
88
+ declare const NumberControl: ControlComponent<({ placeholder, max, min, step, shouldForceInt, }: {
72
89
  placeholder?: string;
90
+ max?: number;
91
+ min?: number;
92
+ step?: number;
93
+ shouldForceInt?: boolean;
73
94
  }) => React.JSX.Element>;
74
95
 
75
- type MultiSizePropValue<TMultiPropType extends string> = TransformablePropValue<TMultiPropType, Record<string, SizePropValue>>;
76
- type Item<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = {
96
+ type MultiSizePropValue = Record<PropKey, SizePropValue>;
97
+ type Item = {
77
98
  icon: ReactNode;
78
99
  label: string;
79
- bind: keyof TPropValue['value'];
80
- };
81
- type EqualUnequalItems<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = [
82
- Item<TMultiPropType, TPropValue>,
83
- Item<TMultiPropType, TPropValue>,
84
- Item<TMultiPropType, TPropValue>,
85
- Item<TMultiPropType, TPropValue>
86
- ];
87
- 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> = {
88
104
  label: string;
89
105
  icon: ReactNode;
90
- items: EqualUnequalItems<TMultiPropType, TPropValue>;
91
- multiSizeType: TMultiPropType;
106
+ items: EqualUnequalItems;
107
+ multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
92
108
  };
93
- 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;
94
110
 
95
111
  declare const LinkedDimensionsControl: ControlComponent<({ label }: {
96
112
  label: string;
@@ -98,6 +114,12 @@ declare const LinkedDimensionsControl: ControlComponent<({ label }: {
98
114
 
99
115
  declare const FontFamilyControl: ControlComponent<({ fontFamilies }: any) => React.JSX.Element | null>;
100
116
 
117
+ declare const UrlControl: ControlComponent<({ placeholder }: {
118
+ placeholder?: string;
119
+ }) => React.JSX.Element>;
120
+
121
+ declare const LinkControl: ControlComponent<() => React.JSX.Element>;
122
+
101
123
  declare const ControlLabel: ({ children }: {
102
124
  children: React.ReactNode;
103
125
  }) => React.JSX.Element;
@@ -117,15 +139,22 @@ declare const createControlReplacement: () => {
117
139
 
118
140
  type BoundPropContext<T extends PropValue> = {
119
141
  bind: PropKey;
120
- setValue: (value: T | undefined) => void;
121
- value: T | undefined;
142
+ setValue: (value: T | null) => void;
143
+ value: T;
122
144
  };
123
145
  type BoundPropProviderProps<T extends PropValue> = BoundPropContext<T> & {
124
146
  children: React.ReactNode;
147
+ setValue: (value: T | null) => void;
125
148
  };
126
149
  declare const BoundPropProvider: ({ children, value, setValue, bind }: BoundPropProviderProps<PropValue>) => React.JSX.Element;
127
- declare function useBoundProp<T extends PropValue>(): BoundPropContext<T | undefined>;
128
- 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>;
129
158
 
130
159
  type ControlActionsContext = {
131
160
  items: Array<{
@@ -138,11 +167,11 @@ declare const ControlActionsProvider: ({ children, items }: ControlActionsProvid
138
167
  declare const useControlActions: () => ControlActionsContext;
139
168
 
140
169
  type UseInternalStateOptions<TValue> = {
141
- external: TValue | undefined;
142
- setExternal: (value: TValue | undefined) => void;
143
- persistWhen: (value: TValue | undefined) => boolean;
144
- 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;
145
174
  };
146
175
  declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
147
176
 
148
- export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, 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,7 +1,7 @@
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';
4
- import { UnstableColorFieldProps, ToggleButtonProps } from '@elementor/ui';
3
+ import { StringPropValue, PropValue, PropKey, SizePropValue, PropTypeUtil, CreateOptions } from '@elementor/editor-props';
4
+ import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
5
5
 
6
6
  type AnyComponentType = ComponentType<any>;
7
7
  declare const brandSymbol: unique symbol;
@@ -21,10 +21,10 @@ declare const TextControl: ControlComponent<({ placeholder }: {
21
21
  placeholder?: string;
22
22
  }) => React.JSX.Element>;
23
23
 
24
- type Props$2 = {
24
+ type Props$3 = {
25
25
  placeholder?: string;
26
26
  };
27
- declare const TextAreaControl: ControlComponent<({ placeholder }: Props$2) => React.JSX.Element>;
27
+ declare const TextAreaControl: ControlComponent<({ placeholder }: Props$3) => React.JSX.Element>;
28
28
 
29
29
  type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
30
30
  type SizeControlProps = {
@@ -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$1<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$1<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,37 +60,53 @@ type ToggleButtonGroupItem<TValue> = {
60
60
  renderContent: ({ size }: RenderContentProps) => React.ReactNode;
61
61
  showTooltip?: boolean;
62
62
  };
63
+ type ExclusiveValue<TValue> = TValue;
64
+ type NonExclusiveValue<TValue> = TValue[];
65
+ type Props$1<TValue> = {
66
+ justify?: StackProps['justifyContent'];
67
+ size?: ToggleButtonProps['size'];
68
+ items: ToggleButtonGroupItem<TValue | null>[];
69
+ fullWidth?: boolean;
70
+ } & ({
71
+ exclusive?: false;
72
+ value: NonExclusiveValue<TValue>;
73
+ onChange: (value: NonExclusiveValue<TValue>) => void;
74
+ } | {
75
+ exclusive: true;
76
+ value: ExclusiveValue<TValue>;
77
+ onChange: (value: ExclusiveValue<TValue>) => void;
78
+ });
79
+ declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$1<TValue>) => React.JSX.Element;
63
80
 
64
81
  type ToggleControlProps<T extends PropValue> = {
65
82
  options: ToggleButtonGroupItem<T>[];
66
83
  fullWidth?: boolean;
67
84
  size?: ToggleButtonProps['size'];
68
85
  };
69
- 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>;
70
87
 
71
- declare const NumberControl: ControlComponent<({ placeholder }: {
88
+ declare const NumberControl: ControlComponent<({ placeholder, max, min, step, shouldForceInt, }: {
72
89
  placeholder?: string;
90
+ max?: number;
91
+ min?: number;
92
+ step?: number;
93
+ shouldForceInt?: boolean;
73
94
  }) => React.JSX.Element>;
74
95
 
75
- type MultiSizePropValue<TMultiPropType extends string> = TransformablePropValue<TMultiPropType, Record<string, SizePropValue>>;
76
- type Item<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = {
96
+ type MultiSizePropValue = Record<PropKey, SizePropValue>;
97
+ type Item = {
77
98
  icon: ReactNode;
78
99
  label: string;
79
- bind: keyof TPropValue['value'];
80
- };
81
- type EqualUnequalItems<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = [
82
- Item<TMultiPropType, TPropValue>,
83
- Item<TMultiPropType, TPropValue>,
84
- Item<TMultiPropType, TPropValue>,
85
- Item<TMultiPropType, TPropValue>
86
- ];
87
- 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> = {
88
104
  label: string;
89
105
  icon: ReactNode;
90
- items: EqualUnequalItems<TMultiPropType, TPropValue>;
91
- multiSizeType: TMultiPropType;
106
+ items: EqualUnequalItems;
107
+ multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
92
108
  };
93
- 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;
94
110
 
95
111
  declare const LinkedDimensionsControl: ControlComponent<({ label }: {
96
112
  label: string;
@@ -98,6 +114,12 @@ declare const LinkedDimensionsControl: ControlComponent<({ label }: {
98
114
 
99
115
  declare const FontFamilyControl: ControlComponent<({ fontFamilies }: any) => React.JSX.Element | null>;
100
116
 
117
+ declare const UrlControl: ControlComponent<({ placeholder }: {
118
+ placeholder?: string;
119
+ }) => React.JSX.Element>;
120
+
121
+ declare const LinkControl: ControlComponent<() => React.JSX.Element>;
122
+
101
123
  declare const ControlLabel: ({ children }: {
102
124
  children: React.ReactNode;
103
125
  }) => React.JSX.Element;
@@ -117,15 +139,22 @@ declare const createControlReplacement: () => {
117
139
 
118
140
  type BoundPropContext<T extends PropValue> = {
119
141
  bind: PropKey;
120
- setValue: (value: T | undefined) => void;
121
- value: T | undefined;
142
+ setValue: (value: T | null) => void;
143
+ value: T;
122
144
  };
123
145
  type BoundPropProviderProps<T extends PropValue> = BoundPropContext<T> & {
124
146
  children: React.ReactNode;
147
+ setValue: (value: T | null) => void;
125
148
  };
126
149
  declare const BoundPropProvider: ({ children, value, setValue, bind }: BoundPropProviderProps<PropValue>) => React.JSX.Element;
127
- declare function useBoundProp<T extends PropValue>(): BoundPropContext<T | undefined>;
128
- 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>;
129
158
 
130
159
  type ControlActionsContext = {
131
160
  items: Array<{
@@ -138,11 +167,11 @@ declare const ControlActionsProvider: ({ children, items }: ControlActionsProvid
138
167
  declare const useControlActions: () => ControlActionsContext;
139
168
 
140
169
  type UseInternalStateOptions<TValue> = {
141
- external: TValue | undefined;
142
- setExternal: (value: TValue | undefined) => void;
143
- persistWhen: (value: TValue | undefined) => boolean;
144
- 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;
145
174
  };
146
175
  declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
147
176
 
148
- export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, 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 };