@elementor/editor-editing-panel 1.48.0 → 3.32.0-20

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 (61) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/index.d.mts +78 -47
  3. package/dist/index.d.ts +78 -47
  4. package/dist/index.js +1770 -1406
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +1550 -1157
  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 +18 -3
  11. package/src/components/css-classes/css-class-menu.tsx +10 -3
  12. package/src/components/css-classes/css-class-selector.tsx +10 -2
  13. package/src/components/css-classes/local-class-sub-menu.tsx +23 -0
  14. package/src/components/css-classes/use-apply-and-unapply-class.ts +7 -50
  15. package/src/components/css-classes/use-can-convert-local-class-to-global.ts +22 -0
  16. package/src/components/custom-css.tsx +21 -0
  17. package/src/components/editing-panel-tabs.tsx +1 -5
  18. package/src/components/popover-body.tsx +12 -0
  19. package/src/components/section.tsx +1 -5
  20. package/src/components/settings-tab.tsx +6 -15
  21. package/src/components/style-sections/effects-section/effects-section.tsx +32 -19
  22. package/src/components/style-sections/layout-section/display-field.tsx +11 -20
  23. package/src/components/style-sections/layout-section/flex-order-field.tsx +6 -1
  24. package/src/components/style-sections/layout-section/flex-size-field.tsx +86 -52
  25. package/src/components/style-sections/position-section/offset-field.tsx +2 -2
  26. package/src/components/style-sections/position-section/position-section.tsx +2 -8
  27. package/src/components/style-sections/size-section/size-section.tsx +16 -31
  28. package/src/components/style-sections/typography-section/typography-section.tsx +2 -19
  29. package/src/components/style-tab-collapsible-content.tsx +1 -5
  30. package/src/components/style-tab-section.tsx +1 -5
  31. package/src/components/style-tab.tsx +15 -2
  32. package/src/controls-actions.ts +1 -1
  33. package/src/controls-registry/conditional-field.tsx +26 -0
  34. package/src/controls-registry/control.tsx +2 -2
  35. package/src/controls-registry/controls-registry.tsx +44 -3
  36. package/src/controls-registry/settings-field.tsx +33 -45
  37. package/src/controls-registry/styles-field.tsx +14 -14
  38. package/src/dynamics/components/dynamic-selection-control.tsx +24 -16
  39. package/src/dynamics/components/dynamic-selection.tsx +32 -36
  40. package/src/errors.ts +10 -0
  41. package/src/hooks/use-custom-css.ts +184 -0
  42. package/src/hooks/use-state-by-element.ts +1 -4
  43. package/src/hooks/use-styles-fields.ts +129 -106
  44. package/src/index.ts +9 -10
  45. package/src/init.ts +2 -5
  46. package/src/popover-action.tsx +36 -15
  47. package/src/reset-style-props.tsx +2 -6
  48. package/src/styles-inheritance/components/infotip/value-component.tsx +1 -0
  49. package/src/styles-inheritance/components/styles-inheritance-indicator.tsx +6 -23
  50. package/src/styles-inheritance/components/styles-inheritance-infotip.tsx +18 -9
  51. package/src/styles-inheritance/consts.ts +0 -4
  52. package/src/styles-inheritance/init.ts +1 -4
  53. package/src/styles-inheritance/transformers/background-color-overlay-transformer.tsx +5 -1
  54. package/src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx +3 -3
  55. package/src/styles-inheritance/transformers/background-image-overlay-transformer.tsx +2 -1
  56. package/src/utils/get-styles-provider-color.ts +8 -0
  57. package/src/utils/prop-dependency-utils.ts +156 -0
  58. package/src/components/popover-scrollable-content.tsx +0 -12
  59. package/src/components/style-sections/size-section/object-position-field.tsx +0 -15
  60. package/src/sync/experiments-flags.ts +0 -5
  61. /package/src/components/style-sections/{layout-section → effects-section}/opacity-control-field.tsx +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # Change Log
2
2
 
3
+ ## 1.49.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 90ec4c6: reset functionality added to flex order filed
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [669f39f]
12
+ - Updated dependencies [2e677ee]
13
+ - Updated dependencies [068f659]
14
+ - Updated dependencies [e7cca0a]
15
+ - Updated dependencies [07ca7e9]
16
+ - @elementor/editor-controls@1.4.0
17
+ - @elementor/editor-ui@0.14.1
18
+ - @elementor/editor-canvas@0.27.0
19
+ - @elementor/editor-props@0.17.0
20
+ - @elementor/editor-styles-repository@0.10.6
21
+ - @elementor/editor-elements@0.9.1
22
+ - @elementor/editor-styles@0.6.13
23
+
3
24
  ## 1.48.0
4
25
 
5
26
  ### 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 { PopoverScrollableContent as PopoverScrollableContent$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 PopoverScrollableContent$1>;
75
- declare const PopoverScrollableContent: (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, PopoverScrollableContent, 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 { PopoverScrollableContent as PopoverScrollableContent$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 PopoverScrollableContent$1>;
75
- declare const PopoverScrollableContent: (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, PopoverScrollableContent, 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 };