@elementor/editor-editing-panel 4.1.0-717 → 4.1.0-719

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 (6) hide show
  1. package/dist/index.js +83 -59
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +67 -43
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +21 -21
  6. package/src/components/style-sections/position-section/position-section.tsx +58 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elementor/editor-editing-panel",
3
- "version": "4.1.0-717",
3
+ "version": "4.1.0-719",
4
4
  "private": false,
5
5
  "author": "Elementor Team",
6
6
  "homepage": "https://elementor.com/",
@@ -39,28 +39,28 @@
39
39
  "dev": "tsup --config=../../tsup.dev.ts"
40
40
  },
41
41
  "dependencies": {
42
- "@elementor/editor": "4.1.0-717",
43
- "@elementor/editor-canvas": "4.1.0-717",
44
- "@elementor/editor-controls": "4.1.0-717",
45
- "@elementor/editor-documents": "4.1.0-717",
46
- "@elementor/editor-elements": "4.1.0-717",
47
- "@elementor/editor-interactions": "4.1.0-717",
48
- "@elementor/editor-panels": "4.1.0-717",
49
- "@elementor/editor-props": "4.1.0-717",
50
- "@elementor/editor-responsive": "4.1.0-717",
51
- "@elementor/editor-styles": "4.1.0-717",
52
- "@elementor/editor-styles-repository": "4.1.0-717",
53
- "@elementor/editor-ui": "4.1.0-717",
54
- "@elementor/editor-v1-adapters": "4.1.0-717",
42
+ "@elementor/editor": "4.1.0-719",
43
+ "@elementor/editor-canvas": "4.1.0-719",
44
+ "@elementor/editor-controls": "4.1.0-719",
45
+ "@elementor/editor-documents": "4.1.0-719",
46
+ "@elementor/editor-elements": "4.1.0-719",
47
+ "@elementor/editor-interactions": "4.1.0-719",
48
+ "@elementor/editor-panels": "4.1.0-719",
49
+ "@elementor/editor-props": "4.1.0-719",
50
+ "@elementor/editor-responsive": "4.1.0-719",
51
+ "@elementor/editor-styles": "4.1.0-719",
52
+ "@elementor/editor-styles-repository": "4.1.0-719",
53
+ "@elementor/editor-ui": "4.1.0-719",
54
+ "@elementor/editor-v1-adapters": "4.1.0-719",
55
55
  "@elementor/icons": "^1.68.0",
56
- "@elementor/editor-variables": "4.1.0-717",
57
- "@elementor/locations": "4.1.0-717",
58
- "@elementor/menus": "4.1.0-717",
59
- "@elementor/schema": "4.1.0-717",
60
- "@elementor/session": "4.1.0-717",
56
+ "@elementor/editor-variables": "4.1.0-719",
57
+ "@elementor/locations": "4.1.0-719",
58
+ "@elementor/menus": "4.1.0-719",
59
+ "@elementor/schema": "4.1.0-719",
60
+ "@elementor/session": "4.1.0-719",
61
61
  "@elementor/ui": "1.36.17",
62
- "@elementor/utils": "4.1.0-717",
63
- "@elementor/wp-media": "4.1.0-717",
62
+ "@elementor/utils": "4.1.0-719",
63
+ "@elementor/wp-media": "4.1.0-719",
64
64
  "@wordpress/i18n": "^5.13.0"
65
65
  },
66
66
  "peerDependencies": {
package/src/components/style-sections/position-section/position-section.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { useCallback, useEffect, useRef } from 'react';
2
3
  import { type StringPropValue } from '@elementor/editor-props';
3
4
  import { useSessionStorage } from '@elementor/session';
4
5
  import { __ } from '@wordpress/i18n';
@@ -28,47 +29,83 @@ type DimensionsValues = {
28
29
  'inset-inline-end': DimensionValue;
29
30
  };
30
31
 
32
+ type PositionDependentValues = DimensionsValues & {
33
+ 'z-index': number | undefined | null;
34
+ };
35
+
36
+ const POSITION_STATIC = 'static' as const;
37
+
31
38
  const POSITION_LABEL = __( 'Position', 'elementor' );
32
39
  const DIMENSIONS_LABEL = __( 'Dimensions', 'elementor' );
33
40
 
41
+ const POSITION_DEPENDENT_PROP_NAMES = [
42
+ 'inset-block-start',
43
+ 'inset-block-end',
44
+ 'inset-inline-start',
45
+ 'inset-inline-end',
46
+ 'z-index',
47
+ ] as const;
48
+
49
+ const CLEARED_POSITION_DEPENDENT_VALUES: Record< ( typeof POSITION_DEPENDENT_PROP_NAMES )[ number ], undefined > = {
50
+ 'inset-block-start': undefined,
51
+ 'inset-block-end': undefined,
52
+ 'inset-inline-start': undefined,
53
+ 'inset-inline-end': undefined,
54
+ 'z-index': undefined,
55
+ };
56
+
34
57
  export const PositionSection = () => {
35
58
  const { value: positionValue } = useStylesField< StringPropValue >( 'position', {
36
59
  history: { propDisplayName: POSITION_LABEL },
37
60
  } );
38
- const { values: dimensions, setValues: setDimensions } = useStylesFields< DimensionsValues >( [
39
- 'inset-block-start',
40
- 'inset-block-end',
41
- 'inset-inline-start',
42
- 'inset-inline-end',
43
- ] );
61
+ const { values: positionDependentValues, setValues: setPositionDependentValues } =
62
+ useStylesFields< PositionDependentValues >( [ ...POSITION_DEPENDENT_PROP_NAMES ] );
44
63
 
45
64
  const [ dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory ] = usePersistDimensions();
46
65
 
66
+ const clearPositionDependentProps = useCallback( () => {
67
+ const dimensions: DimensionsValues = {
68
+ 'inset-block-start': positionDependentValues?.[ 'inset-block-start' ],
69
+ 'inset-block-end': positionDependentValues?.[ 'inset-block-end' ],
70
+ 'inset-inline-start': positionDependentValues?.[ 'inset-inline-start' ],
71
+ 'inset-inline-end': positionDependentValues?.[ 'inset-inline-end' ],
72
+ };
73
+ const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
74
+ const hasValuesToClear =
75
+ Object.values( dimensions ).some( ( v ) => v !== null ) || positionDependentValues?.[ 'z-index' ] !== null;
76
+
77
+ if ( hasValuesToClear ) {
78
+ updateDimensionsHistory( dimensions );
79
+ setPositionDependentValues( CLEARED_POSITION_DEPENDENT_VALUES, meta );
80
+ }
81
+ }, [ positionDependentValues, updateDimensionsHistory, setPositionDependentValues ] );
82
+
83
+ const clearPositionDependentPropsRef = useRef( clearPositionDependentProps );
84
+ clearPositionDependentPropsRef.current = clearPositionDependentProps;
85
+
86
+ useEffect( () => {
87
+ if ( positionValue?.value === POSITION_STATIC || positionValue === null ) {
88
+ clearPositionDependentPropsRef.current();
89
+ }
90
+ }, [ positionValue ] );
91
+
47
92
  const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
48
93
  const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
49
94
 
50
- if ( newPosition === 'static' ) {
51
- if ( dimensions ) {
52
- updateDimensionsHistory( dimensions );
53
- setDimensions(
54
- {
55
- 'inset-block-start': undefined,
56
- 'inset-block-end': undefined,
57
- 'inset-inline-start': undefined,
58
- 'inset-inline-end': undefined,
59
- },
95
+ if ( newPosition === POSITION_STATIC ) {
96
+ clearPositionDependentProps();
97
+ } else if ( previousPosition === POSITION_STATIC ) {
98
+ if ( dimensionsValuesFromHistory ) {
99
+ setPositionDependentValues(
100
+ { ...dimensionsValuesFromHistory, 'z-index': undefined } as PositionDependentValues,
60
101
  meta
61
102
  );
62
- }
63
- } else if ( previousPosition === 'static' ) {
64
- if ( dimensionsValuesFromHistory ) {
65
- setDimensions( dimensionsValuesFromHistory, meta );
66
103
  clearDimensionsHistory();
67
104
  }
68
105
  }
69
106
  };
70
107
 
71
- const isNotStatic = positionValue && positionValue?.value !== 'static';
108
+ const isNotStatic = positionValue && positionValue?.value !== POSITION_STATIC;
72
109
 
73
110
  return (
74
111
  <SectionContent>