@elementor/editor-editing-panel 1.50.0 → 3.32.0-21

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 (55) hide show
  1. package/CHANGELOG.md +0 -27
  2. package/dist/index.d.mts +78 -47
  3. package/dist/index.d.ts +78 -47
  4. package/dist/index.js +1723 -1384
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +1510 -1143
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +22 -22
  9. package/src/components/css-classes/css-class-convert-local.tsx +77 -0
  10. package/src/components/css-classes/css-class-item.tsx +15 -1
  11. package/src/components/css-classes/css-class-menu.tsx +8 -1
  12. package/src/components/css-classes/local-class-sub-menu.tsx +23 -0
  13. package/src/components/css-classes/use-apply-and-unapply-class.ts +7 -50
  14. package/src/components/css-classes/use-can-convert-local-class-to-global.ts +22 -0
  15. package/src/components/custom-css.tsx +21 -0
  16. package/src/components/editing-panel-tabs.tsx +1 -5
  17. package/src/components/section.tsx +1 -5
  18. package/src/components/settings-tab.tsx +6 -15
  19. package/src/components/style-sections/effects-section/effects-section.tsx +30 -22
  20. package/src/components/style-sections/layout-section/display-field.tsx +11 -20
  21. package/src/components/style-sections/layout-section/flex-size-field.tsx +86 -52
  22. package/src/components/style-sections/position-section/offset-field.tsx +2 -2
  23. package/src/components/style-sections/position-section/position-section.tsx +2 -8
  24. package/src/components/style-sections/size-section/size-section.tsx +16 -31
  25. package/src/components/style-sections/typography-section/typography-section.tsx +2 -19
  26. package/src/components/style-tab-collapsible-content.tsx +1 -5
  27. package/src/components/style-tab-section.tsx +1 -5
  28. package/src/components/style-tab.tsx +15 -2
  29. package/src/controls-actions.ts +1 -1
  30. package/src/controls-registry/conditional-field.tsx +26 -0
  31. package/src/controls-registry/control.tsx +2 -2
  32. package/src/controls-registry/controls-registry.tsx +44 -3
  33. package/src/controls-registry/settings-field.tsx +33 -45
  34. package/src/controls-registry/styles-field.tsx +14 -14
  35. package/src/dynamics/components/dynamic-selection-control.tsx +2 -2
  36. package/src/errors.ts +10 -0
  37. package/src/hooks/use-custom-css.ts +184 -0
  38. package/src/hooks/use-state-by-element.ts +1 -4
  39. package/src/hooks/use-styles-fields.ts +129 -106
  40. package/src/index.ts +9 -10
  41. package/src/init.ts +2 -5
  42. package/src/popover-action.tsx +36 -15
  43. package/src/reset-style-props.tsx +2 -6
  44. package/src/styles-inheritance/components/infotip/value-component.tsx +1 -0
  45. package/src/styles-inheritance/components/styles-inheritance-indicator.tsx +6 -23
  46. package/src/styles-inheritance/components/styles-inheritance-infotip.tsx +17 -8
  47. package/src/styles-inheritance/consts.ts +0 -4
  48. package/src/styles-inheritance/init.ts +1 -4
  49. package/src/styles-inheritance/transformers/background-color-overlay-transformer.tsx +5 -1
  50. package/src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx +3 -3
  51. package/src/styles-inheritance/transformers/background-image-overlay-transformer.tsx +2 -1
  52. package/src/utils/prop-dependency-utils.ts +156 -0
  53. package/src/components/style-sections/size-section/object-position-field.tsx +0 -15
  54. package/src/sync/experiments-flags.ts +0 -5
  55. /package/src/components/style-sections/{layout-section → effects-section}/opacity-control-field.tsx +0 -0
package/CHANGELOG.md CHANGED
@@ -1,32 +1,5 @@
1
1
  # Change Log
2
2
 
3
- ## 1.50.0
4
-
5
- ### Minor Changes
6
-
7
- - 64b3e09: Adds support for the backdrop-filter css property to atomic widgets.
8
- - 3d530f6: Change the positioning of the advanced dynamic tags settings.
9
-
10
- ### Patch Changes
11
-
12
- - 22b87fb: Add temporary theme provider to css class selector.
13
- - 0db150c: Update the popover height.
14
- - Updated dependencies [64b3e09]
15
- - Updated dependencies [3904505]
16
- - Updated dependencies [0db150c]
17
- - Updated dependencies [cdbd491]
18
- - Updated dependencies [b90d7db]
19
- - @elementor/editor-controls@1.5.0
20
- - @elementor/editor-canvas@0.28.0
21
- - @elementor/editor-props@0.18.0
22
- - @elementor/editor-ui@0.14.2
23
- - @elementor/editor-styles-repository@0.10.7
24
- - @elementor/editor-elements@0.9.2
25
- - @elementor/editor-styles@0.6.14
26
- - @elementor/editor@0.21.1
27
- - @elementor/editor-documents@0.13.10
28
- - @elementor/editor-panels@0.17.1
29
-
30
3
  ## 1.49.0
31
4
 
32
5
  ### Minor Changes
package/dist/index.d.mts CHANGED
@@ -1,27 +1,37 @@
1
1
  import { FontCategory } from '@elementor/editor-controls';
2
2
  export { useBoundProp } from '@elementor/editor-controls';
3
+ import * as _elementor_locations from '@elementor/locations';
4
+ import { StyleDefinition } from '@elementor/editor-styles';
3
5
  import * as React from 'react';
4
6
  import { ElementType, ComponentType } from 'react';
7
+ import { PopoverBody as PopoverBody$1 } from '@elementor/editor-ui';
5
8
  import * as _elementor_editor_props from '@elementor/editor-props';
6
- import { ChipProps, Theme } from '@elementor/ui';
7
- import * as _elementor_locations from '@elementor/locations';
8
9
  import * as _elementor_menus from '@elementor/menus';
9
- import { PopoverBody as PopoverBody$1 } from '@elementor/editor-ui';
10
+ import { ChipProps, Theme } from '@elementor/ui';
10
11
 
11
- declare const EXPERIMENTAL_FEATURES: {
12
- V_3_30: string;
13
- V_3_31: string;
12
+ type ValidationResult = {
13
+ isValid: true;
14
+ errorMessage: null;
15
+ } | {
16
+ isValid: false;
17
+ errorMessage: string;
14
18
  };
19
+ type ValidationEvent = 'inputChange' | 'create';
15
20
 
16
- type PopoverActionProps = {
17
- title: string;
18
- visible?: boolean;
19
- icon: ElementType;
20
- content: ComponentType<{
21
- close: () => void;
22
- }>;
23
- };
24
- declare function PopoverAction({ title, visible, icon: Icon, content: PopoverContent, }: PopoverActionProps): React.JSX.Element | null;
21
+ declare const injectIntoCssClassConvert: (args: _elementor_locations.InjectArgs<{
22
+ styleDef: StyleDefinition | null;
23
+ successCallback: (newId: string) => void;
24
+ canConvert: boolean;
25
+ }>) => void;
26
+
27
+ declare const injectIntoClassSelectorActions: (args: _elementor_locations.InjectArgs<object>) => void;
28
+
29
+ type Props = React.ComponentProps<typeof PopoverBody$1>;
30
+ declare const PopoverBody: (props: Props) => React.JSX.Element;
31
+
32
+ declare const useFontFamilies: () => FontCategory[];
33
+
34
+ declare const useSectionWidth: () => number;
25
35
 
26
36
  declare const registerControlReplacement: (replacement: {
27
37
  component: React.ComponentType;
@@ -30,32 +40,6 @@ declare const registerControlReplacement: (replacement: {
30
40
  }) => boolean;
31
41
  }) => void;
32
42
 
33
- type Colors = {
34
- name: ChipProps['color'];
35
- getThemeColor: ((theme: Theme) => string) | null;
36
- };
37
- declare const registerStyleProviderToColors: (provider: string, colors: Colors) => void;
38
-
39
- declare const injectIntoClassSelectorActions: (args: _elementor_locations.InjectArgs<object>) => void;
40
-
41
- declare const usePanelActions: () => {
42
- open: () => Promise<void>;
43
- close: () => Promise<void>;
44
- };
45
- declare const usePanelStatus: () => {
46
- isOpen: boolean;
47
- isBlocked: boolean;
48
- };
49
-
50
- type ValidationResult = {
51
- isValid: true;
52
- errorMessage: null;
53
- } | {
54
- isValid: false;
55
- errorMessage: string;
56
- };
57
- type ValidationEvent = 'inputChange' | 'create';
58
-
59
43
  type ActionProps = {
60
44
  title: string;
61
45
  visible?: boolean;
@@ -64,18 +48,65 @@ type ActionProps = {
64
48
  };
65
49
  declare function Action({ title, visible, icon: Icon, onClick }: ActionProps): React.JSX.Element | null;
66
50
 
51
+ type PopoverActionProps = {
52
+ title: string;
53
+ visible?: boolean;
54
+ icon: ElementType;
55
+ content: ComponentType<{
56
+ close: () => void;
57
+ }>;
58
+ };
59
+ declare function PopoverAction({ title, visible, icon: Icon, content: PopoverContent }: PopoverActionProps): React.JSX.Element | null;
60
+
67
61
  declare const controlActionsMenu: _elementor_menus.Menu<{
68
62
  Action: typeof Action;
69
63
  PopoverAction: typeof PopoverAction;
70
64
  }, "default">;
71
65
 
72
- declare const useFontFamilies: () => FontCategory[];
66
+ declare function init(): void;
73
67
 
74
- type Props = React.ComponentProps<typeof PopoverBody$1>;
75
- declare const PopoverBody: (props: Props) => React.JSX.Element;
68
+ declare const usePanelActions: () => {
69
+ open: () => Promise<void>;
70
+ close: () => Promise<void>;
71
+ };
72
+ declare const usePanelStatus: () => {
73
+ isOpen: boolean;
74
+ isBlocked: boolean;
75
+ };
76
76
 
77
- declare const useSectionWidth: () => number;
77
+ type Colors = {
78
+ name: ChipProps['color'];
79
+ getThemeColor: ((theme: Theme) => string) | null;
80
+ };
81
+ declare const registerStyleProviderToColors: (provider: string, colors: Colors) => void;
78
82
 
79
- declare function init(): void;
83
+ declare const stylesInheritanceTransformersRegistry: {
84
+ register(type: _elementor_editor_props.PropTypeKey, transformer: ((value: any, options: {
85
+ key: string;
86
+ signal?: AbortSignal;
87
+ }) => unknown) & {
88
+ __transformer: true;
89
+ }): any;
90
+ registerFallback(transformer: ((value: any, options: {
91
+ key: string;
92
+ signal?: AbortSignal;
93
+ }) => unknown) & {
94
+ __transformer: true;
95
+ }): any;
96
+ get(type: _elementor_editor_props.PropTypeKey): (((value: any, options: {
97
+ key: string;
98
+ signal?: AbortSignal;
99
+ }) => unknown) & {
100
+ __transformer: true;
101
+ }) | null;
102
+ all(): {
103
+ [x: string]: ((value: any, options: {
104
+ key: string;
105
+ signal?: AbortSignal;
106
+ }) => unknown) & {
107
+ __transformer: true;
108
+ };
109
+ };
110
+ };
80
111
 
81
- export { EXPERIMENTAL_FEATURES, type PopoverActionProps, PopoverBody, type ValidationEvent, type ValidationResult, controlActionsMenu, init, injectIntoClassSelectorActions, registerControlReplacement, registerStyleProviderToColors, useFontFamilies, usePanelActions, usePanelStatus, useSectionWidth };
112
+ export { type PopoverActionProps, PopoverBody, type ValidationEvent, type ValidationResult, controlActionsMenu, init, injectIntoClassSelectorActions, injectIntoCssClassConvert, registerControlReplacement, registerStyleProviderToColors, stylesInheritanceTransformersRegistry, useFontFamilies, usePanelActions, usePanelStatus, useSectionWidth };
package/dist/index.d.ts CHANGED
@@ -1,27 +1,37 @@
1
1
  import { FontCategory } from '@elementor/editor-controls';
2
2
  export { useBoundProp } from '@elementor/editor-controls';
3
+ import * as _elementor_locations from '@elementor/locations';
4
+ import { StyleDefinition } from '@elementor/editor-styles';
3
5
  import * as React from 'react';
4
6
  import { ElementType, ComponentType } from 'react';
7
+ import { PopoverBody as PopoverBody$1 } from '@elementor/editor-ui';
5
8
  import * as _elementor_editor_props from '@elementor/editor-props';
6
- import { ChipProps, Theme } from '@elementor/ui';
7
- import * as _elementor_locations from '@elementor/locations';
8
9
  import * as _elementor_menus from '@elementor/menus';
9
- import { PopoverBody as PopoverBody$1 } from '@elementor/editor-ui';
10
+ import { ChipProps, Theme } from '@elementor/ui';
10
11
 
11
- declare const EXPERIMENTAL_FEATURES: {
12
- V_3_30: string;
13
- V_3_31: string;
12
+ type ValidationResult = {
13
+ isValid: true;
14
+ errorMessage: null;
15
+ } | {
16
+ isValid: false;
17
+ errorMessage: string;
14
18
  };
19
+ type ValidationEvent = 'inputChange' | 'create';
15
20
 
16
- type PopoverActionProps = {
17
- title: string;
18
- visible?: boolean;
19
- icon: ElementType;
20
- content: ComponentType<{
21
- close: () => void;
22
- }>;
23
- };
24
- declare function PopoverAction({ title, visible, icon: Icon, content: PopoverContent, }: PopoverActionProps): React.JSX.Element | null;
21
+ declare const injectIntoCssClassConvert: (args: _elementor_locations.InjectArgs<{
22
+ styleDef: StyleDefinition | null;
23
+ successCallback: (newId: string) => void;
24
+ canConvert: boolean;
25
+ }>) => void;
26
+
27
+ declare const injectIntoClassSelectorActions: (args: _elementor_locations.InjectArgs<object>) => void;
28
+
29
+ type Props = React.ComponentProps<typeof PopoverBody$1>;
30
+ declare const PopoverBody: (props: Props) => React.JSX.Element;
31
+
32
+ declare const useFontFamilies: () => FontCategory[];
33
+
34
+ declare const useSectionWidth: () => number;
25
35
 
26
36
  declare const registerControlReplacement: (replacement: {
27
37
  component: React.ComponentType;
@@ -30,32 +40,6 @@ declare const registerControlReplacement: (replacement: {
30
40
  }) => boolean;
31
41
  }) => void;
32
42
 
33
- type Colors = {
34
- name: ChipProps['color'];
35
- getThemeColor: ((theme: Theme) => string) | null;
36
- };
37
- declare const registerStyleProviderToColors: (provider: string, colors: Colors) => void;
38
-
39
- declare const injectIntoClassSelectorActions: (args: _elementor_locations.InjectArgs<object>) => void;
40
-
41
- declare const usePanelActions: () => {
42
- open: () => Promise<void>;
43
- close: () => Promise<void>;
44
- };
45
- declare const usePanelStatus: () => {
46
- isOpen: boolean;
47
- isBlocked: boolean;
48
- };
49
-
50
- type ValidationResult = {
51
- isValid: true;
52
- errorMessage: null;
53
- } | {
54
- isValid: false;
55
- errorMessage: string;
56
- };
57
- type ValidationEvent = 'inputChange' | 'create';
58
-
59
43
  type ActionProps = {
60
44
  title: string;
61
45
  visible?: boolean;
@@ -64,18 +48,65 @@ type ActionProps = {
64
48
  };
65
49
  declare function Action({ title, visible, icon: Icon, onClick }: ActionProps): React.JSX.Element | null;
66
50
 
51
+ type PopoverActionProps = {
52
+ title: string;
53
+ visible?: boolean;
54
+ icon: ElementType;
55
+ content: ComponentType<{
56
+ close: () => void;
57
+ }>;
58
+ };
59
+ declare function PopoverAction({ title, visible, icon: Icon, content: PopoverContent }: PopoverActionProps): React.JSX.Element | null;
60
+
67
61
  declare const controlActionsMenu: _elementor_menus.Menu<{
68
62
  Action: typeof Action;
69
63
  PopoverAction: typeof PopoverAction;
70
64
  }, "default">;
71
65
 
72
- declare const useFontFamilies: () => FontCategory[];
66
+ declare function init(): void;
73
67
 
74
- type Props = React.ComponentProps<typeof PopoverBody$1>;
75
- declare const PopoverBody: (props: Props) => React.JSX.Element;
68
+ declare const usePanelActions: () => {
69
+ open: () => Promise<void>;
70
+ close: () => Promise<void>;
71
+ };
72
+ declare const usePanelStatus: () => {
73
+ isOpen: boolean;
74
+ isBlocked: boolean;
75
+ };
76
76
 
77
- declare const useSectionWidth: () => number;
77
+ type Colors = {
78
+ name: ChipProps['color'];
79
+ getThemeColor: ((theme: Theme) => string) | null;
80
+ };
81
+ declare const registerStyleProviderToColors: (provider: string, colors: Colors) => void;
78
82
 
79
- declare function init(): void;
83
+ declare const stylesInheritanceTransformersRegistry: {
84
+ register(type: _elementor_editor_props.PropTypeKey, transformer: ((value: any, options: {
85
+ key: string;
86
+ signal?: AbortSignal;
87
+ }) => unknown) & {
88
+ __transformer: true;
89
+ }): any;
90
+ registerFallback(transformer: ((value: any, options: {
91
+ key: string;
92
+ signal?: AbortSignal;
93
+ }) => unknown) & {
94
+ __transformer: true;
95
+ }): any;
96
+ get(type: _elementor_editor_props.PropTypeKey): (((value: any, options: {
97
+ key: string;
98
+ signal?: AbortSignal;
99
+ }) => unknown) & {
100
+ __transformer: true;
101
+ }) | null;
102
+ all(): {
103
+ [x: string]: ((value: any, options: {
104
+ key: string;
105
+ signal?: AbortSignal;
106
+ }) => unknown) & {
107
+ __transformer: true;
108
+ };
109
+ };
110
+ };
80
111
 
81
- export { EXPERIMENTAL_FEATURES, type PopoverActionProps, PopoverBody, type ValidationEvent, type ValidationResult, controlActionsMenu, init, injectIntoClassSelectorActions, registerControlReplacement, registerStyleProviderToColors, useFontFamilies, usePanelActions, usePanelStatus, useSectionWidth };
112
+ export { type PopoverActionProps, PopoverBody, type ValidationEvent, type ValidationResult, controlActionsMenu, init, injectIntoClassSelectorActions, injectIntoCssClassConvert, registerControlReplacement, registerStyleProviderToColors, stylesInheritanceTransformersRegistry, useFontFamilies, usePanelActions, usePanelStatus, useSectionWidth };