@elementor/editor-controls 0.18.0 → 0.19.0

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 (13) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/index.js +24 -14
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +33 -23
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +3 -3
  7. package/src/components/control-label.tsx +2 -6
  8. package/src/components/control-toggle-button-group.tsx +2 -4
  9. package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx +6 -1
  10. package/src/controls/box-shadow-repeater-control.tsx +3 -5
  11. package/src/controls/equal-unequal-sizes-control.tsx +1 -1
  12. package/src/controls/gap-control.tsx +3 -3
  13. package/src/controls/linked-dimensions-control.tsx +5 -5
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/editor-controls",
3
3
  "description": "This package contains the controls model and utils for the Elementor editor",
4
- "version": "0.18.0",
4
+ "version": "0.19.0",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -41,8 +41,8 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@elementor/editor-current-user": "0.3.0",
44
- "@elementor/editor-elements": "0.6.4",
45
- "@elementor/editor-props": "0.11.0",
44
+ "@elementor/editor-elements": "0.6.5",
45
+ "@elementor/editor-props": "0.11.1",
46
46
  "@elementor/env": "0.3.5",
47
47
  "@elementor/http": "0.1.4",
48
48
  "@elementor/icons": "1.37.0",
package/src/components/control-label.tsx CHANGED
@@ -1,10 +1,6 @@
1
1
  import * as React from 'react';
2
- import { Typography } from '@elementor/ui';
2
+ import { FormLabel } from '@elementor/ui';
3
3
 
4
4
  export const ControlLabel = ( { children }: { children: React.ReactNode } ) => {
5
- return (
6
- <Typography component="label" variant="caption" color="text.secondary">
7
- { children }
8
- </Typography>
9
- );
5
+ return <FormLabel size="tiny">{ children }</FormLabel>;
10
6
  };
package/src/components/control-toggle-button-group.tsx CHANGED
@@ -43,8 +43,6 @@ type Props< TValue > = {
43
43
  }
44
44
  );
45
45
 
46
- // The maximum number of buttons that can be displayed in the group
47
- const MAX_VISIBLE_ITEMS = 4;
48
46
  export const ControlToggleButtonGroup = < TValue, >( {
49
47
  justify = 'end',
50
48
  size = 'tiny',
@@ -72,8 +70,8 @@ export const ControlToggleButtonGroup = < TValue, >( {
72
70
  sx={ {
73
71
  direction: isRtl ? 'rtl /* @noflip */' : 'ltr /* @noflip */',
74
72
  display: 'grid',
75
- gridTemplateColumns: `repeat(${ items.length }, 1fr)`,
76
- width: `${ ( items.length / MAX_VISIBLE_ITEMS ) * 100 }%`,
73
+ gridTemplateColumns: `repeat(${ items.length }, minmax(0, 25%))`,
74
+ width: `100%`,
77
75
  } }
78
76
  >
79
77
  { items.map( ( { label, value: buttonValue, renderContent: Content, showTooltip } ) =>
package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx CHANGED
@@ -109,7 +109,12 @@ const Content = () => {
109
109
  return (
110
110
  <Box sx={ { width: '100%' } }>
111
111
  <Box sx={ { borderBottom: 1, borderColor: 'divider' } }>
112
- <Tabs { ...getTabsProps() } aria-label={ __( 'Background Overlay', 'elementor' ) }>
112
+ <Tabs
113
+ size="small"
114
+ variant="fullWidth"
115
+ { ...getTabsProps() }
116
+ aria-label={ __( 'Background Overlay', 'elementor' ) }
117
+ >
113
118
  <Tab label={ __( 'Image', 'elementor' ) } { ...getTabProps( 'image' ) } />
114
119
  <Tab label={ __( 'Gradient', 'elementor' ) } { ...getTabProps( 'gradient' ) } />
115
120
  <Tab label={ __( 'Color', 'elementor' ) } { ...getTabProps( 'color' ) } />
package/src/controls/box-shadow-repeater-control.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { boxShadowPropTypeUtil, type PropKey, shadowPropTypeUtil, type ShadowPropValue } from '@elementor/editor-props';
3
- import { Grid, type SxProps, type Theme, Typography, UnstableColorIndicator } from '@elementor/ui';
3
+ import { FormLabel, Grid, type SxProps, type Theme, UnstableColorIndicator } from '@elementor/ui';
4
4
  import { __ } from '@wordpress/i18n';
5
5
 
6
6
  import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
@@ -112,11 +112,9 @@ const Control = ( {
112
112
  } ) => (
113
113
  <PropKeyProvider bind={ bind }>
114
114
  <Grid item xs={ 6 } sx={ sx }>
115
- <Grid container gap={ 1 } alignItems="center">
115
+ <Grid container gap={ 0.75 } alignItems="center">
116
116
  <Grid item xs={ 12 }>
117
- <Typography component="label" variant="caption" color="text.secondary">
118
- { label }
119
- </Typography>
117
+ <FormLabel size="tiny">{ label }</FormLabel>
120
118
  </Grid>
121
119
  <Grid item xs={ 12 }>
122
120
  { children }
package/src/controls/equal-unequal-sizes-control.tsx CHANGED
@@ -157,7 +157,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
157
157
  const MultiSizeValueControl = ( { item }: { item: Item } ) => (
158
158
  <PropKeyProvider bind={ item.bind }>
159
159
  <Grid item xs={ 6 }>
160
- <Grid container gap={ 1 } alignItems="center">
160
+ <Grid container gap={ 0.75 } alignItems="center">
161
161
  <Grid item xs={ 12 }>
162
162
  <ControlLabel>{ item.label }</ControlLabel>
163
163
  </Grid>
package/src/controls/gap-control.tsx CHANGED
@@ -21,7 +21,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
21
21
 
22
22
  const onLinkToggle = () => {
23
23
  if ( ! isLinked ) {
24
- setSizeValue( directionValue?.column?.value );
24
+ setSizeValue( directionValue?.column?.value ?? null );
25
25
  return;
26
26
  }
27
27
 
@@ -59,7 +59,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
59
59
  </Tooltip>
60
60
  </Stack>
61
61
  <Stack direction="row" gap={ 2 } flexWrap="nowrap">
62
- <Grid container gap={ 1 } alignItems="center">
62
+ <Grid container gap={ 0.75 } alignItems="center">
63
63
  <Grid item xs={ 12 }>
64
64
  <ControlLabel>{ __( 'Column', 'elementor' ) }</ControlLabel>
65
65
  </Grid>
@@ -67,7 +67,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
67
67
  <Control bind={ 'column' } isLinked={ isLinked } />
68
68
  </Grid>
69
69
  </Grid>
70
- <Grid container gap={ 1 } alignItems="center">
70
+ <Grid container gap={ 0.75 } alignItems="center">
71
71
  <Grid item xs={ 12 }>
72
72
  <ControlLabel>{ __( 'Row', 'elementor' ) }</ControlLabel>
73
73
  </Grid>
package/src/controls/linked-dimensions-control.tsx CHANGED
@@ -30,7 +30,7 @@ export const LinkedDimensionsControl = createControl(
30
30
 
31
31
  const onLinkToggle = () => {
32
32
  if ( ! isLinked ) {
33
- setSizeValue( dimensionsValue[ 'block-start' ]?.value );
33
+ setSizeValue( dimensionsValue[ 'block-start' ]?.value ?? null );
34
34
  return;
35
35
  }
36
36
 
@@ -70,7 +70,7 @@ export const LinkedDimensionsControl = createControl(
70
70
  </Tooltip>
71
71
  </Stack>
72
72
  <Stack direction="row" gap={ 2 } flexWrap="nowrap">
73
- <Grid container gap={ 1 } alignItems="center">
73
+ <Grid container gap={ 0.75 } alignItems="center">
74
74
  <Grid item xs={ 12 }>
75
75
  <ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
76
76
  </Grid>
@@ -83,7 +83,7 @@ export const LinkedDimensionsControl = createControl(
83
83
  />
84
84
  </Grid>
85
85
  </Grid>
86
- <Grid container gap={ 1 } alignItems="center">
86
+ <Grid container gap={ 0.75 } alignItems="center">
87
87
  <Grid item xs={ 12 }>
88
88
  <ControlLabel>
89
89
  { isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ) }
@@ -106,7 +106,7 @@ export const LinkedDimensionsControl = createControl(
106
106
  </Grid>
107
107
  </Stack>
108
108
  <Stack direction="row" gap={ 2 } flexWrap="nowrap">
109
- <Grid container gap={ 1 } alignItems="center">
109
+ <Grid container gap={ 0.75 } alignItems="center">
110
110
  <Grid item xs={ 12 }>
111
111
  <ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
112
112
  </Grid>
@@ -119,7 +119,7 @@ export const LinkedDimensionsControl = createControl(
119
119
  />
120
120
  </Grid>
121
121
  </Grid>
122
- <Grid container gap={ 1 } alignItems="center">
122
+ <Grid container gap={ 0.75 } alignItems="center">
123
123
  <Grid item xs={ 12 }>
124
124
  <ControlLabel>
125
125
  { isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ) }