@elementor/editor-controls 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @elementor/editor-controls
 
+## 0.3.1
+
+### Patch Changes
+
+- a0ca1d8: fixed an issue where persisting dimensions values behaved unpredictably when switching breakpoints
+
+## 0.3.0
+
+### Minor Changes
+
+- ff35b95: Added Gaps field with a control, proptype and a transformer
+
+### Patch Changes
+
+- Updated dependencies [8943189]
+- Updated dependencies [ff35b95]
+  - @elementor/editor-props@0.5.0
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -46,8 +46,9 @@ type Props$2 = {
         value: StringPropValue['value'];
         disabled?: boolean;
     }>;
+    onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
 };
-declare const SelectControl: ControlComponent<({ options }: Props$2) => React.JSX.Element>;
+declare const SelectControl: ControlComponent<({ options, onChange }: Props$2) => React.JSX.Element>;
 
 declare const ColorControl: ControlComponent<(props: Partial<Omit<UnstableColorFieldProps, "value" | "onChange">>) => React.JSX.Element>;
 
@@ -120,6 +121,10 @@ declare const UrlControl: ControlComponent<({ placeholder }: {
 
 declare const LinkControl: ControlComponent<() => React.JSX.Element>;
 
+declare const GapControl: ControlComponent<({ label }: {
+    label: string;
+}) => React.JSX.Element>;
+
 declare const ControlLabel: ({ children }: {
     children: React.ReactNode;
 }) => React.JSX.Element;
@@ -174,4 +179,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
+export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.d.ts

@@ -46,8 +46,9 @@ type Props$2 = {
         value: StringPropValue['value'];
         disabled?: boolean;
     }>;
+    onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
 };
-declare const SelectControl: ControlComponent<({ options }: Props$2) => React.JSX.Element>;
+declare const SelectControl: ControlComponent<({ options, onChange }: Props$2) => React.JSX.Element>;
 
 declare const ColorControl: ControlComponent<(props: Partial<Omit<UnstableColorFieldProps, "value" | "onChange">>) => React.JSX.Element>;
 
@@ -120,6 +121,10 @@ declare const UrlControl: ControlComponent<({ placeholder }: {
 
 declare const LinkControl: ControlComponent<() => React.JSX.Element>;
 
+declare const GapControl: ControlComponent<({ label }: {
+    label: string;
+}) => React.JSX.Element>;
+
 declare const ControlLabel: ({ children }: {
     children: React.ReactNode;
 }) => React.JSX.Element;
@@ -174,4 +179,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
+export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.js

@@ -28,8 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   BackgroundOverlayRepeaterControl: () => BackgroundOverlayRepeaterControl,
   BoundPropProvider: () => BoundPropProvider,
   BoxShadowRepeaterControl: () => BoxShadowRepeaterControl,
@@ -40,6 +40,7 @@ __export(src_exports, {
   ControlToggleButtonGroup: () => ControlToggleButtonGroup,
   EqualUnequalSizesControl: () => EqualUnequalSizesControl,
   FontFamilyControl: () => FontFamilyControl,
+  GapControl: () => GapControl,
   ImageControl: () => ImageControl,
   LinkControl: () => LinkControl,
   LinkedDimensionsControl: () => LinkedDimensionsControl,
@@ -56,7 +57,7 @@ __export(src_exports, {
   useControlActions: () => useControlActions,
   useSyncExternalState: () => useSyncExternalState
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/controls/image-control.tsx
 var React9 = __toESM(require("react"));
@@ -236,9 +237,10 @@ var ImageMediaControl = createControl(() => {
 var React8 = __toESM(require("react"));
 var import_editor_props2 = require("@elementor/editor-props");
 var import_ui5 = require("@elementor/ui");
-var SelectControl = createControl(({ options }) => {
+var SelectControl = createControl(({ options, onChange }) => {
   const { value, setValue } = useBoundProp(import_editor_props2.stringPropTypeUtil);
   const handleChange = (event) => {
+    onChange?.(event.target.value, value);
     setValue(event.target.value);
   };
   return /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(import_ui5.Select, { displayEmpty: true, size: "tiny", value: value ?? "", onChange: handleChange, fullWidth: true }, options.map(({ label, ...props }) => /* @__PURE__ */ React8.createElement(import_ui5.MenuItem, { key: props.value, ...props }, label))));
@@ -1389,6 +1391,63 @@ var LinkControl = createControl(() => {
 var SwitchControl = ({ value, onSwitch }) => {
   return /* @__PURE__ */ React26.createElement(import_ui22.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React26.createElement(import_ui22.Grid, { item: true }, /* @__PURE__ */ React26.createElement(ControlLabel, null, (0, import_i18n11.__)("Open in new tab", "elementor"))), /* @__PURE__ */ React26.createElement(import_ui22.Grid, { item: true }, /* @__PURE__ */ React26.createElement(import_ui22.Switch, { checked: value, onChange: onSwitch })));
 };
+
+// src/controls/gap-control.tsx
+var React27 = __toESM(require("react"));
+var import_editor_props16 = require("@elementor/editor-props");
+var import_icons6 = require("@elementor/icons");
+var import_ui23 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
+var GapControl = createControl(({ label }) => {
+  const { value, setValue } = useBoundProp(import_editor_props16.gapPropTypeUtil);
+  const { column, row, isLinked = true } = value || {};
+  const setLinkedValue = (gap, newValue) => {
+    const updatedValue = {
+      isLinked,
+      column: isLinked ? newValue : column,
+      row: isLinked ? newValue : row,
+      [gap]: newValue
+    };
+    setValue(updatedValue);
+  };
+  const toggleLinked = () => {
+    const updatedValue = {
+      isLinked: !isLinked,
+      column,
+      row: !isLinked ? column : row
+    };
+    setValue(updatedValue);
+  };
+  const LinkedIcon = isLinked ? import_icons6.LinkIcon : import_icons6.DetachIcon;
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(ControlLabel, null, label), /* @__PURE__ */ React27.createElement(
+    import_ui23.ToggleButton,
+    {
+      "aria-label": (0, import_i18n12.__)("Link Inputs", "elementor"),
+      size: "tiny",
+      value: "check",
+      selected: isLinked,
+      sx: { marginLeft: "auto" },
+      onChange: toggleLinked
+    },
+    /* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React27.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n12.__)("Column", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    BoundPropProvider,
+    {
+      setValue: (newValue) => setLinkedValue("column", newValue),
+      value: column,
+      bind: "column"
+    },
+    /* @__PURE__ */ React27.createElement(SizeControl, null)
+  ))), /* @__PURE__ */ React27.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n12.__)("Row", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    BoundPropProvider,
+    {
+      setValue: (newValue) => setLinkedValue("row", newValue),
+      value: row,
+      bind: "row"
+    },
+    /* @__PURE__ */ React27.createElement(SizeControl, null)
+  )))));
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BackgroundOverlayRepeaterControl,
@@ -1401,6 +1460,7 @@ var SwitchControl = ({ value, onSwitch }) => {
   ControlToggleButtonGroup,
   EqualUnequalSizesControl,
   FontFamilyControl,
+  GapControl,
   ImageControl,
   LinkControl,
   LinkedDimensionsControl,