@elementor/editor-components 4.0.0-552 → 4.0.0-573

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 (10) hide show
  1. package/dist/index.js +14 -10
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +18 -14
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +22 -22
  6. package/src/components/component-panel-header/component-panel-header.tsx +1 -1
  7. package/src/components/create-component-form/create-component-form.tsx +1 -0
  8. package/src/components/instance-editing-panel/instance-editing-panel.tsx +38 -36
  9. package/src/components/overridable-props/indicator.tsx +10 -7
  10. package/src/components/overridable-props/overridable-prop-form.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": "4.0.0-552",
4
+ "version": "4.0.0-573",
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": "4.0.0-552",
44
- "@elementor/editor-canvas": "4.0.0-552",
45
- "@elementor/editor-controls": "4.0.0-552",
46
- "@elementor/editor-documents": "4.0.0-552",
47
- "@elementor/editor-editing-panel": "4.0.0-552",
48
- "@elementor/editor-elements": "4.0.0-552",
49
- "@elementor/editor-elements-panel": "4.0.0-552",
50
- "@elementor/editor-mcp": "4.0.0-552",
51
- "@elementor/editor-panels": "4.0.0-552",
52
- "@elementor/editor-props": "4.0.0-552",
53
- "@elementor/editor-styles-repository": "4.0.0-552",
54
- "@elementor/editor-ui": "4.0.0-552",
55
- "@elementor/editor-v1-adapters": "4.0.0-552",
56
- "@elementor/http-client": "4.0.0-552",
43
+ "@elementor/editor": "4.0.0-573",
44
+ "@elementor/editor-canvas": "4.0.0-573",
45
+ "@elementor/editor-controls": "4.0.0-573",
46
+ "@elementor/editor-documents": "4.0.0-573",
47
+ "@elementor/editor-editing-panel": "4.0.0-573",
48
+ "@elementor/editor-elements": "4.0.0-573",
49
+ "@elementor/editor-elements-panel": "4.0.0-573",
50
+ "@elementor/editor-mcp": "4.0.0-573",
51
+ "@elementor/editor-panels": "4.0.0-573",
52
+ "@elementor/editor-props": "4.0.0-573",
53
+ "@elementor/editor-styles-repository": "4.0.0-573",
54
+ "@elementor/editor-ui": "4.0.0-573",
55
+ "@elementor/editor-v1-adapters": "4.0.0-573",
56
+ "@elementor/http-client": "4.0.0-573",
57
57
  "@elementor/icons": "^1.63.0",
58
- "@elementor/events": "4.0.0-552",
59
- "@elementor/query": "4.0.0-552",
60
- "@elementor/schema": "4.0.0-552",
61
- "@elementor/store": "4.0.0-552",
58
+ "@elementor/events": "4.0.0-573",
59
+ "@elementor/query": "4.0.0-573",
60
+ "@elementor/schema": "4.0.0-573",
61
+ "@elementor/store": "4.0.0-573",
62
62
  "@elementor/ui": "1.36.17",
63
- "@elementor/utils": "4.0.0-552",
63
+ "@elementor/utils": "4.0.0-573",
64
64
  "@wordpress/i18n": "^5.13.0",
65
- "@elementor/editor-notifications": "4.0.0-552",
66
- "@elementor/editor-current-user": "4.0.0-552"
65
+ "@elementor/editor-notifications": "4.0.0-573",
66
+ "@elementor/editor-current-user": "4.0.0-573"
67
67
  },
68
68
  "peerDependencies": {
69
69
  "react": "^18.3.1",
package/src/components/component-panel-header/component-panel-header.tsx CHANGED
@@ -52,7 +52,7 @@ export const ComponentPanelHeader = () => {
52
52
  };
53
53
 
54
54
  return (
55
- <Box>
55
+ <Box data-testid="component-panel-header">
56
56
  <PanelHeader sx={ { justifyContent: 'start', px: 2 } }>
57
57
  <Tooltip title={ __( 'Back', 'elementor' ) }>
58
58
  <IconButton size="tiny" onClick={ onBack } aria-label={ __( 'Back', 'elementor' ) }>
package/src/components/create-component-form/create-component-form.tsx CHANGED
@@ -132,6 +132,7 @@ export function CreateComponentForm() {
132
132
  onClose={ cancelSave }
133
133
  anchorReference="anchorPosition"
134
134
  anchorPosition={ anchorPosition }
135
+ data-testid="create-component-form"
135
136
  >
136
137
  { element !== null && (
137
138
  <Form
package/src/components/instance-editing-panel/instance-editing-panel.tsx CHANGED
@@ -5,7 +5,7 @@ import { useSelectedElement } from '@elementor/editor-elements';
5
5
  import { PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
6
6
  import { EllipsisWithTooltip } from '@elementor/editor-ui';
7
7
  import { ComponentsIcon, PencilIcon } from '@elementor/icons';
8
- import { Divider, IconButton, Stack, Tooltip } from '@elementor/ui';
8
+ import { Box, Divider, IconButton, Stack, Tooltip } from '@elementor/ui';
9
9
  import { __ } from '@wordpress/i18n';
10
10
 
11
11
  import { useComponentInstanceSettings } from '../../hooks/use-component-instance-settings';
@@ -50,40 +50,42 @@ export function InstanceEditingPanel() {
50
50
  const isEmpty = groups.length === 0 || Object.keys( overridableProps.props ).length === 0;
51
51
 
52
52
  return (
53
- <ComponentInstanceProvider
54
- componentId={ componentId }
55
- overrides={ overrides }
56
- overridableProps={ overridableProps }
57
- >
58
- <PanelHeader sx={ { justifyContent: 'start', px: 2 } }>
59
- <Stack direction="row" alignItems="center" flexGrow={ 1 } gap={ 1 } maxWidth="100%">
60
- <ComponentsIcon fontSize="small" sx={ { color: 'text.tertiary' } } />
61
- <EllipsisWithTooltip title={ component.name } as={ PanelHeaderTitle } sx={ { flexGrow: 1 } } />
62
- { canEdit && (
63
- <Tooltip title={ panelTitle }>
64
- <IconButton size="tiny" onClick={ handleEditComponent } aria-label={ panelTitle }>
65
- <PencilIcon fontSize="tiny" />
66
- </IconButton>
67
- </Tooltip>
68
- ) }
69
- </Stack>
70
- </PanelHeader>
71
- <PanelBody>
72
- <ControlAdornmentsProvider items={ getFieldIndicators( 'settings' ) }>
73
- { isEmpty ? (
74
- <EmptyState onEditComponent={ handleEditComponent } />
75
- ) : (
76
- <Stack direction="column" alignItems="stretch">
77
- { groups.map( ( group ) => (
78
- <React.Fragment key={ group.id + componentInstanceId }>
79
- <OverridePropsGroup group={ group } />
80
- <Divider />
81
- </React.Fragment>
82
- ) ) }
83
- </Stack>
84
- ) }
85
- </ControlAdornmentsProvider>
86
- </PanelBody>
87
- </ComponentInstanceProvider>
53
+ <Box data-testid="instance-editing-panel">
54
+ <ComponentInstanceProvider
55
+ componentId={ componentId }
56
+ overrides={ overrides }
57
+ overridableProps={ overridableProps }
58
+ >
59
+ <PanelHeader sx={ { justifyContent: 'start', px: 2 } }>
60
+ <Stack direction="row" alignItems="center" flexGrow={ 1 } gap={ 1 } maxWidth="100%">
61
+ <ComponentsIcon fontSize="small" sx={ { color: 'text.tertiary' } } />
62
+ <EllipsisWithTooltip title={ component.name } as={ PanelHeaderTitle } sx={ { flexGrow: 1 } } />
63
+ { canEdit && (
64
+ <Tooltip title={ panelTitle }>
65
+ <IconButton size="tiny" onClick={ handleEditComponent } aria-label={ panelTitle }>
66
+ <PencilIcon fontSize="tiny" />
67
+ </IconButton>
68
+ </Tooltip>
69
+ ) }
70
+ </Stack>
71
+ </PanelHeader>
72
+ <PanelBody>
73
+ <ControlAdornmentsProvider items={ getFieldIndicators( 'settings' ) }>
74
+ { isEmpty ? (
75
+ <EmptyState onEditComponent={ handleEditComponent } />
76
+ ) : (
77
+ <Stack direction="column" alignItems="stretch">
78
+ { groups.map( ( group ) => (
79
+ <React.Fragment key={ group.id + componentInstanceId }>
80
+ <OverridePropsGroup group={ group } />
81
+ <Divider />
82
+ </React.Fragment>
83
+ ) ) }
84
+ </Stack>
85
+ ) }
86
+ </ControlAdornmentsProvider>
87
+ </PanelBody>
88
+ </ComponentInstanceProvider>
89
+ </Box>
88
90
  );
89
91
  }
package/src/components/overridable-props/indicator.tsx CHANGED
@@ -67,13 +67,16 @@ type Props = {
67
67
  isOpen: boolean;
68
68
  };
69
69
  export const Indicator = forwardRef< HTMLDivElement, Props >( ( { isOpen, isOverridable, ...props }, ref ) => (
70
- <Content ref={ ref } { ...props } className={ isOpen || isOverridable ? 'enlarged' : '' }>
71
- <IconContainer
72
- className="icon"
73
- aria-label={
74
- isOverridable ? __( 'Overridable property', 'elementor' ) : __( 'Make prop overridable', 'elementor' )
75
- }
76
- >
70
+ <Content
71
+ role="button"
72
+ ref={ ref }
73
+ { ...props }
74
+ className={ isOpen || isOverridable ? 'enlarged' : '' }
75
+ aria-label={
76
+ isOverridable ? __( 'Overridable property', 'elementor' ) : __( 'Make prop overridable', 'elementor' )
77
+ }
78
+ >
79
+ <IconContainer className="icon">
77
80
  { isOverridable ? <CheckIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
78
81
  </IconContainer>
79
82
  </Content>
package/src/components/overridable-props/overridable-prop-form.tsx CHANGED
@@ -46,7 +46,7 @@ export function OverridablePropForm( { onSubmit, groups, currentValue, existingL
46
46
  };
47
47
 
48
48
  return (
49
- <Form onSubmit={ handleSubmit }>
49
+ <Form onSubmit={ handleSubmit } data-testid="overridable-prop-form">
50
50
  <Stack alignItems="start" sx={ { width: '268px', ...sx } }>
51
51
  <Stack
52
52
  direction="row"