@elementor/editor-editing-panel 3.33.0-144 → 3.33.0-146

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 (2) hide show
  1. package/package.json +19 -19
  2. package/src/controls-registry/element-controls/tabs-control/tabs-control.tsx +76 -18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elementor/editor-editing-panel",
3
- "version": "3.33.0-144",
3
+ "version": "3.33.0-146",
4
4
  "private": false,
5
5
  "author": "Elementor Team",
6
6
  "homepage": "https://elementor.com/",
@@ -39,26 +39,26 @@
39
39
  "dev": "tsup --config=../../tsup.dev.ts"
40
40
  },
41
41
  "dependencies": {
42
- "@elementor/editor": "3.33.0-144",
43
- "@elementor/editor-canvas": "3.33.0-144",
44
- "@elementor/editor-controls": "3.33.0-144",
45
- "@elementor/editor-documents": "3.33.0-144",
46
- "@elementor/editor-elements": "3.33.0-144",
47
- "@elementor/editor-panels": "3.33.0-144",
48
- "@elementor/editor-props": "3.33.0-144",
49
- "@elementor/editor-responsive": "3.33.0-144",
50
- "@elementor/editor-styles": "3.33.0-144",
51
- "@elementor/editor-styles-repository": "3.33.0-144",
52
- "@elementor/editor-ui": "3.33.0-144",
53
- "@elementor/editor-v1-adapters": "3.33.0-144",
42
+ "@elementor/editor": "3.33.0-146",
43
+ "@elementor/editor-canvas": "3.33.0-146",
44
+ "@elementor/editor-controls": "3.33.0-146",
45
+ "@elementor/editor-documents": "3.33.0-146",
46
+ "@elementor/editor-elements": "3.33.0-146",
47
+ "@elementor/editor-panels": "3.33.0-146",
48
+ "@elementor/editor-props": "3.33.0-146",
49
+ "@elementor/editor-responsive": "3.33.0-146",
50
+ "@elementor/editor-styles": "3.33.0-146",
51
+ "@elementor/editor-styles-repository": "3.33.0-146",
52
+ "@elementor/editor-ui": "3.33.0-146",
53
+ "@elementor/editor-v1-adapters": "3.33.0-146",
54
54
  "@elementor/icons": "1.46.0",
55
- "@elementor/locations": "3.33.0-144",
56
- "@elementor/menus": "3.33.0-144",
57
- "@elementor/schema": "3.33.0-144",
58
- "@elementor/session": "3.33.0-144",
55
+ "@elementor/locations": "3.33.0-146",
56
+ "@elementor/menus": "3.33.0-146",
57
+ "@elementor/schema": "3.33.0-146",
58
+ "@elementor/session": "3.33.0-146",
59
59
  "@elementor/ui": "1.36.12",
60
- "@elementor/utils": "3.33.0-144",
61
- "@elementor/wp-media": "3.33.0-144",
60
+ "@elementor/utils": "3.33.0-146",
61
+ "@elementor/wp-media": "3.33.0-146",
62
62
  "@wordpress/i18n": "^5.13.0"
63
63
  },
64
64
  "peerDependencies": {
package/src/controls-registry/element-controls/tabs-control/tabs-control.tsx CHANGED
@@ -1,15 +1,22 @@
1
1
  import * as React from 'react';
2
- import { ControlFormLabel, Repeater, type RepeaterItem, type SetRepeaterValuesMeta } from '@elementor/editor-controls';
2
+ import {
3
+ ControlFormLabel,
4
+ Repeater,
5
+ type RepeaterItem,
6
+ type SetRepeaterValuesMeta,
7
+ useBoundProp,
8
+ } from '@elementor/editor-controls';
3
9
  import {
4
10
  type Element,
5
11
  getElementEditorSettings,
12
+ getElementType,
6
13
  updateElementEditorSettings,
7
14
  useElementChildren,
8
15
  useElementEditorSettings,
9
- useElementType,
10
16
  } from '@elementor/editor-elements';
11
- import { type CreateOptions } from '@elementor/editor-props';
12
- import { Stack, TextField } from '@elementor/ui';
17
+ import { type CreateOptions, stringPropTypeUtil } from '@elementor/editor-props';
18
+ import { InfoCircleFilledIcon } from '@elementor/icons';
19
+ import { Alert, Chip, Infotip, type InfotipProps, Stack, Switch, TextField, Typography } from '@elementor/ui';
13
20
  import { __ } from '@wordpress/i18n';
14
21
 
15
22
  import { ElementProvider, useElement } from '../../../contexts/element-context';
@@ -107,14 +114,18 @@ export const TabsControl = ( { childElements }: { childElements: ChildElement[]
107
114
 
108
115
  const ItemLabel = ( { value }: { value: TabItem } ) => {
109
116
  const id = value.id ?? '';
117
+ const { value: defaultItem } = useBoundProp( stringPropTypeUtil );
118
+
119
+ const isDefault = defaultItem === id;
110
120
 
111
121
  const editorSettings = useElementEditorSettings( id );
112
122
 
113
123
  const elementTitle = editorSettings?.title;
114
124
 
115
125
  return (
116
- <Stack sx={ { minHeight: 20 } } direction="row" alignItems="center">
126
+ <Stack sx={ { minHeight: 20 } } direction="row" alignItems="center" gap={ 1.5 }>
117
127
  <span>{ elementTitle }</span>
128
+ { isDefault && <Chip size="tiny" shape="rounded" label={ __( 'Default', 'elementor' ) } /> }
118
129
  </Stack>
119
130
  );
120
131
  };
@@ -126,25 +137,47 @@ const ItemContent = () => {
126
137
 
127
138
  const label = editorSettings?.title ?? '';
128
139
 
140
+ const { value: defaultItem, setValue: setDefaultItem } = useBoundProp( stringPropTypeUtil );
141
+
142
+ const isDefault = defaultItem === element.id;
143
+
129
144
  return (
130
- <Stack p={ 2 }>
131
- <ControlFormLabel sx={ { mb: 1 } }>{ __( 'Tab name', 'elementor' ) }</ControlFormLabel>
132
- <TextField
133
- value={ label }
134
- size="tiny"
135
- onChange={ ( { target }: React.ChangeEvent< HTMLInputElement > ) => {
136
- updateElementEditorSettings( {
137
- elementId: element.id,
138
- settings: { title: target.value },
139
- } );
140
- } }
141
- />
145
+ <Stack p={ 2 } gap={ 1.5 }>
146
+ <Stack gap={ 1 }>
147
+ <ControlFormLabel>{ __( 'Tab name', 'elementor' ) }</ControlFormLabel>
148
+ <TextField
149
+ size="tiny"
150
+ value={ label }
151
+ onChange={ ( { target }: React.ChangeEvent< HTMLInputElement > ) => {
152
+ updateElementEditorSettings( {
153
+ elementId: element.id,
154
+ settings: { title: target.value },
155
+ } );
156
+ } }
157
+ />
158
+ </Stack>
159
+ <Stack direction="row" alignItems="center" justifyContent="space-between" gap={ 2 }>
160
+ <ControlFormLabel>{ __( 'Set as default tab', 'elementor' ) }</ControlFormLabel>
161
+ <ConditionalTooltip showTooltip={ isDefault } content={ tooltipContent } placement="right">
162
+ <Switch
163
+ size="small"
164
+ checked={ isDefault }
165
+ disabled={ isDefault }
166
+ onChange={ ( { target }: React.ChangeEvent< HTMLInputElement > ) => {
167
+ setDefaultItem( target.checked ? element.id : null );
168
+ } }
169
+ inputProps={ {
170
+ ...( isDefault ? { style: { opacity: 0, cursor: 'not-allowed' } } : {} ),
171
+ } }
172
+ />
173
+ </ConditionalTooltip>
174
+ </Stack>
142
175
  </Stack>
143
176
  );
144
177
  };
145
178
 
146
179
  const ElementItem = ( { children, value }: { children: React.ReactNode; value: TabItem } ) => {
147
- const elementType = useElementType( TAB_ELEMENT_TYPE );
180
+ const elementType = getElementType( TAB_ELEMENT_TYPE );
148
181
 
149
182
  if ( ! elementType ) {
150
183
  return null;
@@ -161,3 +194,28 @@ const ElementItem = ( { children, value }: { children: React.ReactNode; value: T
161
194
  </ElementProvider>
162
195
  );
163
196
  };
197
+
198
+ const tooltipContent = (
199
+ <Alert color="secondary" icon={ <InfoCircleFilledIcon fontSize="tiny" /> } size="small" sx={ { width: 288 } }>
200
+ <Typography variant="body2">
201
+ { __( 'To change the default tab, simply set another tab as default.', 'elementor' ) }
202
+ </Typography>
203
+ </Alert>
204
+ );
205
+
206
+ export const ConditionalTooltip = ( {
207
+ showTooltip,
208
+ children,
209
+ content,
210
+ ...props
211
+ }: InfotipProps & { showTooltip: boolean } ) => {
212
+ if ( ! showTooltip ) {
213
+ return children;
214
+ }
215
+
216
+ return (
217
+ <Infotip content={ content } arrow={ false } { ...props } open>
218
+ <span>{ children }</span>
219
+ </Infotip>
220
+ );
221
+ };