@elementor/editor-components 4.0.0-681 → 4.0.0-682

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 (8) hide show
  1. package/dist/index.js +79 -29
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +62 -12
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +23 -23
  6. package/src/components/components-tab/components.tsx +45 -1
  7. package/src/components/components-upgrade-alert.tsx +1 -1
  8. package/src/components/instance-editing-panel/empty-state.tsx +9 -2
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-681",
4
+ "version": "4.0.0-682",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -40,31 +40,31 @@
40
40
  "dev": "tsup --config=../../tsup.dev.ts"
41
41
  },
42
42
  "dependencies": {
43
- "@elementor/editor": "4.0.0-681",
44
- "@elementor/editor-canvas": "4.0.0-681",
45
- "@elementor/editor-controls": "4.0.0-681",
46
- "@elementor/editor-documents": "4.0.0-681",
47
- "@elementor/editor-editing-panel": "4.0.0-681",
48
- "@elementor/editor-elements": "4.0.0-681",
49
- "@elementor/editor-elements-panel": "4.0.0-681",
50
- "@elementor/editor-mcp": "4.0.0-681",
51
- "@elementor/editor-templates": "4.0.0-681",
52
- "@elementor/editor-panels": "4.0.0-681",
53
- "@elementor/editor-props": "4.0.0-681",
54
- "@elementor/editor-styles-repository": "4.0.0-681",
55
- "@elementor/editor-ui": "4.0.0-681",
56
- "@elementor/editor-v1-adapters": "4.0.0-681",
57
- "@elementor/http-client": "4.0.0-681",
43
+ "@elementor/editor": "4.0.0-682",
44
+ "@elementor/editor-canvas": "4.0.0-682",
45
+ "@elementor/editor-controls": "4.0.0-682",
46
+ "@elementor/editor-documents": "4.0.0-682",
47
+ "@elementor/editor-editing-panel": "4.0.0-682",
48
+ "@elementor/editor-elements": "4.0.0-682",
49
+ "@elementor/editor-elements-panel": "4.0.0-682",
50
+ "@elementor/editor-mcp": "4.0.0-682",
51
+ "@elementor/editor-templates": "4.0.0-682",
52
+ "@elementor/editor-panels": "4.0.0-682",
53
+ "@elementor/editor-props": "4.0.0-682",
54
+ "@elementor/editor-styles-repository": "4.0.0-682",
55
+ "@elementor/editor-ui": "4.0.0-682",
56
+ "@elementor/editor-v1-adapters": "4.0.0-682",
57
+ "@elementor/http-client": "4.0.0-682",
58
58
  "@elementor/icons": "^1.68.0",
59
- "@elementor/events": "4.0.0-681",
60
- "@elementor/query": "4.0.0-681",
61
- "@elementor/schema": "4.0.0-681",
62
- "@elementor/store": "4.0.0-681",
59
+ "@elementor/events": "4.0.0-682",
60
+ "@elementor/query": "4.0.0-682",
61
+ "@elementor/schema": "4.0.0-682",
62
+ "@elementor/store": "4.0.0-682",
63
63
  "@elementor/ui": "1.36.17",
64
- "@elementor/utils": "4.0.0-681",
64
+ "@elementor/utils": "4.0.0-682",
65
65
  "@wordpress/i18n": "^5.13.0",
66
- "@elementor/editor-notifications": "4.0.0-681",
67
- "@elementor/editor-current-user": "4.0.0-681"
66
+ "@elementor/editor-notifications": "4.0.0-682",
67
+ "@elementor/editor-current-user": "4.0.0-682"
68
68
  },
69
69
  "peerDependencies": {
70
70
  "react": "^18.3.1",
package/src/components/components-tab/components.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { useLayoutEffect } from 'react';
2
3
  import { ThemeProvider } from '@elementor/editor-ui';
3
4
  import { Stack } from '@elementor/ui';
4
5
  import { hasProInstalled } from '@elementor/utils';
@@ -9,14 +10,57 @@ import { ComponentsList } from './components-list';
9
10
  import { ComponentsProNotification } from './components-pro-notification';
10
11
  import { SearchProvider } from './search-provider';
11
12
 
13
+ const FULL_HEIGHT_STYLE_ID = 'components-full-height-panel';
14
+
15
+ const FULL_HEIGHT_CSS = `
16
+ #elementor-panel-page-elements {
17
+ display: flex;
18
+ flex-direction: column;
19
+ height: 100%;
20
+ }
21
+
22
+ #elementor-panel-elements {
23
+ display: flex;
24
+ flex-direction: column;
25
+ flex: 1;
26
+ min-height: 0;
27
+ }
28
+
29
+ #elementor-panel-elements-wrapper {
30
+ display: flex;
31
+ flex-direction: column;
32
+ flex: 1;
33
+ min-height: 0;
34
+ }
35
+ `;
36
+
37
+ const useFullHeightPanel = () => {
38
+ useLayoutEffect( () => {
39
+ let style = document.getElementById( FULL_HEIGHT_STYLE_ID );
40
+
41
+ if ( ! style ) {
42
+ style = document.createElement( 'style' );
43
+ style.id = FULL_HEIGHT_STYLE_ID;
44
+ style.textContent = FULL_HEIGHT_CSS;
45
+ document.head.appendChild( style );
46
+ }
47
+
48
+ return () => {
49
+ document.getElementById( FULL_HEIGHT_STYLE_ID )?.remove();
50
+ };
51
+ }, [] );
52
+ };
53
+
12
54
  const ComponentsContent = () => {
13
55
  const { components, isLoading } = useComponents();
14
56
  const hasComponents = ! isLoading && components.length > 0;
15
57
  const hasPro = hasProInstalled();
16
58
  const showProNotification = ! hasPro && hasComponents;
17
59
 
60
+ useFullHeightPanel();
61
+
18
62
  return (
19
- <Stack sx={ { height: '100%' } }>
63
+ <Stack justifyContent="space-between" sx={ { flex: 1, minHeight: 0 } }>
20
64
  { hasComponents && <ComponentSearch /> }
21
65
  <ComponentsList />
22
66
  { showProNotification && <ComponentsProNotification /> }
package/src/components/components-upgrade-alert.tsx CHANGED
@@ -11,7 +11,7 @@ interface ComponentsUpgradeAlertProps {
11
11
 
12
12
  export function ComponentsUpgradeAlert( { title, description, upgradeUrl }: ComponentsUpgradeAlertProps ) {
13
13
  return (
14
- <Box sx={ { mt: 'auto' } }>
14
+ <Box sx={ { mt: 'auto', position: 'sticky', bottom: 0 } }>
15
15
  <Alert
16
16
  variant="standard"
17
17
  color="promotion"
package/src/components/instance-editing-panel/empty-state.tsx CHANGED
@@ -34,8 +34,15 @@ export const EmptyState = ( { onEditComponent }: { onEditComponent?: () => void
34
34
  <Typography align="center" variant="caption" maxWidth="170px">
35
35
  { message }
36
36
  </Typography>
37
- { canEdit && !! onEditComponent && (
38
- <Button variant="outlined" color="secondary" size="small" sx={ { mt: 1 } } onClick={ onEditComponent }>
37
+ { canEdit && (
38
+ <Button
39
+ variant="outlined"
40
+ color="secondary"
41
+ size="small"
42
+ sx={ { mt: 1 } }
43
+ disabled={ ! onEditComponent }
44
+ onClick={ onEditComponent }
45
+ >
39
46
  <PencilIcon fontSize="small" />
40
47
  { __( 'Edit component', 'elementor' ) }
41
48
  </Button>