@elementor/editor-controls 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @elementor/editor-controls
 
+## 0.1.1
+
+### Patch Changes
+
+- 1926fe1: Update dependencies
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ComponentType, ReactNode, PropsWithChildren } from 'react';
 import { PropValue, TransformablePropValue, SizePropValue, PropKey } from '@elementor/editor-props';
-import { UnstableColorFieldProps, ToggleButtonProps } from '@elementor/ui';
+import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
 
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
@@ -21,10 +21,10 @@ declare const TextControl: ControlComponent<({ placeholder }: {
     placeholder?: string;
 }) => React.JSX.Element>;
 
-type Props$2 = {
+type Props$3 = {
     placeholder?: string;
 };
-declare const TextAreaControl: ControlComponent<({ placeholder }: Props$2) => React.JSX.Element>;
+declare const TextAreaControl: ControlComponent<({ placeholder }: Props$3) => React.JSX.Element>;
 
 type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
 type SizeControlProps = {
@@ -40,14 +40,14 @@ declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element
 
 declare const BackgroundOverlayRepeaterControl: ControlComponent<() => React.JSX.Element>;
 
-type Props$1<T> = {
+type Props$2<T> = {
     options: Array<{
         label: string;
         value: T;
         disabled?: boolean;
     }>;
 };
-declare const SelectControl: ControlComponent<(<T extends PropValue>({ options }: Props$1<T>) => React.JSX.Element)>;
+declare const SelectControl: ControlComponent<(<T extends PropValue>({ options }: Props$2<T>) => React.JSX.Element)>;
 
 declare const ColorControl: ControlComponent<(props: Partial<Omit<UnstableColorFieldProps, "value" | "onChange">>) => React.JSX.Element>;
 
@@ -60,6 +60,23 @@ type ToggleButtonGroupItem<TValue> = {
     renderContent: ({ size }: RenderContentProps) => React.ReactNode;
     showTooltip?: boolean;
 };
+type ExclusiveValue<TValue> = TValue | null;
+type NonExclusiveValue<TValue> = TValue[];
+type Props$1<TValue> = {
+    justify?: StackProps['justifyContent'];
+    size?: ToggleButtonProps['size'];
+    items: ToggleButtonGroupItem<TValue>[];
+    fullWidth?: boolean;
+} & ({
+    exclusive?: false;
+    value: NonExclusiveValue<TValue>;
+    onChange: (value: NonExclusiveValue<TValue>) => void;
+} | {
+    exclusive: true;
+    value: ExclusiveValue<TValue>;
+    onChange: (value: ExclusiveValue<TValue>) => void;
+});
+declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$1<TValue>) => React.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
     options: ToggleButtonGroupItem<T>[];
@@ -68,8 +85,12 @@ type ToggleControlProps<T extends PropValue> = {
 };
 declare const ToggleControl: ControlComponent<(<T extends PropValue>({ options, fullWidth, size }: ToggleControlProps<T>) => React.JSX.Element)>;
 
-declare const NumberControl: ControlComponent<({ placeholder }: {
+declare const NumberControl: ControlComponent<({ placeholder, max, min, step, shouldForceInt, }: {
     placeholder?: string;
+    max?: number;
+    min?: number;
+    step?: number;
+    shouldForceInt?: boolean;
 }) => React.JSX.Element>;
 
 type MultiSizePropValue<TMultiPropType extends string> = TransformablePropValue<TMultiPropType, Record<string, SizePropValue>>;
@@ -145,4 +166,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, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, ImageControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
+export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, ImageControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ComponentType, ReactNode, PropsWithChildren } from 'react';
 import { PropValue, TransformablePropValue, SizePropValue, PropKey } from '@elementor/editor-props';
-import { UnstableColorFieldProps, ToggleButtonProps } from '@elementor/ui';
+import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
 
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
@@ -21,10 +21,10 @@ declare const TextControl: ControlComponent<({ placeholder }: {
     placeholder?: string;
 }) => React.JSX.Element>;
 
-type Props$2 = {
+type Props$3 = {
     placeholder?: string;
 };
-declare const TextAreaControl: ControlComponent<({ placeholder }: Props$2) => React.JSX.Element>;
+declare const TextAreaControl: ControlComponent<({ placeholder }: Props$3) => React.JSX.Element>;
 
 type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
 type SizeControlProps = {
@@ -40,14 +40,14 @@ declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element
 
 declare const BackgroundOverlayRepeaterControl: ControlComponent<() => React.JSX.Element>;
 
-type Props$1<T> = {
+type Props$2<T> = {
     options: Array<{
         label: string;
         value: T;
         disabled?: boolean;
     }>;
 };
-declare const SelectControl: ControlComponent<(<T extends PropValue>({ options }: Props$1<T>) => React.JSX.Element)>;
+declare const SelectControl: ControlComponent<(<T extends PropValue>({ options }: Props$2<T>) => React.JSX.Element)>;
 
 declare const ColorControl: ControlComponent<(props: Partial<Omit<UnstableColorFieldProps, "value" | "onChange">>) => React.JSX.Element>;
 
@@ -60,6 +60,23 @@ type ToggleButtonGroupItem<TValue> = {
     renderContent: ({ size }: RenderContentProps) => React.ReactNode;
     showTooltip?: boolean;
 };
+type ExclusiveValue<TValue> = TValue | null;
+type NonExclusiveValue<TValue> = TValue[];
+type Props$1<TValue> = {
+    justify?: StackProps['justifyContent'];
+    size?: ToggleButtonProps['size'];
+    items: ToggleButtonGroupItem<TValue>[];
+    fullWidth?: boolean;
+} & ({
+    exclusive?: false;
+    value: NonExclusiveValue<TValue>;
+    onChange: (value: NonExclusiveValue<TValue>) => void;
+} | {
+    exclusive: true;
+    value: ExclusiveValue<TValue>;
+    onChange: (value: ExclusiveValue<TValue>) => void;
+});
+declare const ControlToggleButtonGroup: <TValue>({ justify, size, value, onChange, items, exclusive, fullWidth, }: Props$1<TValue>) => React.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
     options: ToggleButtonGroupItem<T>[];
@@ -68,8 +85,12 @@ type ToggleControlProps<T extends PropValue> = {
 };
 declare const ToggleControl: ControlComponent<(<T extends PropValue>({ options, fullWidth, size }: ToggleControlProps<T>) => React.JSX.Element)>;
 
-declare const NumberControl: ControlComponent<({ placeholder }: {
+declare const NumberControl: ControlComponent<({ placeholder, max, min, step, shouldForceInt, }: {
     placeholder?: string;
+    max?: number;
+    min?: number;
+    step?: number;
+    shouldForceInt?: boolean;
 }) => React.JSX.Element>;
 
 type MultiSizePropValue<TMultiPropType extends string> = TransformablePropValue<TMultiPropType, Record<string, SizePropValue>>;
@@ -145,4 +166,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, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, ImageControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
+export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, ImageControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.js

@@ -37,6 +37,7 @@ __export(src_exports, {
   ControlActionsProvider: () => ControlActionsProvider,
   ControlLabel: () => ControlLabel,
   ControlReplacementProvider: () => ControlReplacementProvider,
+  ControlToggleButtonGroup: () => ControlToggleButtonGroup,
   EqualUnequalSizesControl: () => EqualUnequalSizesControl,
   FontFamilyControl: () => FontFamilyControl,
   ImageControl: () => ImageControl,
@@ -454,28 +455,12 @@ var ColorControl = createControl(
 );
 
 // src/controls/stroke-control.tsx
-var defaultStrokeControlValue = {
-  $$type: "stroke",
-  value: {
-    color: {
-      $$type: "color",
-      value: "#000000"
-    },
-    width: {
-      $$type: "size",
-      value: {
-        unit: "px",
-        size: NaN
-      }
-    }
-  }
-};
 var units = ["px", "em", "rem"];
 var StrokeControl = createControl(() => {
-  const { value, setValue } = useBoundProp(defaultStrokeControlValue);
+  const { value, setValue } = useBoundProp();
   const setStrokeWidth = (newValue) => {
     const updatedValue = {
-      ...value?.value ?? defaultStrokeControlValue.value,
+      ...value?.value,
       width: newValue
     };
     setValue({
@@ -485,7 +470,7 @@ var StrokeControl = createControl(() => {
   };
   const setStrokeColor = (newValue) => {
     const updatedValue = {
-      ...value?.value ?? defaultStrokeControlValue.value,
+      ...value?.value,
       color: newValue
     };
     setValue({
@@ -498,7 +483,7 @@ var StrokeControl = createControl(() => {
     {
       bind: "width",
       label: (0, import_i18n3.__)("Stroke Width", "elementor"),
-      value: value?.value.width ?? defaultStrokeControlValue.value.width,
+      value: value?.value.width,
       setValue: setStrokeWidth
     },
     /* @__PURE__ */ React15.createElement(SizeControl, { units })
@@ -507,19 +492,13 @@ var StrokeControl = createControl(() => {
     {
       bind: "color",
       label: (0, import_i18n3.__)("Stroke Color", "elementor"),
-      value: value?.value.color ?? defaultStrokeControlValue.value.color,
+      value: value?.value.color,
       setValue: setStrokeColor
     },
     /* @__PURE__ */ React15.createElement(ColorControl, null)
   ));
 });
-var Control = ({
-  bind,
-  value,
-  setValue,
-  label,
-  children
-}) => /* @__PURE__ */ React15.createElement(BoundPropProvider, { bind, value, setValue }, /* @__PURE__ */ React15.createElement(import_ui12.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React15.createElement(import_ui12.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React15.createElement(ControlLabel, null, label)), /* @__PURE__ */ React15.createElement(import_ui12.Grid, { item: true, xs: 6 }, children)));
+var Control = ({ bind, value, setValue, label, children }) => /* @__PURE__ */ React15.createElement(BoundPropProvider, { bind, value, setValue }, /* @__PURE__ */ React15.createElement(import_ui12.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React15.createElement(import_ui12.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React15.createElement(ControlLabel, null, label)), /* @__PURE__ */ React15.createElement(import_ui12.Grid, { item: true, xs: 6 }, children)));
 
 // src/controls/box-shadow-repeater-control.tsx
 var React17 = __toESM(require("react"));
@@ -909,22 +888,35 @@ var ControlToggleButtonGroup = ({
   exclusive = false,
   fullWidth = false
 }) => {
+  const isRtl = "rtl" === (0, import_ui16.useTheme)().direction;
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  return /* @__PURE__ */ React19.createElement(StyledToggleButtonGroup, { justify, value, onChange: handleChange, exclusive }, items.map(
-    ({ label, value: buttonValue, renderContent: Content, showTooltip }) => showTooltip ? /* @__PURE__ */ React19.createElement(import_ui16.Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React19.createElement(import_ui16.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React19.createElement(Content, { size }))) : /* @__PURE__ */ React19.createElement(
-      import_ui16.ToggleButton,
-      {
-        key: buttonValue,
-        value: buttonValue,
-        "aria-label": label,
-        size,
-        fullWidth
-      },
-      /* @__PURE__ */ React19.createElement(Content, { size })
+  return /* @__PURE__ */ React19.createElement(
+    StyledToggleButtonGroup,
+    {
+      justify,
+      value,
+      onChange: handleChange,
+      exclusive,
+      sx: {
+        direction: isRtl ? "rtl /* @noflip */" : "ltr /* @noflip */"
+      }
+    },
+    items.map(
+      ({ label, value: buttonValue, renderContent: Content, showTooltip }) => showTooltip ? /* @__PURE__ */ React19.createElement(import_ui16.Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React19.createElement(import_ui16.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React19.createElement(Content, { size }))) : /* @__PURE__ */ React19.createElement(
+        import_ui16.ToggleButton,
+        {
+          key: buttonValue,
+          value: buttonValue,
+          "aria-label": label,
+          size,
+          fullWidth
+        },
+        /* @__PURE__ */ React19.createElement(Content, { size })
+      )
     )
-  ));
+  );
 };
 
 // src/controls/toggle-control.tsx
@@ -952,24 +944,38 @@ var ToggleControl = createControl(
 var React21 = __toESM(require("react"));
 var import_ui17 = require("@elementor/ui");
 var isEmptyOrNaN = (value) => value === void 0 || value === "" || Number.isNaN(Number(value));
-var NumberControl = createControl(({ placeholder }) => {
-  const { value, setValue } = useBoundProp();
-  const handleChange = (event) => {
-    const eventValue = event.target.value;
-    setValue(isEmptyOrNaN(eventValue) ? void 0 : Number(eventValue));
-  };
-  return /* @__PURE__ */ React21.createElement(ControlActions, null, /* @__PURE__ */ React21.createElement(
-    import_ui17.TextField,
-    {
-      size: "tiny",
-      type: "number",
-      fullWidth: true,
-      value: isEmptyOrNaN(value) ? "" : value,
-      onChange: handleChange,
-      placeholder
-    }
-  ));
-});
+var NumberControl = createControl(
+  ({
+    placeholder,
+    max = Number.MAX_VALUE,
+    min = -Number.MAX_VALUE,
+    step = 1,
+    shouldForceInt = false
+  }) => {
+    const { value, setValue } = useBoundProp();
+    const handleChange = (event) => {
+      const eventValue = event.target.value;
+      if (isEmptyOrNaN(eventValue)) {
+        setValue(void 0);
+        return;
+      }
+      const formattedValue = shouldForceInt ? +parseFloat(eventValue) : Number(eventValue);
+      setValue(Math.min(Math.max(formattedValue, min), max));
+    };
+    return /* @__PURE__ */ React21.createElement(ControlActions, null, /* @__PURE__ */ React21.createElement(
+      import_ui17.TextField,
+      {
+        size: "tiny",
+        type: "number",
+        fullWidth: true,
+        value: isEmptyOrNaN(value) ? "" : value,
+        onChange: handleChange,
+        placeholder,
+        inputProps: { step }
+      }
+    ));
+  }
+);
 
 // src/controls/equal-unequal-sizes-control.tsx
 var React22 = __toESM(require("react"));
@@ -1327,6 +1333,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
   ControlActionsProvider,
   ControlLabel,
   ControlReplacementProvider,
+  ControlToggleButtonGroup,
   EqualUnequalSizesControl,
   FontFamilyControl,
   ImageControl,