@elementor/editor-components 3.35.0-381 → 3.35.0-382

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 (9) hide show
  1. package/dist/index.js +229 -211
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +183 -165
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +22 -22
  6. package/src/components/component-properties-panel/component-properties-panel-content.tsx +9 -3
  7. package/src/components/component-properties-panel/properties-empty-state.tsx +38 -31
  8. package/src/components/component-properties-panel/sortable.tsx +1 -1
  9. package/src/components/components-tab/component-introduction.tsx +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/editor-components",
3
3
  "description": "Elementor editor components",
4
- "version": "3.35.0-381",
4
+ "version": "3.35.0-382",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -40,30 +40,30 @@
40
40
  "dev": "tsup --config=../../tsup.dev.ts"
41
41
  },
42
42
  "dependencies": {
43
- "@elementor/editor": "3.35.0-381",
44
- "@elementor/editor-canvas": "3.35.0-381",
45
- "@elementor/editor-controls": "3.35.0-381",
46
- "@elementor/editor-documents": "3.35.0-381",
47
- "@elementor/editor-editing-panel": "3.35.0-381",
48
- "@elementor/editor-elements": "3.35.0-381",
49
- "@elementor/editor-elements-panel": "3.35.0-381",
50
- "@elementor/editor-mcp": "3.35.0-381",
51
- "@elementor/editor-panels": "3.35.0-381",
52
- "@elementor/editor-props": "3.35.0-381",
53
- "@elementor/editor-styles-repository": "3.35.0-381",
54
- "@elementor/editor-ui": "3.35.0-381",
55
- "@elementor/editor-v1-adapters": "3.35.0-381",
56
- "@elementor/http-client": "3.35.0-381",
43
+ "@elementor/editor": "3.35.0-382",
44
+ "@elementor/editor-canvas": "3.35.0-382",
45
+ "@elementor/editor-controls": "3.35.0-382",
46
+ "@elementor/editor-documents": "3.35.0-382",
47
+ "@elementor/editor-editing-panel": "3.35.0-382",
48
+ "@elementor/editor-elements": "3.35.0-382",
49
+ "@elementor/editor-elements-panel": "3.35.0-382",
50
+ "@elementor/editor-mcp": "3.35.0-382",
51
+ "@elementor/editor-panels": "3.35.0-382",
52
+ "@elementor/editor-props": "3.35.0-382",
53
+ "@elementor/editor-styles-repository": "3.35.0-382",
54
+ "@elementor/editor-ui": "3.35.0-382",
55
+ "@elementor/editor-v1-adapters": "3.35.0-382",
56
+ "@elementor/http-client": "3.35.0-382",
57
57
  "@elementor/icons": "^1.63.0",
58
- "@elementor/mixpanel": "3.35.0-381",
59
- "@elementor/query": "3.35.0-381",
60
- "@elementor/schema": "3.35.0-381",
61
- "@elementor/store": "3.35.0-381",
58
+ "@elementor/mixpanel": "3.35.0-382",
59
+ "@elementor/query": "3.35.0-382",
60
+ "@elementor/schema": "3.35.0-382",
61
+ "@elementor/store": "3.35.0-382",
62
62
  "@elementor/ui": "1.36.17",
63
- "@elementor/utils": "3.35.0-381",
63
+ "@elementor/utils": "3.35.0-382",
64
64
  "@wordpress/i18n": "^5.13.0",
65
- "@elementor/editor-notifications": "3.35.0-381",
66
- "@elementor/editor-current-user": "3.35.0-381"
65
+ "@elementor/editor-notifications": "3.35.0-382",
66
+ "@elementor/editor-current-user": "3.35.0-382"
67
67
  },
68
68
  "peerDependencies": {
69
69
  "react": "^18.3.1",
package/src/components/component-properties-panel/component-properties-panel-content.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { useMemo, useState } from 'react';
2
+ import { useMemo, useRef, useState } from 'react';
3
3
  import { setDocumentModifiedStatus } from '@elementor/editor-documents';
4
4
  import { PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
5
5
  import { ComponentPropListIcon, FolderPlusIcon, XIcon } from '@elementor/icons';
@@ -29,6 +29,7 @@ export function ComponentPropertiesPanelContent( { onClose }: Props ) {
29
29
  const currentComponentId = useCurrentComponentId();
30
30
  const overridableProps = useOverridableProps( currentComponentId );
31
31
  const [ isAddingGroup, setIsAddingGroup ] = useState( false );
32
+ const introductionRef = useRef< HTMLButtonElement >( null );
32
33
  const groupLabelEditable = useCurrentEditableItem();
33
34
 
34
35
  const groups = useMemo( () => {
@@ -122,7 +123,12 @@ export function ComponentPropertiesPanelContent( { onClose }: Props ) {
122
123
  ) }
123
124
 
124
125
  <Tooltip title={ __( 'Close panel', 'elementor' ) }>
125
- <IconButton size="tiny" aria-label={ __( 'Close panel', 'elementor' ) } onClick={ onClose }>
126
+ <IconButton
127
+ ref={ introductionRef }
128
+ size="tiny"
129
+ aria-label={ __( 'Close panel', 'elementor' ) }
130
+ onClick={ onClose }
131
+ >
126
132
  <XIcon fontSize="tiny" />
127
133
  </IconButton>
128
134
  </Tooltip>
@@ -132,7 +138,7 @@ export function ComponentPropertiesPanelContent( { onClose }: Props ) {
132
138
 
133
139
  <PanelBody>
134
140
  { showEmptyState ? (
135
- <PropertiesEmptyState />
141
+ <PropertiesEmptyState introductionRef={ introductionRef } />
136
142
  ) : (
137
143
  <List sx={ { p: 2, display: 'flex', flexDirection: 'column', gap: 2 } }>
138
144
  <SortableProvider value={ groupIds } onChange={ handleGroupsReorder }>
package/src/components/component-properties-panel/properties-empty-state.tsx CHANGED
@@ -1,44 +1,51 @@
1
1
  import * as React from 'react';
2
+ import { useState } from 'react';
2
3
  import { ComponentPropListIcon } from '@elementor/icons';
3
4
  import { Link, Stack, Typography } from '@elementor/ui';
4
5
  import { __ } from '@wordpress/i18n';
5
6
 
6
- const LEARN_MORE_URL = 'https://go.elementor.com/tbd/';
7
+ import { ComponentIntroduction } from '../components-tab/component-introduction';
7
8
 
8
- export function PropertiesEmptyState() {
9
+ export function PropertiesEmptyState( { introductionRef }: { introductionRef: React.RefObject< HTMLButtonElement > } ) {
10
+ const [ isOpen, setIsOpen ] = useState( false );
9
11
  return (
10
- <Stack
11
- alignItems="center"
12
- justifyContent="flex-start"
13
- height="100%"
14
- color="text.secondary"
15
- sx={ { px: 2.5, pt: 10, pb: 5.5 } }
16
- gap={ 1 }
17
- >
18
- <ComponentPropListIcon fontSize="large" />
12
+ <>
13
+ <Stack
14
+ alignItems="center"
15
+ justifyContent="flex-start"
16
+ height="100%"
17
+ color="text.secondary"
18
+ sx={ { px: 2.5, pt: 10, pb: 5.5 } }
19
+ gap={ 1 }
20
+ >
21
+ <ComponentPropListIcon fontSize="large" />
19
22
 
20
- <Typography align="center" variant="subtitle2">
21
- { __( 'Add your first property', 'elementor' ) }
22
- </Typography>
23
+ <Typography align="center" variant="subtitle2">
24
+ { __( 'Add your first property', 'elementor' ) }
25
+ </Typography>
23
26
 
24
- <Typography align="center" variant="caption">
25
- { __( 'Make instances flexible while keeping design synced.', 'elementor' ) }
26
- </Typography>
27
+ <Typography align="center" variant="caption">
28
+ { __( 'Make instances flexible while keeping design synced.', 'elementor' ) }
29
+ </Typography>
27
30
 
28
- <Typography align="center" variant="caption">
29
- { __( 'Select any element, then click + next to a setting to expose it.', 'elementor' ) }
30
- </Typography>
31
+ <Typography align="center" variant="caption">
32
+ { __( 'Select any element, then click + next to a setting to expose it.', 'elementor' ) }
33
+ </Typography>
31
34
 
32
- <Link
33
- variant="caption"
34
- color="secondary"
35
- href={ LEARN_MORE_URL }
36
- target="_blank"
37
- rel="noopener noreferrer"
38
- sx={ { textDecorationLine: 'underline' } }
39
- >
40
- { __( 'Learn more', 'elementor' ) }
41
- </Link>
42
- </Stack>
35
+ <Link
36
+ variant="caption"
37
+ color="secondary"
38
+ sx={ { textDecorationLine: 'underline' } }
39
+ onClick={ () => setIsOpen( true ) }
40
+ >
41
+ { __( 'Learn more', 'elementor' ) }
42
+ </Link>
43
+ </Stack>
44
+ <ComponentIntroduction
45
+ anchorRef={ introductionRef }
46
+ shouldShowIntroduction={ isOpen }
47
+ onClose={ () => setIsOpen( false ) }
48
+ />
49
+ </>
43
50
  );
44
51
  }
package/src/components/component-properties-panel/sortable.tsx CHANGED
@@ -78,7 +78,7 @@ export const SortableItem = ( { children, id }: SortableItemProps ) => (
78
78
 
79
79
  const StyledSortableTrigger = styled( 'div' )( ( { theme } ) => ( {
80
80
  position: 'absolute',
81
- left: 0,
81
+ left: '-2px',
82
82
  top: '50%',
83
83
  transform: `translate( -${ theme.spacing( 1.5 ) }, -50% )`,
84
84
  color: theme.palette.action.active,
package/src/components/components-tab/component-introduction.tsx CHANGED
@@ -9,7 +9,7 @@ export const ComponentIntroduction = ( {
9
9
  shouldShowIntroduction,
10
10
  onClose,
11
11
  }: {
12
- anchorRef: React.RefObject< HTMLDivElement >;
12
+ anchorRef: React.RefObject< HTMLElement >;
13
13
  shouldShowIntroduction: boolean;
14
14
  onClose: () => void;
15
15
  } ) => {