@elementor/editor-controls 0.35.0 → 1.0.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 (33) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/index.d.mts +24 -13
  3. package/dist/index.d.ts +24 -13
  4. package/dist/index.js +809 -558
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +748 -491
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +5 -4
  9. package/src/bound-prop-context/use-bound-prop.ts +4 -1
  10. package/src/components/control-form-label.tsx +3 -3
  11. package/src/components/control-label.tsx +1 -1
  12. package/src/components/font-family-selector.tsx +8 -10
  13. package/src/components/popover-grid-container.tsx +7 -10
  14. package/src/components/repeater.tsx +2 -4
  15. package/src/components/size-control/size-input.tsx +125 -0
  16. package/src/components/{text-field-inner-selection.tsx → size-control/text-field-inner-selection.tsx} +33 -16
  17. package/src/components/sortable.tsx +4 -2
  18. package/src/components/text-field-popover.tsx +47 -0
  19. package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx +14 -5
  20. package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx +9 -4
  21. package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx +1 -1
  22. package/src/controls/box-shadow-repeater-control.tsx +11 -9
  23. package/src/controls/equal-unequal-sizes-control.tsx +38 -18
  24. package/src/controls/font-family-control/font-family-control.tsx +3 -1
  25. package/src/controls/gap-control.tsx +20 -7
  26. package/src/controls/image-control.tsx +2 -2
  27. package/src/controls/link-control.tsx +1 -1
  28. package/src/controls/linked-dimensions-control.tsx +71 -83
  29. package/src/controls/size-control.tsx +179 -149
  30. package/src/controls/stroke-control.tsx +9 -6
  31. package/src/hooks/use-size-extended-options.ts +21 -0
  32. package/src/index.ts +2 -1
  33. package/src/utils/size-control.ts +10 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,36 @@
1
1
  # @elementor/editor-controls
2
2
 
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 2c11540: Added support for custom values in size control
8
+
9
+ ### Minor Changes
10
+
11
+ - 199c99a: Added support to listen to breakpoint changes in the size-control
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies [ab6320c]
16
+ - Updated dependencies [2c11540]
17
+ - @elementor/editor-props@0.13.0
18
+ - @elementor/editor-elements@0.8.5
19
+
20
+ ## 0.36.0
21
+
22
+ ### Minor Changes
23
+
24
+ - ea5d3df: Export fontFamily components from editor-controls and editing-panel
25
+ - 80dbf43: Extract popover headers to a standalone component inside the Editor UI package.
26
+ - 6eeb59e: Disable controls panel labels by permission.
27
+
28
+ ### Patch Changes
29
+
30
+ - af4e938: Add indicators to group headers
31
+ - Updated dependencies [80dbf43]
32
+ - @elementor/editor-ui@0.11.0
33
+
3
34
  ## 0.35.0
4
35
 
5
36
  ### Minor Changes
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
- import { ReactNode, ComponentType, PropsWithChildren } from 'react';
2
+ import { MutableRefObject, ReactNode, ComponentType, PropsWithChildren } from 'react';
3
3
  import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, PropType, CreateOptions } from '@elementor/editor-props';
4
- import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
4
+ import { UnstableColorFieldProps, ToggleButtonProps, StackProps, FormLabelProps } from '@elementor/ui';
5
5
  import * as _elementor_locations from '@elementor/locations';
6
6
 
7
7
  type ImageControlProps = {
@@ -23,15 +23,20 @@ type Props$6 = {
23
23
  };
24
24
  declare const TextAreaControl: ControlComponent<({ placeholder }: Props$6) => React.JSX.Element>;
25
25
 
26
- type ExtendedValue = 'auto';
27
- type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
26
+ declare const defaultUnits: readonly ["px", "%", "em", "rem", "vw", "vh"];
27
+ declare const defaultExtendedOptions: readonly ["auto", "custom"];
28
+ type Unit = (typeof defaultUnits)[number];
29
+ type ExtendedOption = (typeof defaultExtendedOptions)[number];
30
+
28
31
  type SizeControlProps = {
29
32
  placeholder?: string;
30
33
  startIcon?: React.ReactNode;
31
34
  units?: Unit[];
32
- extendedValues?: ExtendedValue[];
35
+ extendedOptions?: ExtendedOption[];
36
+ disableCustom?: boolean;
37
+ anchorRef?: MutableRefObject<HTMLElement | undefined>;
33
38
  };
34
- declare const SizeControl: ControlComponent<({ units, extendedValues, placeholder, startIcon }: SizeControlProps) => React.JSX.Element>;
39
+ declare const SizeControl: ControlComponent<(props: SizeControlProps) => React.JSX.Element>;
35
40
 
36
41
  declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
37
42
 
@@ -117,10 +122,10 @@ type Props$2<TMultiPropType extends string, TPropValue extends MultiSizePropValu
117
122
  };
118
123
  declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$2<TMultiPropType, TPropValue>): React.JSX.Element;
119
124
 
120
- declare const LinkedDimensionsControl: ControlComponent<({ label, isSiteRtl, extendedValues, }: {
125
+ declare const LinkedDimensionsControl: ControlComponent<({ label, isSiteRtl, extendedOptions, }: {
121
126
  label: string;
122
127
  isSiteRtl?: boolean;
123
- extendedValues?: ExtendedValue[];
128
+ extendedOptions?: ExtendedOption[];
124
129
  }) => React.JSX.Element>;
125
130
 
126
131
  type FontCategory = {
@@ -167,9 +172,15 @@ declare const BackgroundControl: ControlComponent<() => React.JSX.Element>;
167
172
 
168
173
  declare const SwitchControl: ControlComponent<() => React.JSX.Element>;
169
174
 
170
- declare const ControlFormLabel: ({ children }: {
171
- children: React.ReactNode;
172
- }) => React.JSX.Element;
175
+ declare const ControlFormLabel: (props: FormLabelProps) => React.JSX.Element;
176
+
177
+ type FontFamilySelectorProps = {
178
+ fontFamilies: FontCategory[];
179
+ fontFamily: string | null;
180
+ onFontFamilyChange: (fontFamily: string) => void;
181
+ onClose: () => void;
182
+ };
183
+ declare const FontFamilySelector: ({ fontFamilies, fontFamily, onFontFamilyChange, onClose, }: FontFamilySelectorProps) => React.JSX.Element;
173
184
 
174
185
  type AnyComponentType = ComponentType<any>;
175
186
  declare const brandSymbol: unique symbol;
@@ -227,7 +238,7 @@ type UseBoundProp<TValue extends PropValue> = {
227
238
  restoreValue: () => void;
228
239
  disabled?: boolean;
229
240
  };
230
- declare function useBoundProp<T extends PropValue = PropValue>(): PropKeyContextValue<T, PropType>;
241
+ declare function useBoundProp<T extends PropValue = PropValue, P extends PropType = PropType>(): PropKeyContextValue<T, P>;
231
242
  declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
232
243
 
233
244
  type ControlReplacement = {
@@ -273,4 +284,4 @@ type UseInternalStateOptions<TValue> = {
273
284
  };
274
285
  declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
275
286
 
276
- export { AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, type FontCategory, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacementsRegistry, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, useBoundProp, useControlActions, useSyncExternalState };
287
+ export { AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, type FontCategory, FontFamilyControl, FontFamilySelector, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacementsRegistry, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, useBoundProp, useControlActions, useSyncExternalState };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
- import { ReactNode, ComponentType, PropsWithChildren } from 'react';
2
+ import { MutableRefObject, ReactNode, ComponentType, PropsWithChildren } from 'react';
3
3
  import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, PropType, CreateOptions } from '@elementor/editor-props';
4
- import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
4
+ import { UnstableColorFieldProps, ToggleButtonProps, StackProps, FormLabelProps } from '@elementor/ui';
5
5
  import * as _elementor_locations from '@elementor/locations';
6
6
 
7
7
  type ImageControlProps = {
@@ -23,15 +23,20 @@ type Props$6 = {
23
23
  };
24
24
  declare const TextAreaControl: ControlComponent<({ placeholder }: Props$6) => React.JSX.Element>;
25
25
 
26
- type ExtendedValue = 'auto';
27
- type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
26
+ declare const defaultUnits: readonly ["px", "%", "em", "rem", "vw", "vh"];
27
+ declare const defaultExtendedOptions: readonly ["auto", "custom"];
28
+ type Unit = (typeof defaultUnits)[number];
29
+ type ExtendedOption = (typeof defaultExtendedOptions)[number];
30
+
28
31
  type SizeControlProps = {
29
32
  placeholder?: string;
30
33
  startIcon?: React.ReactNode;
31
34
  units?: Unit[];
32
- extendedValues?: ExtendedValue[];
35
+ extendedOptions?: ExtendedOption[];
36
+ disableCustom?: boolean;
37
+ anchorRef?: MutableRefObject<HTMLElement | undefined>;
33
38
  };
34
- declare const SizeControl: ControlComponent<({ units, extendedValues, placeholder, startIcon }: SizeControlProps) => React.JSX.Element>;
39
+ declare const SizeControl: ControlComponent<(props: SizeControlProps) => React.JSX.Element>;
35
40
 
36
41
  declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
37
42
 
@@ -117,10 +122,10 @@ type Props$2<TMultiPropType extends string, TPropValue extends MultiSizePropValu
117
122
  };
118
123
  declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$2<TMultiPropType, TPropValue>): React.JSX.Element;
119
124
 
120
- declare const LinkedDimensionsControl: ControlComponent<({ label, isSiteRtl, extendedValues, }: {
125
+ declare const LinkedDimensionsControl: ControlComponent<({ label, isSiteRtl, extendedOptions, }: {
121
126
  label: string;
122
127
  isSiteRtl?: boolean;
123
- extendedValues?: ExtendedValue[];
128
+ extendedOptions?: ExtendedOption[];
124
129
  }) => React.JSX.Element>;
125
130
 
126
131
  type FontCategory = {
@@ -167,9 +172,15 @@ declare const BackgroundControl: ControlComponent<() => React.JSX.Element>;
167
172
 
168
173
  declare const SwitchControl: ControlComponent<() => React.JSX.Element>;
169
174
 
170
- declare const ControlFormLabel: ({ children }: {
171
- children: React.ReactNode;
172
- }) => React.JSX.Element;
175
+ declare const ControlFormLabel: (props: FormLabelProps) => React.JSX.Element;
176
+
177
+ type FontFamilySelectorProps = {
178
+ fontFamilies: FontCategory[];
179
+ fontFamily: string | null;
180
+ onFontFamilyChange: (fontFamily: string) => void;
181
+ onClose: () => void;
182
+ };
183
+ declare const FontFamilySelector: ({ fontFamilies, fontFamily, onFontFamilyChange, onClose, }: FontFamilySelectorProps) => React.JSX.Element;
173
184
 
174
185
  type AnyComponentType = ComponentType<any>;
175
186
  declare const brandSymbol: unique symbol;
@@ -227,7 +238,7 @@ type UseBoundProp<TValue extends PropValue> = {
227
238
  restoreValue: () => void;
228
239
  disabled?: boolean;
229
240
  };
230
- declare function useBoundProp<T extends PropValue = PropValue>(): PropKeyContextValue<T, PropType>;
241
+ declare function useBoundProp<T extends PropValue = PropValue, P extends PropType = PropType>(): PropKeyContextValue<T, P>;
231
242
  declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
232
243
 
233
244
  type ControlReplacement = {
@@ -273,4 +284,4 @@ type UseInternalStateOptions<TValue> = {
273
284
  };
274
285
  declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
275
286
 
276
- export { AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, type FontCategory, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacementsRegistry, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, useBoundProp, useControlActions, useSyncExternalState };
287
+ export { AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, type FontCategory, FontFamilyControl, FontFamilySelector, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacementsRegistry, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, useBoundProp, useControlActions, useSyncExternalState };