@elementor/editor-controls 0.18.0 → 0.18.1

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @elementor/editor-controls
2
2
 
3
+ ## 0.18.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 85facff: Set fixed max-width for toggle-buttons-group item.
8
+ - e67bdcb: Update control label spacing.
9
+
3
10
  ## 0.18.0
4
11
 
5
12
  ### Minor Changes
package/dist/index.js CHANGED
@@ -222,7 +222,7 @@ var resolveUnionPropType = (propType, key) => {
222
222
  var React3 = __toESM(require("react"));
223
223
  var import_ui = require("@elementor/ui");
224
224
  var ControlLabel = ({ children }) => {
225
- return /* @__PURE__ */ React3.createElement(import_ui.Typography, { component: "label", variant: "caption", color: "text.secondary" }, children);
225
+ return /* @__PURE__ */ React3.createElement(import_ui.FormLabel, { size: "tiny" }, children);
226
226
  };
227
227
 
228
228
  // src/create-control.tsx
@@ -1004,7 +1004,7 @@ var Control2 = ({
1004
1004
  bind,
1005
1005
  children,
1006
1006
  sx
1007
- }) => /* @__PURE__ */ React22.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 6, sx }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(import_ui18.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, children))));
1007
+ }) => /* @__PURE__ */ React22.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 6, sx }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(import_ui18.FormLabel, { size: "tiny" }, label)), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, children))));
1008
1008
  var ItemLabel = ({ value }) => {
1009
1009
  const { position, hOffset, vOffset, blur, spread } = value.value;
1010
1010
  const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
@@ -1057,7 +1057,6 @@ var import_ui19 = require("@elementor/ui");
1057
1057
  var StyledToggleButtonGroup = (0, import_ui19.styled)(import_ui19.ToggleButtonGroup)`
1058
1058
  ${({ justify }) => `justify-content: ${justify};`}
1059
1059
  `;
1060
- var MAX_VISIBLE_ITEMS = 4;
1061
1060
  var ControlToggleButtonGroup = ({
1062
1061
  justify = "end",
1063
1062
  size = "tiny",
@@ -1081,8 +1080,8 @@ var ControlToggleButtonGroup = ({
1081
1080
  sx: {
1082
1081
  direction: isRtl ? "rtl /* @noflip */" : "ltr /* @noflip */",
1083
1082
  display: "grid",
1084
- gridTemplateColumns: `repeat(${items.length}, 1fr)`,
1085
- width: `${items.length / MAX_VISIBLE_ITEMS * 100}%`
1083
+ gridTemplateColumns: `repeat(${items.length}, minmax(0, 25%))`,
1084
+ width: `100%`
1086
1085
  }
1087
1086
  },
1088
1087
  items.map(
@@ -1271,7 +1270,7 @@ function EqualUnequalSizesControl({
1271
1270
  /* @__PURE__ */ React26.createElement(PropProvider, { propType: multiSizePropType, value: getMultiSizeValues(), setValue: setNestedProp }, /* @__PURE__ */ React26.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React26.createElement(PopoverGridContainer, null, /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React26.createElement(PopoverGridContainer, null, /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[2] }), /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[3] }))))
1272
1271
  ));
1273
1272
  }
1274
- var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(SizeControl, { startIcon: item.icon })))));
1273
+ var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(SizeControl, { startIcon: item.icon })))));
1275
1274
 
1276
1275
  // src/controls/linked-dimensions-control.tsx
1277
1276
  var React27 = __toESM(require("react"));
@@ -1320,7 +1319,7 @@ var LinkedDimensionsControl = createControl(
1320
1319
  onChange: onLinkToggle
1321
1320
  },
1322
1321
  /* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
1323
- ))), /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
1322
+ ))), /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
1324
1323
  Control3,
1325
1324
  {
1326
1325
  bind: "block-start",
@@ -1328,7 +1327,7 @@ var LinkedDimensionsControl = createControl(
1328
1327
  isLinked,
1329
1328
  extendedValues
1330
1329
  }
1331
- ))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
1330
+ ))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
1332
1331
  Control3,
1333
1332
  {
1334
1333
  bind: "inline-end",
@@ -1336,7 +1335,7 @@ var LinkedDimensionsControl = createControl(
1336
1335
  isLinked,
1337
1336
  extendedValues
1338
1337
  }
1339
- )))), /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
1338
+ )))), /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
1340
1339
  Control3,
1341
1340
  {
1342
1341
  bind: "block-end",
@@ -1344,7 +1343,7 @@ var LinkedDimensionsControl = createControl(
1344
1343
  isLinked,
1345
1344
  extendedValues
1346
1345
  }
1347
- ))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
1346
+ ))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
1348
1347
  Control3,
1349
1348
  {
1350
1349
  bind: "inline-start",
@@ -1952,7 +1951,7 @@ var GapControl = createControl(({ label }) => {
1952
1951
  onChange: onLinkToggle
1953
1952
  },
1954
1953
  /* @__PURE__ */ React32.createElement(LinkedIcon, { fontSize: "tiny" })
1955
- ))), /* @__PURE__ */ React32.createElement(import_ui27.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n10.__)("Column", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n10.__)("Row", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "row", isLinked })))));
1954
+ ))), /* @__PURE__ */ React32.createElement(import_ui27.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n10.__)("Column", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n10.__)("Row", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "row", isLinked })))));
1956
1955
  });
1957
1956
  var Control4 = ({ bind, isLinked }) => {
1958
1957
  if (isLinked) {