@elementor/editor-controls 4.0.0-498 → 4.0.0-500

package/dist/index.mjs

@@ -642,14 +642,14 @@ var TextFieldInnerSelection = forwardRef2(
     id
   }, ref) => {
     const { placeholder: boundPropPlaceholder } = useBoundProp(sizePropTypeUtil);
-    const getCursorStyle = () => ({
+    const getCursorStyle2 = () => ({
       input: { cursor: InputProps.readOnly ? "default !important" : void 0 }
     });
     return /* @__PURE__ */ React18.createElement(
       NumberInput,
       {
         ref,
-        sx: getCursorStyle(),
+        sx: getCursorStyle2(),
         size: "tiny",
         fullWidth: true,
         type,
@@ -7000,6 +7000,167 @@ var usePopover = (openOnMount, onOpen) => {
     popoverProps
   };
 };
+
+// src/components/size/unstable-size-field.tsx
+import * as React107 from "react";
+import { InputAdornment as InputAdornment5 } from "@elementor/ui";
+
+// src/hooks/use-size-value.ts
+var useSizeValue = (externalValue, onChange, defaultValue) => {
+  const [sizeValue, setSizeValue] = useSyncExternalState({
+    external: externalValue,
+    setExternal: (newState) => {
+      if (newState !== null) {
+        onChange(newState);
+      }
+    },
+    persistWhen: (newState) => differsFromExternal(newState, externalValue),
+    fallback: () => defaultValue
+  });
+  const setSize = (value) => {
+    const newState = {
+      ...sizeValue,
+      size: value.trim() === "" ? null : Number(value)
+    };
+    setSizeValue(newState);
+  };
+  const setUnit = (unit) => {
+    const newState = {
+      ...sizeValue,
+      unit
+    };
+    setSizeValue(newState);
+  };
+  return {
+    size: sizeValue.size,
+    unit: sizeValue.unit,
+    setSize,
+    setUnit
+  };
+};
+var differsFromExternal = (newState, externalState) => {
+  return newState.size !== externalState.size || newState.unit !== externalState.unit;
+};
+
+// src/components/size/unit-select.tsx
+import * as React105 from "react";
+import { useId as useId3 } from "react";
+import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
+import { bindMenu as bindMenu2, bindTrigger as bindTrigger7, Button as Button5, Menu as Menu3, styled as styled11, usePopupState as usePopupState11 } from "@elementor/ui";
+var menuItemContentStyles = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center"
+};
+var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
+  const popupState = usePopupState11({
+    variant: "popover",
+    popupId: useId3()
+  });
+  const handleMenuItemClick = (index) => {
+    onClick(options[index]);
+    popupState.close();
+  };
+  return /* @__PURE__ */ React105.createElement(React105.Fragment, null, /* @__PURE__ */ React105.createElement(StyledButton2, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger7(popupState) }, value), /* @__PURE__ */ React105.createElement(Menu3, { MenuListProps: { dense: true }, ...bindMenu2(popupState) }, options.map((option, index) => /* @__PURE__ */ React105.createElement(
+    MenuListItem7,
+    {
+      key: option,
+      onClick: () => handleMenuItemClick(index),
+      primaryTypographyProps: {
+        variant: "caption",
+        sx: {
+          ...menuItemContentStyles,
+          lineHeight: "1"
+        }
+      },
+      menuItemTextProps: {
+        sx: menuItemContentStyles
+      }
+    },
+    option.toUpperCase()
+  ))));
+};
+var StyledButton2 = styled11(Button5, {
+  shouldForwardProp: (prop) => prop !== "isPrimaryColor"
+})(({ isPrimaryColor, theme }) => ({
+  color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
+  font: "inherit",
+  minWidth: "initial",
+  textTransform: "uppercase"
+}));
+
+// src/components/size/unstable-size-input.tsx
+import * as React106 from "react";
+import { forwardRef as forwardRef11 } from "react";
+var UnstableSizeInput = forwardRef11(
+  ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
+    return /* @__PURE__ */ React106.createElement(
+      NumberInput,
+      {
+        ref,
+        size: "tiny",
+        fullWidth: true,
+        type,
+        value,
+        onKeyUp,
+        focused,
+        disabled,
+        onKeyDown,
+        onInput: onChange,
+        onBlur,
+        InputProps,
+        sx: getCursorStyle(InputProps?.readOnly ?? false)
+      }
+    );
+  }
+);
+var getCursorStyle = (readOnly) => ({
+  input: { cursor: readOnly ? "default !important" : void 0 }
+});
+
+// src/components/size/unstable-size-field.tsx
+var DEFAULT_VALUE = {
+  unit: "px",
+  size: 0
+};
+var UnstableSizeField = ({
+  value,
+  defaultValue,
+  onChange,
+  onBlur,
+  units: units2
+}) => {
+  const { size, unit, setSize, setUnit } = useSizeValue(value, onChange, {
+    ...DEFAULT_VALUE,
+    ...defaultValue
+  });
+  const shouldHighlightUnit = () => {
+    return hasValue(size);
+  };
+  return /* @__PURE__ */ React107.createElement(
+    UnstableSizeInput,
+    {
+      type: "number",
+      value: size ?? "",
+      onBlur,
+      onChange: (event) => setSize(event.target.value),
+      InputProps: {
+        endAdornment: /* @__PURE__ */ React107.createElement(InputAdornment5, { position: "end" }, /* @__PURE__ */ React107.createElement(
+          UnitSelect,
+          {
+            options: units2,
+            value: unit,
+            onClick: setUnit,
+            showPrimaryColor: shouldHighlightUnit()
+          }
+        ))
+      }
+    }
+  );
+};
+var hasValue = (value) => {
+  return value !== null && value !== "";
+};
 export {
   AspectRatioControl,
   BackgroundControl,
@@ -7049,6 +7210,7 @@ export {
   TransformRepeaterControl,
   TransformSettingsControl,
   TransitionRepeaterControl,
+  UnstableSizeField,
   UrlControl,
   createControl,
   createControlReplacementsRegistry,